This is an excerpt from Chapter 2 of The Definitive Guide to Measuring Web Performance.
Now that you know why your website needs to be fast, you need to know how to go about measuring it.
This chapter will show you the common metrics used to measure website performance and what they are measuring.
In the beginning, there was PageLoad. Website performance was measured with a single measurement of the time until the PageLoad event is fired.
But PageLoad doesn't fully describe performance. Some sites initially load really fast, but dynamic content needs to load. PageLoad doesn't fully capture whether a website feels fast.
What do we do instead?
There are lots of ways a website can feel slow: slow to start, slow to finish, jumping around, slow to respond, and more. We can't use one metric to understand performance anymore.
In 2019, Google introduced a set of metrics intent on measuring the actual performance of a website as the users would see it. These metrics are collectively called the Core Web Vitals.
They are measured in all Chrome-based browsers, including the Googlebot spider, which uses these scores to influence page rank.
Note that only Chrome-based browsers support these metrics for now. Core Web Vital metrics measure the performance for Chrome desktop and Android mobile users, but not iOS devices, Safari users, or Firefox.
"First Contentful Paint" measures how long it takes to show the user that the request has been received and the page will load. For example, when you click on a news story, FCP measures the time from the click until the NPR News header renders.
FCP encourages websites to respond quickly to requests. Learn more about First Contentful Paint and how to measure it.
Google recommends that your FCP should be less than 1.0 second. Scores of greater than 3.0 seconds are notably poor and are likely to have a problem.
"Largest Contentful Paint" measures how long it takes until the browser renders the largest amount of content to the screen. At this point, ideally, the user can see the content they are looking for and believes the page is nearly done.
It would be more accurate if you measured the time until the most important content was visible, but that's difficult to do programmatically. LCP is a proxy measurement for most important content.
An example, navigating to the homepage of NPR News has a few different renders, but this is the largest one by pixel area:
The advertisement is probably not what the user is looking for, but the article images might be.
LCP encourages websites to finish quickly by emphasizing their primary content and making sure it loads fast. Learn more about Largest Contentful Paint and how to measure it.
Google recommends that your LCP should be less than 2.5 seconds. Scores of greater than 4.0 seconds are notably poor and are likely to have a problem.
"Cumulative Layout Shift" is a little harder to understand because it does not measure time. CLS measures how much the content on a page moves around as other content is loaded and rendered. Like this:
Layout Shifts measure how late-rendered content affects the user experience of a page. Layout shifts that push important content around are really frustrating to use.
CLS discourages websites from moving content around once the user sees it and minimizing the amount of late-rendered content. Learn more about Cumulative Layout Shift and how to measure it.
Your CLS score should be less than 0.1 and no worse than 0.25.
Interaction delays are easily noticeable by most people, so you shouldn't tolerate much delay here. Less than 100 ms ideally, and definitely no worse than 300 ms.
Aside from the Core Web Vitals, there are several other metrics that are commonly used by popular performance tools.
Time to First Byte measures the time until your server returns it's first byte of data. This represents both the network latency of your users as well as the processing time your server requires to assemble the document.
TTFB is a subset of the First Contentful Paint metric, which is also measuring the document size, parse, and render time.
TTI includes both the Largest Contentful Paint, the First Input Delay, as well as other background processing timers.
Google recommends a TTI of less than 3.8 seconds to be considered fast. Sites slower than 7.3 seconds have serious performance concerns. Note that this is a wider range than LCP.
Speed Index is a popular metric used by WebPageTest and Google performance tools that measures the visible changes while a webpage is loading to determine when the user believes that the webpage is done loading.
Now that you know the web performance metrics, what they measure, and what a good scores are, you need to understand the ways to gather these metrics. We'll cover that in the next chapter. Read on!