We’ve covered what Core Web Vitals are. It’s now time to dig deeper and examine each of the three metrics to build out more of a 3D understanding.
So let’s go!
Largest Contentful Paint (LCP)
Largest Contentful Paint measures how long it takes from the page beginning to load to the largest text block or image loads on the screen. Essentially, the lower the LCP the better its performance.
Having a quick LCP sends a message to the user that this page not only works but is efficient.
As a page loads, the text and images may jump around the screen before it fully loads. Among these, the final piece of content to stop moving is the candidate for the Largest Contentful Paint.
FYI: the SVG elements don’t actually make the cut when considering the candidates for Largest Contentful Paint. So if you’re looking to squeeze your LCP time, if you’re working with SVG elements, note that this isn’t going to change your LCP.
What’s my LCP score?
Poor: 4 seconds or more
Okay: between 2.5 and 4 seconds
Good: 2.5 seconds or less
What’s making my LCP perform poorly?
There are a host of reasons that may explain why your LCP score is poor. Take for example, a slow server response time, or having a heavy largest content resource, or render-blocking JavaScript and CSS.
How can I improve my LCP score?
Because there are many reasons for a poor LCP performance there are many possible remedies, too. You can optimize your critical rendering path, images, and CSS. Remove any unused CSS or instead move it on a separate page. And ask yourself: do you really need to use this specific image? Is it critical to get your message across?
First Input Delay (FID)
First Input Delay measures the time from when a user first interacts with a page (for example when they click a link or press a key) to when the browser can respond to that demand. It is measured in milliseconds.
It highlights the first impression that a user has of your page’s responsiveness. And like all impressions, the first one better be good.
FYI: there are user interactions that are not counted as actions, such as zooming or scrolling. That’s because by their nature they are continuous actions and are held within other performance constraints.
Of course, the lower the FID the better the performance.
What’s my FID score?
Poor: 300 milliseconds or more
Okay: between 100 and 300 seconds
Good: 100 milliseconds or less
What’s making my FID perform poorly?
There is one common reason (although of course not the only one) for a poor FID performance: a browser’s main thread is too busy parsing and executing JavaScript code. And when it’s busy, it’s unable to respond to an interaction from a user.
How can I improve my FID score?
In order to boost the performance of FID, focus on what is holding back your browser from going interactive. Examples of this include reducing the impact that third-party code has; cut back on the execution time of JavaScript; and shorten the work done in the main thread.
Cumulative Layout Shift
Cumulative Layout Shift measures the aggregated (cumulative) score of all the unexpected shifts in layout. It provides insight into a page’s visual stability because it demonstrates the user experience of a user.
Unlike the other two metrics, CLS isn’t measured in seconds – or milliseconds – but rather it relates to the movement between 2 frames. These are called unstable elements. So the score of CLS measures the movement of frames.
In fact, CLS consists of 2 components: the distance fraction and the impact fraction. The former measures the greatest distance that the unstable element moves, and is divided by the largest dimension; and the impact fraction measures the area of the viewport that the unstable element takes up in both frames.
What’s my CLS score?
Poor: more than 0.25
Okay: between 0.1 and 0.25
Good: less than 0.1
What’s making my CLS perform poorly?
The reason why your page is experiencing a poor score is due to unexpected shifts of ads or images on the page with undefined dimensions. It can also be from resources that are loaded out of synch. Or it can be due to moments when new DOM elements are added to a page, but added above existing content that is already loaded. This is why content that has already been loaded is being pushed away.
How can I improve my CLS score?
There are ways that you can eliminate layout shifts. These include adding size attributes for videos and images. Not putting content above other content that’s already loaded.
FYI: testing properly for any unexpected layout shifts can actually be quite difficult. That’s because some functionality can be disabled or work not as expected there. Examples of this include cookie notifications, which may not be shown, or that the live chat support may be disabled, or personalized content may not load.
