Which metrics to target in Core Web Vitals

What we'll talk about are the 3 most important metrics also called Core Web Vitals (CWV) that measure various different performance aspects, which impact user experience the most.

In essence, CWV can provide you with insight into the three most important aspects of the overall performance of your website that impact user experience the most, which are loading speed, interactivity and visual stability.

Moreover, what this entails is that pages

• are properly optimized for different devices (mobile, tablet, and desktop),
• are served over HTTPS protocol, ensuring a secure connection between your visitors and the server, where your website is hosted on,
• don’t have any intrusive interstitials, so that your content is easily accessible to your visitors

PageSpeed Insights

If you’re a website owner or you’re working with websites daily, you should probably know about PageSpeed Insights and what it can do. However, if you feel like you’ve got limited knowledge about it regardless, fret not, we’re going to talk about it here to explain how you can leverage it to boost your website’s performance.

First of all, the most important and most obvious thing it offers us are the metrics for Core Web Vitals, along with some other performance metrics. Another thing is, it gives you suggestions for improvements for each metric separately. This can be a true time saver, as it already gives you a possible starting point whenever you’re trying to optimize your website.

I would also like to mention a tool that it links you to right below the overall performance score. You can also measure rendering time using Chrome Dev Tools for more detailed analysis. The tool I’m talking about is the Lighthouse score calculator. Moreover, you can use this tool to check for which metric you should target to improve as it shows you what kind of impact improvements on each metric can have on your overall performance score.

Core Web Vitals

As we mentioned above, there are various metrics PageSpeed Insights shows us. However, we’re going to focus on and describe the three most important ones, which are Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

Largest Contentful Paint (LCP)

What makes Largest Contentful Paint one of the most critical metrics is that it measures how long users have to wait before they see the most significant piece of content on a web page. In other words, it measures the time that it takes for the largest visible content element on a page to be fully displayed, which could be an image, video or a block of text.

According to Google there is a certain criteria, which every page needs to meet to be considered in good standing. More specifically, if the content of the web page gets loaded within 2.5 seconds, it will be in the green, or good standing.

However, if the LCP score falls between 2.5 and 4 seconds, it will need some improvement. And even more, if it takes more than 4 seconds to load, its performance will be considered to be poor.

Learn how to optimize LCP on a WordPress site for better performance.

First Input Delay (FID)

FID is another important metric, measuring a vital aspect of the performance of a web page. Furthermore, it focuses on the responsiveness of the page during the initial phases of a page load.

It measures the time between users’ first interaction and when the page responds to it. As with all other metrics, this one too has criteria, a page needs to meet to be considered good. Therefore, if a page scores 100 milliseconds or less, it will get a green signal, meaning it’s in good standing. However, if it scores any more than that, it will need some improvement.

Usually, poor FID scores are a result of intensive javascript tasks, causing long executions that clog up the main thread.

See our guide on reducing JavaScript execution time and note that FID has been replaced by Interaction to Next Paint (INP) in 2024.

Cumulative Layout Shift (CLS)

The third CWV metric we call cumulative layout shift or CLS for short. This one measures the visual stability of the page by looking for elements that change position and size during the page load.

If you’re using PageSpeed Insights, you can see that this metric doesn’t have a unit attached to its score. This is because CLS doesn’t measure time like the other two CWV metrics.

However, it still has criteria, web pages need to meet to get a green score. A web page is considered in good standing when it scores 0.1 or less on CLS. Anything more than that will require the website owner to make some adjustments to improve it.

The main probable causes for a poor CLS score are

• image tags and video embeds that are missing their dimensions attributes,
• web fonts causing flashes of unstyled text as they’re loaded with a delay (FOUT and FOIT)
• iframes, ads, and other embeds without reserved space

Our comprehensive guide on fixing large layout shifts covers all these issues.

Conclusion

To conclude, we talked about what metrics are the most important to target to improve the overall performance of a website. Furthermore, we also mentioned how we can leverage PageSpeed Insights to gain a better understanding of what’s wrong with a web page and where to begin improving it. For ongoing monitoring, consider tracking ongoing performance changes using Chrome UX Report to measure real-world improvements.