Understanding the Page Speed Metrics in Google Lighthouse
If your experience is anything like mine, you're probably pretty confused about all the acronyms involved in checking your page speed.
Chances are you probably also want to know which metrics matter, and if your score is good or bad.
Table of Contents
- Metrics in a Google Lighthouse report
- What do all of these metrics even measure?
As an example, let's check out the performance section of a Google Lighthouse v7.3.0 report:
It helps to think of page speed metrics in a few categories:
- How long did the server take to start sending the page
- Time to First Byte (TTFB), or Server Response Time falls under this category
- How long did it take for the page to show certain things on the page
- First Contentful Paint (FCP), Speed Index, and Largest Contentful Paint (LCP) fall under this category
- How long did it take for the page to start responding to user interactions
- Time to Interactive (TTI) and Total Blocking Time (TBT) fall under this category
Time to First Byte measures the time between requesting a page, and getting the first byte of data back from a server. Time to First Byte used to be featured as a main metric tracked by Google Lighthouse. In more recent versions, it's featured as an audit named "Reduce initial server response time".
Google considers values greater than 600ms to be bad.
Some people don't worry as much about this metric since they believe that they can't influence it, but that's not necessarily true.
There are two places you can fix your TTFB:
Your backend server does have some influence on TTFB, with the main contributors being server-side rendering, database queries, API calls, load balancing, your actual app's code, the server's load itself (particularly if you're using cheap shared hosting).
You can improve your TTFB on your server by:
- Upgrading your server's specs (more RAM, more CPU), or paying more for a better hosting provider
- Upgrading your database's specs (assuming it's on a different server to your app server)
- Optimising your backend code
The time spent transferring data from the server to the browser is often overlooked, but there are some easy wins here.
As mentioned in Ten Ways to Improve WordPress Page Speed, using a CDN gives you hundreds of little servers across the world close to your users, that massively reduce the time it takes to load your page.
First Contentful Paint measures the time it takes the browser to load the first visible block of text, or image on your page.
Google considers FCP values of:
- less than 2 seconds as fast
- greater than 2 seconds, but less than 4 seconds as moderate
- greater than 4 seconds as slow
If you have a particularly high FCP value, it might be worth double checking how fonts load on your page. You want to ensure your text is visible while your fonts load to minimise FCP.
Essentially this metric penalises websites that load just a header and footer, then take 10 seconds to load content, while rewarding sites that load all content gradually over the same period of time.
As a user, you typically visit a webpage because you want to see its content. Visiting a website that loads its content slowly is generally a frustrating experience, and we're more likely to abandon a page that takes ages to show anything.
Google considers Speed Index values of:
- less than 4.3 seconds as fast
- greater than 4.3 seconds, but less than 5.8 seconds as moderate
- greater than 5.8 seconds as slow
In contrast with FCP, Largest Contentful Paint measures the time it takes the browser to load the largest visible block of text, or image on your page.
This metric can be dramatically different between mobile and desktop, depending on how much content you show when the page first loads.
Google considers LCP values of:
- less than 2.5 seconds as fast
- greater than 2.5 seconds, but less than 4 seconds as moderate
- greater than 4 seconds as slow
Time to Interactive measures the time it takes for a webpage to be fully interactive, which Google defines as:
- The page displays content
- Event handlers are registered for most visible elements on the page
- User interactions are responded to within 50ms
TTI penalises pages that optimise for content visibility at the expense of interactivity. That is, you can see the content, but you can't scroll or clicking on things has no effect.
Google considers TTI values of:
- less than 3.8 seconds as fast
- greater than 3.9 seconds, but less than 7.3 seconds as moderate
- greater than 7.3 seconds as slow
Want to discuss this article? Let me know on Twitter @rozenmd