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.
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:
What problems can you diagnose with this?
See some examples below:
- 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.
- 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.
- 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
