How Lighthouse calculates your score and how to use it

A rare example of a perfect score

The 5 metrics that affect the score

  • First Contentful…

HTML Flamegraph

What problems can you diagnose with this?

  1. You don’t want to block rendering with CSS links. You embed some critical CSS in your HTML. Sometimes this goes unchecked and tens of KBs of CSS goes into your initial HTML that’s not critical at all.
  2. If you carelessly embed SVGs in your HTML it can also increase the size significantly. I’ve seen some pages having low priority footer logos as much as 30% of the initial HTML payload.
  3. You server-side render (SSR) your React app…

Csaba Palfi

Development, DevOps & Web Performance Consultant

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store