This article explains what the Core Web Vitals are, how you can measure and optimize them, and how they impact SEO and user experience.
What are the three Core Web Vitals metrics?
The three Core Web Vitals are:
- Largest Contentful Paint: how quickly does the main page content render
- Interaction to Next Paint: how quickly does the page respond to user input
- Cumulative Layout Shift: how stable is the page layout, does content move around after rendering?
From March 2024 the older First Input Delay metric will be replaced by Interaction to Next Paint.
Google has defined thresholds for each of these user experience metrics to rate them as "Good", "Needs Improvement", or "Poor".
Test Core Web Vitals on your website
The free Core Web Vitals testing tool can show you how fast your website is for real users and what you can improve.
Open the Web Vitals tab after running the test to get an in-depth analysis. This will show you the real-user data Google CrUX data as well as a result from an on-demand test.
The result also shows a 25-week trendline for real user data.
Largest Contentful Paint (LCP)
The process of loading a website always starts with a blank page. Then gradually content starts to appear on the screen. The point where content becomes visible is called a paint.
Different paint timing milestones 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.
This filmstrip timeline shows how more and more content is rendered by the browser as it becomes available.
Load time milestones like this have been used as page speed metrics for a long time. Early on the Load Event was used to assess whether a page had loaded. However, the load event has no direct relationship to visual content appearing for the user, so new metrics like FCP and LCP were introduced over time to better reflect the user experience.
The Largest Contentful Paint tries to identify the single largest content element on the page and measures when it appears. A content element could be a piece of text, an image, or the first frame of a video.
For a good user experience, the Largest Contentful Paint should happen no more than 2.5s after the user starts navigating to the page.
To optimize the Largest Contentful Paint you can:
- Reduce server response time
- Remove render-blocking resources
- Optimize your images and size them appropriately
- Prioritize the LCP image with the
fetchpriorityattribute and lazy load less important images to reduce bandwidth competition
- Preload the main page image
Interaction to Next Paint (INP)
Interaction to Next Paint measures how quickly a page responds to user interactions.
For example, when a user clicks a button it might take half a second to process the event and update the user interface. In this case the INP score would be 500 milliseconds.
Interaction to Next Paint will become a Google Core Web Vitals metric in March 2024.
To optimize INP you can:
- Measure key user interactions in Chrome DevTools to understand how CPU processing time is spent
- Use DebugBear real user monitoring to identify what interactions result in slow UI updates
- Minimize overall CPU time and blocking tasks that can delay event processing (measured by the Total Blocking Time metric)
First Input Delay (FID)
First Input Delay is an older performance metric that is being replaced by Interaction to Next Paint. It has two key 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 new Interaction to Next Paint metric was created to address both of these issues.
Ideally, the First Input Delay should be under 100ms.
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.
Only unexpected layout shifts count toward the CLS score. If content moves around after a user interaction like a click then this does not increase CLS.
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
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
- Using Chrome DevTools
Testing Core Web Vitals with DebugBear
The DebugBear Web Vitals Test gives you an overall assessment of your Core Web Vitals as well as specific recommendations to optimize them.
In addition to the free test, you can also sign up for a free trial to monitor page speed over time and track real user Core Web Vitals on your website.
The real user monitoring feature shows you how fast different pages on your website are, and whether visitors from different places across the world experience it differently.
You can also see details like:
- What are the most common LCP elements on a page?
- What page elements are most likely to result in slow interactions?
- Debug data for individual user experiences
Core Web Vitals data on PageSpeed Insights
Google provides the free PageSpeed Insights (PSI) tool to test the performance of your website. It reports two types of data:
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 Lighthouse lab environment when you run the PageSpeed Insights test. It uses a simulated mobile device to generate test data. This is what you see under the diagnose performance issues heading.
Note that the Lighthouse Performance score does not directly impact rankings and should only be used as a high-level indicator.
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 get a slow server response time that suggests backend code on your server is slow and might be holding back the Largest Contentful Paint.
Easily view web vitals data with a Chrome extension
The Site Speed extension for Google Chrome shows you the Core Web Vitals for the page you're currently on.
Check site-wide Core Web Vitals performance 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.
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
P, type web vitals overlay, and press Enter.
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.
Understand the impact of Core Web Vitals
Poor user experience not only matters for your users but it's also one of Google's ranking signals. Learn how Core Web Vitals impact SEO performance and what data Google looks at.
How do Core Web Vitals impact SEO?
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.
We've covered what you can do about a failed Core Web Vitals assessment in more depth in another article.
Continuously measure Core Web Vitals
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.