What Are Core Web Vitals & How to Measure Them

Core Web Vitals — the three metrics to rule them all!

These metrics measure the loading speed, interactivity, and visual stability of a web page — or in other words, the user experience.

In the past, Google’s algorithm and ranking were mainly based on semantics, like content and keywords. But this has changed. 

Google wants to provide the best results to its users, so it added user experience — and thus these core metrics — to its ranking factors.

In this article, we will cover topics such as:

• What are Core Web Vitals?

• Why should we optimize them?

• How do we measure them?

Let’s get started!

What Are Core Web Vitals?

Core Web Vitals is a subset of a bigger set of metrics known as Web Vitals. They are the metrics that:

In other words, you should optimize these metrics first!

Right now they consist of three stable metrics: the Largest Contentful Paint (LCP), the First Input Delay (FID), and the Cumulative Layout Shift (CLS).

However, this set of metrics evolves. For example, Interaction to Next Paint (INP) will replace FID in March 2024.

Each of these metrics represents and measures a different aspect of the user experience: loading speed, interactivity, and visual stability.

Largest Contentful Paint (LCP)

LCP measures loading performance. 

Example

In our example, the LCP is for the image of a blog post. First the text loads, then eventually the image.

First Input Delay (FID)

FID measures interactivity.

Example

Some elements load faster (e.g. text, buttons) than others (e.g. large unoptimized images).

Imagine visiting a web page. The buttons load instantly and the user clicks one of them. However, the main thread is still loading the rest resources. As a result, there is a delay between the user’s action and its execution.

Cumulative Layout Shift (CLS)

CLS measures visual stability.

Example

A layout shift happens in the image of the first example — the featured image pushes down the post’s text.

But some layout shifts are more annoying than others.

Imagine reading a paragraph on a web page. Suddenly, an ad pops out of nowhere and pushes the content down. You are surprised and your focus is gone.

This is one of the most annoying layout shifts — you don’t want to do this to your users, trust me!

Why Optimize Core Web Vitals?

The answer should be clear by now: to get a better position in Google’s search results, and thus more organic traffic to your site.

Google wants to provide high-quality web pages as search results to its users. Core Web Vitals measure how good the user experience of a web page is. Hence, they became a ranking signal.

Assuming that two pages have equally good content, the one with better metric scores will get the better ranking.

How to Measure Core Web Vitals?

The best tools for measuring Core Web Vitals are:

• PageSpeed Insights — reports Core Web Vitals for mobile and desktop devices over the previous 28-day period. To generate a report, visit the link, enter your URL, and click Analyze.

• Lighthouse — an open-source tool for monitoring web performance. This reports additional metrics, such as Accessibility and SEO. Lighthouse is available both in Chrome’s DevTools (as a tab) and as an extension.

• Search Console — reports Core Web Vitals for all web pages of your site. Register your site and when enough data are available, Search Console will generate a report for you.

These tools are free and super easy to use. Additionally, they capture the real-world experience, thanks to the Chrome UX Report (CrUX).

Finally, Google follows the 75th percentile rule. This means that your web page will get a good score if at least 75% of page views meet the “Good” threshold of every Core Web Vital.

Conclusion

Core Web Vitals measure user experience and can impact your site’s ranking factor on Google’s search results. Good user experience also helps with engagement rates and reduces bounce rates.

In this article, we studied the current Core Web Vitals (LCP, FID, and CLS) and the available tools to measure them (PageSpeed Insights, Lighthouse, and Search Console).

In our next article, we will talk about optimizing the Largest Contentful Paint (LCP). Don’t miss it!

Thank you for reading!