Ultimate Guide to Core Web Vitals

Core Web Vitals are essential real-world web metrics that measure user experience on the web. The three metrics they consist of are Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

In May 2020, Google announced that Core Web Vitals would be part of the Page Experience update, hence becoming a ranking factor. Mobile page experience signals have been used in ranking since May 2021, while the desktop version became a part of it in February 2022.

Though there are varying opinions on the actual impact of Core Web Vitals on rankings, these metrics provide a quantifiable way of evaluating user experience that goes beyond ranking in search. Ensuring your pages offer a great experience is fundamental to satisfying the users’ needs after landing on your page and completing your business goals.

This article explains what each Core Web Vitals metric measures, how to analyze your scores, and what to do to improve them.           

What are Core Web Vitals?

Core Web Vitals measure specific aspects of user experience:

• Largest Contentful Paint measures loading performance — LCP identifies the point during page load when the main content has most likely loaded.
• First Input Delay measures interactivity — FID evaluates how long users have to wait before they can interact with the page.
• Cumulative Layout Shift measures visual stability — CLS sums unexpected shifts in the layout of the visible page’s content.

For each of these metrics, Google identified appropriate thresholds that correspond to different scores:

• Good,
• Needs improvement,
• Poor. 

For a higher chance of reaching the set target for the majority of users, you should aim for at least 75% of pageviews to be in the “Good” threshold for each of the three metrics. This measurement was selected to ensure the pages provide a good experience to the majority of users, regardless of the device used and the network conditions. 

It should also be noted that the CWV metrics are measured for every page unless there is not enough data gathered for it. If that is the case, the score may be inferred from the whole website or some of its sections.

Ahrefs conducted a research study on Core Web Vitals and analyzed the scores for a large number of sites. It showed that in 2022, ca. 33% of sites pass CWV metrics, this score being 10 pp higher compared to the year before.

Working on improving CWV metrics is definitely an SEO aspect that shouldn’t be neglected. Let’s go through each metric, its characteristics, and ways to optimize it.

LCP

LCP (Largest Contentful Paint) is a metric focused on how long the page’s main content takes to load. The main content will typically be the hero image, video, or large paragraph of text.

The measurement for LCP is taken from content located above the fold, which users initially see after loading the page.

The largest element can sometimes change as the page loads. For instance, content can be added to the DOM, or the layout may change, resulting in the largest element being moved from the viewport. Consequently, another element can be considered the biggest.

A related metric is First Contentful Paint (FCP), referring to the time it takes the browser to render the first element of DOM content after a user visits your page.

Look at the image below to see the connection between when FCP occurs and when LCP starts. 

You can see that the largest element is a text paragraph. It appears before other similar elements are visible, such as images. After the images load, we can observe they remain smaller than the text, which then continues to be the largest element on a page.

Google has the following thresholds for LCP:

LCP should happen within 2,5 seconds from when the page starts loading to provide a good experience.

If LCP is higher and the element takes longer to load, users will need to wait for the page’s elements to load, negatively impacting their experience.

According to Ahrefs’ study, LCP appears to be the most complex and challenging metric to improve compared to FID (which sites struggle with the least) and CLS. LCP scores are especially unfavorable for mobile devices, likely due to slower connections and CPU limitations.

How to improve LCP

Here are some recommendations for optimizing your LCP score:

• Remove unnecessary third-party scripts which could be significantly slowing down pages,
• Minify your CSS files,
• Implement lazy loading for images, where they load when a user scrolls down a page,
• Optimize your critical rendering path to prioritize the content connected to the user’s current action,
• Optimize your images, e.g., compress them or adjust their format,
• Remove very large elements from a page,
• Improve your hosting,
• Optimize web fonts.

For an in-depth analysis of how to measure and improve LCP, follow our guide to Largest Contentful Paint.

First Input Delay (FID)

FID measures how long it takes for a user to interact with the page. These interactions can include actions like:

• Clicking a link in the navigation,
• Entering an email address into a sign-up form field,
• Selecting an option from a dropdown menu.

For some pages, FID may not be reported and measured. This can be expected for pages that contain only text content, such as blog posts, for which the only interaction entails scrolling or pinching the screen for zooming.

FID is critical for pages that require essential interactions, such as login or sign-up pages.

Focusing on the first input is relevant because:

• First impressions are crucial for determining the user’s overall impression of the website,
• The most significant interactivity issues happen during page load, so focusing on the user’s first interaction can positively impact the overall interactivity of sites on the web.

Google set the following thresholds for FID:

You should aim for an FID score of no more than 100 ms to provide a good experience for your users.

Exceeding this time can hinder the users’ ability to interact with the page quickly.

How to improve FID

Here is how you can optimize your First Input Delay score:

• Reduce the number of requests made to the server during load,
• Work on optimizing your JavaScript by minimizing or deferring it,
• Remove non-essential third-party scripts,
• Use the browser cache.

For an in-depth analysis of how to measure and improve FID, follow our guide to First Input Delay.

Cumulative Layout Shift (CLS)

CLS determines how much elements on a page shift during page load. 

Your page elements should be as stable as possible to be easily clickable for users and ensure the layout shift doesn’t prevent them from completing the desired action.

Google has the following thresholds for CLS:

You should aim for a CLS score of 0.1. or less.

If you exceed this threshold, there is a higher chance users will accidentally click on an unwanted button or link after the page layout shifts.

How to improve CLS

Here is how you can optimize your Cumulative Layout Shift score:

• Include size attributes for media files, such as images and videos, to tell the browser how much space will be used by these elements,
• Avoid adding new content above the fold — add it below the fold so it doesn’t get pushed down,
• Make sure each element on a page has its reserved space.

For an in-depth analysis of how to measure and improve CLS, follow our guide to Cumulative Layout Shift.

How do Core Web Vitals impact SEO?

Core Web Vitals are metrics determining user experience in specific, measurable ways. Improved user experience means users can easily find what they were looking for when visiting your site, and it will be more likely for them to return.

We know Core Web Vitals are a confirmed Google ranking factor, but their impact on rankings isn’t crystal clear. 

Here is John Mueller’s response from February 26th, 2021, to a question about the influence of Core Web Vitals on search results:

[…] Relevance is still, by far, much more important. So just because your website is faster with regards to the Core Web Vitals than some competitor’s doesn’t necessarily mean that, come May, you will jump to position number one in the search results. […] It should make sense for us to show the site in the search results. Because as you can imagine, a really fast website might be one that’s completely empty. But that’s not very useful for users. So it’s useful to keep that in mind when it comes to Core Web Vitals. It is something that users notice. It is something that we will start using for ranking. But it’s not going to change everything completely. So it’s not going to destroy your site and remove it from the index if you have it wrong. It’s not going to catapult you from page 10 to number-one position if you get it right.

source: John Mueller

In a Twitter post, John attempted to show the influence of CWV scores in a bit more detail:

Think of it like this. Graphic not to scale. pic.twitter.com/6lLUYNM53A

— 🌽〈link href=//johnmu.com rel=canonical 〉🌽 (@JohnMu) May 21, 2021

Measuring the impact of Core Web Vitals on rankings has been difficult for members of the SEO community. When the page experience update rolled out, many other updates occurred in search, like the spam updates and a core update in July 2021. 

This makes it tricky to separate the influence of CWV from other changes. 

Also, how would one even go about isolating CWV as the direct cause of ranking changes, given all the other external factors, algorithm tweaks, and how long it takes Google the process the changes?

— Lily Ray 😏 (@lilyraynyc) October 25, 2021

According to SISTRIX, pages that meet all of Google’s recommended thresholds for CWV metrics rank one percentage point better than the average, equal to a 37% improvement. Meanwhile, pages that failed at least one CWV metric ranked 3.7% worse on SISTRIX’s Visibility Index. 

Moz found that the most significant impact of CWV metrics occurred for URLs that failed tests for all three metrics, which saw a drop by 1.15 positions:

Either way, the impact of Core Web Vitals goes well beyond simply being a ranking factor. User experience can influence your business’ success – for example, it could lead to increased conversion rates.

John summed it up in response to a Reddit post:

The other thing to keep in mind with core web vitals is that it’s more than a random ranking factor, it’s also something that affects your site’s usability after it ranks (when people actually visit). If you get more traffic (from other SEO efforts) and your conversion rate is low, that traffic is not going to be as useful as when you have a higher conversion rate (assuming UX/speed affects your conversion rate, which it usually does). CWV is a great way of recognizing and quantifying common user annoyances.

source: John Mueller

How to measure Core Web Vitals?

You can use several tools to measure Core Web Vitals. Make sure you know what data the tools use: 

• field data – taken from real-world users, or 
• lab data – collected from predefined conditions.

To understand the use cases for both data types, be sure you’re familiar with our article on measuring web performance with lab and field data.

Chrome UX Report

The Chrome User Experience Report (CrUX) contains public, anonymized data on Core Web Vitals from real users on millions of websites. This dataset also includes information on the device and connection types, allowing for a more comprehensive evaluation and comparison of user experience between different technologies and sites. 

CrUX has tremendous value for site owners and developers to help them assess pages’ performance on the web.

Data from Chrome UX Report can be found in PageSpeed Insights and the Core Web Vitals report in GSC.

Apart from that, check out some other options for using CrUX data.

Lighthouse

You can access Lighthouse in Chrome DevTools:

It’s important to note that Lighthouse contains lab data. 

To analyze Core Web Vitals in Lighthouse, use the incognito mode, as any plugins or extensions added to Chrome can affect how the page loads and display inaccurate results.

After selecting Generate report on the page you want to analyze, you will see the assessment results and some additional practical details, like Best Practices and SEO checks.

You can also see recommended actions to further improve your page’s loading.

Core Web Vitals report in Google Search Console

You can find a report dedicated to Core Web Vitals in Google Search Console. In the main GSC view, you will find it in the Experience section:

After opening one of the reports, you can see an overview of URLs with respective statuses, including the existing issues that led to these statuses:

If you click on the status, you will display a list of URLs affected by the issue. You can then start addressing the problems. The perk of using this report is that you see data for all indexed pages within your site and don’t have to analyze each URL.

Data for the Google Search Console report comes from Chrome UX Report and reflects the experience of real users who visited the URLs.

PageSpeed Insights

PageSpeed Insights is a valuable tool for checking a page’s performance on mobile and desktop devices that can provide helpful recommendations for improving the page. 

Crucially, this tool can show both lab and field data for a page.

If you don’t want to check every page on your domain, you can focus on analyzing a few pages for each type to get an idea of how they are performing and which page templates may require adjustments. 

For instance, if you have an eCommerce site, start by checking the performance of different types of product pages, as well as the category and contact pages, and those containing the cart or used to facilitate payments.

General SEO tools

Some popular SEO tools include features for checking CWV. 

One such tool is Screaming Frog – its paid version allows you to analyze CWV metrics after connecting to PageSpeed Insights API. You can export the data you get as a .csv to use it for further analysis.

Another option is using WebSite Auditor, offering an opportunity to analyze and segment CWV metrics in bulk for all of your pages to simplify the process of improving them.

Other metrics connected to Core Web Vitals

Let’s discuss other valuable web performance metrics that can help evaluate the user experience on the web.

Other Web Vitals

Apart from Core Web Vitals, other supplemental metrics capture the fuller user experience and can support your process of diagnosing and addressing performance-related issues.

Aside from the First Contentful Paint (FCP) metric I’ve mentioned in the context of LCP, there are the following metrics to be aware of:

• Time to First Byte (TTFB) captures how long it takes to request a resource and when the response’s first byte starts to arrive. TTFB is useful for diagnosing issues with LCP, such as slow server response times. 
• Time to Interactive (TTI) is the end time of the last long task that occurred before the quiet window, meaning no long tasks and no more than two in-flight network GET requests, or, if there are no long tasks – it is the value of FCP.
• Total Blocking Time (TBT) determines the time between FCP (FCP) and TTI, capturing how long the main thread was blocked by a long task that runs for more than 50 ms and can result in a noticeable delay for the user. The total blocking time refers to the sum of the blocking time for each long task occurring between FCP and TTI.

TTI and TBT are lab metrics, and since they cannot be measured in the field, they aren’t considered Core Web Vitals. But they can be used to diagnose issues connected with interactivity that can impact FID.

Candidate metrics for Core Web Vitals

During Chrome Dev Summit 2021, Chrome announced that two additional performance metrics – Responsiveness and Smoothness – were being considered for Core Web Vitals.

Currently, First Input Delay measures the delay of input latency. However, it determines the time it takes the browser to get ready to process a request but doesn’t evaluate the total event duration from initial user input throughout a page’s lifetime. This is what the new Responsiveness metric would capture.

Find out how this metric could be measured in a post from web.dev on Responsiveness.

Meanwhile, Smoothness would measure “stutters” or “freezes” in animations or during scrolling to help understand how much animation frames being dropped can affect users. The score would show how smooth the animation is for the user.

To learn more about the concept of the Smoothness metric and the plan for measuring it, check out the post on web.dev.

Wrapping up

We don’t need to conduct further research or tests to determine that Core Web Vitals are here to stay. It’s your users that will come to your site and have a satisfactory experience if you take the time to work on these metrics.

Whether they are a significant ranking factor or more of a measurable way of evaluating user experience, we can expect that Google will be refining the CWV metrics in the future and optimizing the way they are used in search.

Now you’ve understood Core Web Vitals, take a look at our comprehensive guide on page experience to continue optimizing your website!