How Lighthouse calculates your score and how to use it

Google uses page speed in mobile search and ad ranking, and their Lighthouse tool provides the PageSpeed Insights (PSI) score to help you measure and boost your page’s performance. Let’s look under the hood at how it works.

A rare example of a perfect score

The PSI score is between 0 and 100 and is generated from a Lighthouse run. Google considers a speed score of 90–100 as fast, 50–89 as average, and 0–49 as slow. You can think of PSI as a hosted Lighthouse web interface (and API).

The Lighthouse scoring documentation explains that the performance score is determined using the following estimated metrics:

  • First Contentful…

I built a HTML Flamegraph tool that help you visualise and diagnose where your HTML payload bytes come from:

HTML Flamegraph

What problems can you diagnose with this?

See some examples below:

  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