163 Followers
·
Follow

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.

Image for post
Image for post
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 5 metrics that affect the score

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

  • First Contentful Paint (FCP): when the first text or image content is painted. …

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

Image for post
Image for post
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 to ensure loading performance is better. But now you have to re-hydrate your SSR-ed markup on the client side using the same state as on the server.
    This preloaded state goes into your HTML. …

About

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