In the previous post, I talked a bit about what Lighthouse is, what are the various audits it performs and how the scoring is done. In this post, let’s continue with discussing the metrics that make up the performance audits.
As mentioned in the previous post, the following metrics are included in calculating the score for Performance audits –
- First Contentful Paint (FCP)
- Largest Contentful Paint (LCP)
- Total Blocking Time (TBT)
- Cumulative Layout Shift (CLS)
- Speed Index (SI)
Let me try to explain each concept in a bit detail. I’ll try to include as much example as possible.
First Contentful Paint ( FCP)
The first metric that I’m going to talk about is the First Contentful Paint (FCP). What is it?
This is a web performance metric that measures the time it takes for the first piece of content to appear on a webpage. The First Contentful Paint (FCP) metric measures the time from when the page starts loading to when any part of the page’s content is rendered on the screen.
When talking about this metrics,
content can be anything that is visible to the end user. It may refer to text, images (including background images),
<svg> elements, or non white
For example, let’s say you’re visiting a news website that contains various elements such as a header, navigation bar, images, and article text. When you type in the URL and hit enter, the browser starts loading the webpage. As the loading process continues, the browser renders the webpage and displays its content gradually.
The moment the first content element appears on the webpage, the First Contentful Paint (FCP) metric is recorded. In this example, let’s say the first content element that appears is the header of the webpage. The browser records the time it took for the header to be loaded and displayed to the user.
In the image above, you can see that in the second frame, the header has appeared. This is when the First ContentFul Paint metric will be recorded.
FCP vs LCP
Now it is important to know that in the second image, when the FCP metric, is getting recorded, the page has not yet fully loaded – only certain components of the page has loaded. This is the difference between the First Contentful Paint (FCP) and the Largest Contentful Paint (LCP) – which I will discuss in later section. LCP waits for the full page to render instead of only the first contents.
Now why is FCP important? FCP is important because it is a measure of how quickly your webpage becomes available to an end user. FCP gives website owners and developers an idea of how quickly their webpage is loading and displaying content to users. A slow FCP can indicate a poor user experience, as users may leave the webpage before all the content has loaded. So the goal of most of the products is to have a low FCP as possible – although this should be a realistic value.
What’s a good FCP Score
As per the developer portal of FCP, for an optimum to a good experience, the FCP should be 1.8 seconds or less. To ensure you’re hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.
Large Contentful Paint (LCP)
So we had a look at FCP, which measures the first piece of content on the webpage. Large Contentful Paint or LCP as it is called, the measure of the render time of the largest image or text block visible within the viewport, relative to when the page first started loading. As in case of FCP, the content in this case can be some pre-defined set of elements that are visible to the user, such as an image, a video, or a block of text.
For example, let’s say you’re visiting an e-commerce website that contains various elements such as a header, navigation bar, product images, and descriptions. When you type in the URL and hit enter, the browser starts loading the webpage. As the loading process continues, the browser renders the webpage and displays its content gradually.
The Largest Contentful Paint (LCP) metric is recorded once the largest content element visible in the viewport is loaded and displayed to the user. In this example, let’s say the largest content element is a product image on the webpage. The browser records the time it took for the product image to be loaded and displayed to the user.
Note that in case of FCP, any element that gets rendered first is considered for measuring the FCP metrics – this can be any element. However, in case of LCP, there is a restriction on which elements do we need to consider for measuring the metrics.
- Element with
<image>elements inside an
<video>elements with a poster image (the poster image load time is used)
- An element with a background image loaded via the
url()function (as opposed to a CSS gradient)
- Block-level elements containing text nodes or other inline-level text elements children.
You can read about these elements in the w3c specification about the Large Contentful Paint API here – this list is in turn already exposed by the Element Timing API. There is only a specific set of elements pre-defined to keep things simple.
Now apart from these elements – which can be meaningful or interact-able to users, there are certain other heuristics that are taken into account –
For Chromium-based browsers, these include:
- Elements with an opacity of 0, that are invisible to the user
- Elements that cover the full viewport, that are likely considered as background rather than content
- Placeholder images or other images with a low entropy, that likely do not reflect the true content of the page
FCP vs LCP – Point 2
Now as you can see, LCP and FCP, inspite of using “contentful” in their name, aim at different metrics. FCP measures when any content is painted to screen and LCP when the main content is painted so LCP is intented to be more selective.
Also, there is a very important point to note here – how the size of the element to be considered for the Large Contentful Paint is calculated. For an element to be considered to be included in the LCP metrics calculation, the element has to be present inside the viewport. If the element extends outside of the viewport, or if any of the element is clipped or has non-visible overflow, those portions do not count toward the element’s size.
What’s a good LCP Score
Now that we have established which elements to consider and how to calculate the size of the element, brings the question – what should be an ideal LCP score time for the webpage.
As per the developer portal of LCP, web developers/designers should aim at an LCP of 2.5 seconds or less for the optimum user experience. As similar to the calculation of FCP, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.
This is enough for this part 2 of the series. In the next post, I will talk about the remaining three metrics, and how each metrics hold weightage in the overall scoring.