Measure And Optimize Core Web Vitals

The Core Web Vitals are a set of three website performance metrics that capture how users experience the performance of your website. They are used as a search result ranking factor by Google.

This article looks at what the Core Web Vitals are, how you can measure them, and how they impact SEO.

What are the three Core Web Vitals?

The three Core Web Vitals are:

• Largest Contentful Paint: how quickly does the main page content render
• First Input Delay: how quickly does the page respond to user input
• Cumulative Layout Shift: how stable is the page layout, does content move around after rendering?

Interaction to Next Paint will replace First Input Delay in March 2023.

Google has defined thresholds for each of these metrics to rate them as "Good", "Needs Improvement", or "Poor".

How to test Core Web Vitals

There are many free Core Web Vitals testing tools tools available, for example:

• DebugBear Core Web Vitals Test
• Google PageSpeed Insights
• Site Speed Chrome Extension
• Google Search Console

How do Core Web Vitals impact SEO?

Google first started using Core Web Vitals as a ranking factor in June 2021. Initially this only affected mobile rankings, but in February 2022 the change was also be rolled out to desktop searches.

Site owners who optimize the performance of their website will rank higher in Google.

The Core Web Vitals are part of the broader range of page experience signals Google uses, like being mobile-friendly and using a secure connection. These quality signals assess how good the user experience of your webpage is.

When do pages get an SEO boost due to Core Web Vitals?

You should see a gradual ranking boost as your metrics move toward the "Good" rating. Core Web Vitals are not a binary ranking factor!

Once all metrics are in the "Good" range, further improvements will no longer yield SEO benefits.

Even when making improvements within the "Poor" range, you could still see your pages rise in search result rankings if your competitor's pages are also slow.

What is a good Core Web Vitals score?

To get a "Good" rating from Google you need a Largest Contentful Paint under 2.5 seconds, a First Input Delay under below 0.1 seconds, and a Cumulative Layout Shift below 0.1.

Google looks at the 75th percentile of experiences, meaning your ranking is determined by the slowest 25% of visitors. For example, to get a "Good" LCP rating the main page content must load within 2.5 seconds at least 75% of the time.

How does Google collect Core Web Vitals data?

Google collects metrics from real users on your website as part of the Chrome User Experience Report (CrUX). Data is collected from:

• Chrome users on desktop and Android
• Users who have opted into usage statistics reporting
• Users who are logged into their Google account

The page speed experienced by your actual users might be different from what you see in lab test results.

What does it mean when a page has insufficient real user data in PageSpeed Insights?

If a page doesn't get enough traffic then Google doesn't have enough data to assess the real world experience of your URL. For new websites the entire domain may not have enough real user data yet.

Try testing a similar page with more visitors, or use the Lighthouse lab data Google also provides to optimize your website.

How to optimize Core Web Vitals

To improve the Core Web Vitals metrics, first run a page speed test to see which of the three metrics you need to optimize.

To optimize the LCP you'll need to review render-blocking resources on your website, for example critical CSS. Check if you can use modern image formats reduce the download size of your page. If you use a library like React server-side rendering will speed up your website.

To optimize CLS, check which page elements are moving around after the initial load. Often adding a CSS min-height to elements that change size helps reduce layout shift.

To optimize FID use Chrome DevTools to collect a performance profile. Identify slow user interactions and optimize slow JavaScript code and other CPU tasks.

What are other notable Web Vitals metrics in PageSpeed Insights?

In addition to the three Core Web Vitals, PageSpeed Insights also shows real user data for First Contentful Paint, Interaction to Next Paint, and Time to First Byte. These three Web Vitals metrics don't affect Google rankings, but are useful as diagnostic metrics.

For example, Time to First Byte (TTFB) measures how quickly the server responds to the HTML document request. Before loading the HTML document the browser can't start displaying content. If you see a high TTFB value that suggests backend code on your server is slow and might be holding back the Largest Contentful Paint.

Largest Contentful Paint (LCP)

When first loading a website you'll start with a blank page. Then gradually content will start appearing on the screen.

Different paint timings can be measured and used to evaluate the website's performance.

The First Paint (FP) measures when the browser first starts rendering parts of the page. This includes empty boxes without any content.

The First Contentful Paint (FCP) measures when content, like text or images, is first rendered by the browser.

The Largest Contentful Paint (LCP) measures at what time the largest UI element was rendered on the page.

Paint timing metrics are closest to the metrics Google traditionally used to factor site speed into its rankings. They measure the visual loading experience of your site.

Unlike the First Paint or the First Contentful Paint, the Largest Contentful Paint can increase later on in the page load process if another large element is rendered in the viewport. Your website might look fully loaded, but if part of the page re-renders then the LCP will jump up.

This filmstrip shows an example where this happens when a parallax background is enabled. Other common causes are replacing a low-resolution background image with a high-resolution one, or a slider that advances to the next slide.

For a good user experience, the Largest Contentful Paint should happen within 2.5s of the page starting to load.

To optimize the Largest Contentful Paint, first check if you can speed up the initial page load. This might include removing render-blocking JavaScript and CSS files, or speeding up server response times. You can read more about this in the First Contentful Paint article.

Avoid large UI updates once the page has been rendered. To do this, make sure that the resources needed to render the above the fold content of your page are prioritized (for example using preload tags, or by lazy-loading other content).

If you're building a JavaScript app, consider using server-side rendering to avoid visual changes once the client-side app is initialized.

First Input Delay (FID)

The First Input Delay (FID) measures how long it takes for the browser to start responding to user interaction, like clicks and taps.

The most common reason for a poor First Input Delay is JavaScript compilation or execution blocking the page main thread. If other work is already in progress, the browser can't start handling the user interaction until this work is complete.

This screenshot of the Chrome DevTools Performance tab shows an example of a busy main thread. If the user tried to interact with the page during the long frames (600.9ms and 994.5ms) it would have taken a long time for the page to respond.

Ideally, the First Input Delay should be under 100ms.

To optimize First Input Delay, record a Performance profile in Chrome DevTools and identify long tasks that block the UI. Is it possible to speed up theses tasks, or to break them up into smaller chunks, so that user interactions can be handled in between?

Third-party scripts can also block the main thread. Check if all of them are necessary, or if some can be loaded later on as needed.

Total Blocking Time

The First Input Delay can only be measured if the user actually interacts with the page. If you're using a lab-based tool like PageSpeed Insights, Lighthouse, or DebugBear, then you won't be able to capture it.

As a substitute, you can look at Total Blocking Time (TBT) instead. It measures how long the page main thread was blocked for while the page was loading. "Blocked" here means that there were long tasks taking more than 50 ms. A series of multiple 40ms tasks would not count toward Total Blocking Time.

Interaction to Next Paint (INP)

Just like First Input Delay, Interaction to Next Paint measures how quickly the page responds to user interactions.

The First Input Delay metric has two important limitations:

• It only considers the first user interaction on the page
• It only measures how long it takes for the browser to start responding to user input, not how long it takes to finish responding

The experimental Interaction to Next Paint metrics addresses both of these issues.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) measures how much content moves around after first being rendered. Visual stability is important for a good experience.

Layout instability can cause users to be disoriented, for example if a button moves around while the user is trying to click it, or if text shifts around after the user starts reading.

This filmstrip shows an example of content shifting around on a page.

To optimize Cumulative Layout Shift, either make sure all content renders in one go, or use placeholders while some content is still loading. That way, even if the UI updates later on, it won't cause existing content to change position.

The CLS should be as low as possible, ideally under 0.1.

How to test Core Web Vitals in Chrome DevTools

You can use the DevTools Performance tab to measure the Core Web Vitals of your website.

First, open DevTools by right-clicking on the page and selecting Inspect. Then click on the Start profiling and reload page button on the left.

Chrome includes a Web Vitals lane in the Performance recording. Click on the Web Vitals checkbox to enable this feature. The recording now shows lanes marking the First Contentful Paint and Largest Contentful Paint, as well as each layout shift that occurs.

Below that you can see a lane called Long Tasks. It shows main thread tasks taking longer than 50ms, with time in excess of 50ms marked in dark blue.

Core Web Vitals Overlay

Chrome also provides an option to view the Web Vitals for the current page as an overlay. When working on optimizing your site speed, this overlay makes it easy to see the most important metrics without having to dive into the Performance tab.

You can enable the overlay via the DevTools Command Menu. Press Ctrl/Cmd + Shift + P, type web vitals overlay, and press Enter.

You'll then see the Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift for the page.

Alternatively, you can toggle the overlay setting via the DevTools Rendering tab. Click the button in the top right to open it.

You can find the Core Web Vitals overlay option towards the bottom of the settings.

How to test Core Web Vitals with PageSpeed Insights

Google provides the free PageSpeed Insights (PSI) tool to test the performance of your website. You can find the Core Web Vitals in the PageSpeed Insights report.

Field data has been collected by Google from real users accessing your page. If your website doesn't get much traffic you might not get any data here, or see data aggregated across your entire website.

Lab data is collected in a lab environment when you run the PageSpeed Insights test. It uses a simulated mobile device to generate test data.

(Read this article to learn more about field vs lab data.)

Web Vitals in Google Search Console

You can also view information on Web Vitals in Google Search Console (formerly known as Webmaster Tools).

Select Enhancements and then Core Web Vitals from the sidebar to view how your website is doing.

You can click on the each issue that Google Search Console identified to see what page the issue occurred on.

How to continuously measure Core Web Vitals

You can use Google Search Console to keep track of how many good URLs and poor URLs are on your website

DebugBear can can test your website on a schedule and collect both in-depth lab data and Google's real-user metrics from the Chrome User Experience Report (CrUX).

You'll also get weekly reports plus instant alerts when there's a performance regression.

In addition to measuring site performance, DebugBear also keeps track of the SEO and Accessibility scores generated by Google's Lighthouse tool.

Want to optimize the speed of your website? Start tracking Core Web Vitals today.