Core Web Vitals: The Metrics, Measuring Them, and How to Optimize
13 min read
What Are Core Web Vitals (CWV)?
Core Web Vitals (CWV) are a set of specific factors that Google considers important in a webpage’s overall user experience. CWV are part of Google’s “Page Experience” signals used to gauge the quality of a user’s experience on a web page, which goes beyond just the speed at which the page loads.
Core Web Vitals focus on three dimensions of web usability:
Load time: This refers to the time it takes for a page to load its main content. Google uses Largest Contentful Paint (LCP) as a metric for this, focusing on how quickly the main content of a webpage loads and becomes visible to users.
Interactivity: This measures the time from when a user first interacts with your page (i.e., when they click a link, tap on a button) to the time the browser is able to respond to that interaction. First Input Delay (FID) is the metric used here, which is now being replaced by Interaction to Next Paint (INP).
Visual Stability: This metric ensures that pages do not exhibit unexpected movement of page content while the page is loading. Cumulative Layout Shift (CLS) is the metric for visual stability, measuring how often users experience unexpected layout shifts.
There are several reasons website owners should care about Core Web Vitals:
User experience: CWV metrics correlate with a fast, responsive, and stable website, which will make users happier. A positive user experience is critical to make any website a success.
Google ranks: Since 2021, CWV has been a ranking factor in Google’s search algorithm. This means that if your website performs poorly on these vitals, it could harm your visibility in the search engine results pages (SERPs). A lower ranking in the SERPs means less traffic to your site, and potentially, less business.
Impact on other website metrics: Improving CWV can have an indirect effect on other aspects of user engagement. For instance, a faster site can decrease your bounce rate and increase time-on-site, improve conversions, and contribute to overall user satisfaction.
The Core Web Vitals Metrics
Let’s explore each of these Core Web Vitals metrics. The following image from Google shows the top three metrics and their desired levels. Google recently introduced a fourth core metrics, INP, which is replacing FID.
Largest Contentful Paint (LCP) measures the time it takes for the largest content element on a page to load. This is important because it gives a user an indication of how long they’ll have to wait before they can start consuming the content on your site.
Ideally, your LCP should be under 2.5 seconds. Up to 4 seconds is considered acceptable but “needs improvement”). Anything longer than that could be a sign that your site is slow, and you risk frustrating your users and driving them away.
First Input Delay (FID)
First Input Delay (FID) measures the time it takes for a user to interact with your site after they’ve landed on it. This could be clicking a link, tapping a button, or using a custom, JavaScript-powered control.
A good FID is under 100 milliseconds. Up to 300 milliseconds is considered “needs improvement”. Anything longer than that, and your users might feel that your site is unresponsive.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) measures the visual stability of your site—it measures how much your page layout shifts or jumps around during the load time, making it difficult for a user to interact with it. A low CLS score means your site is stable; a high score means it’s not.
A good CLS score is less than 0.1, and up to 0.25 is considered as “needs improvement”. A score higher than indicates that layout shifts are seriously interfering with a user’s ability to interact with your site.
Interaction to Next Paint (INP)
Interaction to Next Paint (INP) is the latest addition to Google’s Core Web Vitals, designed to provide a more nuanced understanding of a website’s interactivity. It replaces the First Input Delay (FID) metric, addressing some of its limitations. INP measures the responsiveness of a webpage by quantifying the delay between a user’s interaction (like a click or key press) and the visual response or update to the page.
A good INP score reflects the responsiveness of a site during the full lifespan of a page visit, not just at the beginning. This metric considers all user interactions, ensuring that the entire user experience is smooth and responsive. For a good user experience, Google suggests an INP of less than 200 milliseconds. Scores between 200 and 500 milliseconds are considered as “need improvement”, while anything above 500 milliseconds may result in a poor user experience.
To optimize for INP, web developers should focus on reducing heavy JavaScript execution, optimizing resource loading, and ensuring that the main thread is not overly occupied.
Other Google Web Vitals
In addition to the three core metrics (four if you count INP), here are a few additional metrics that you can consider ‘optional’. They are not officially part of the Google algorithm, but are worth looking at to improve your website’s performance.
First Contentful Paint
The First Contentful Paint (FCP) measures the time that transpires from a user requests to a URL, until the time the browser renders the first piece of content. This could be anything from an image, a block of text, or even a canvas render. In essence, FCP measures how quickly users can see the content on your page.
A faster FCP generally results in a better user experience since users can start interacting with your content sooner. According to Google, an ideal FCP is under 1.8 seconds, while anything over 3 seconds is considered poor.
Time to Interactive
Time to Interactive (TTI) is a metric that measures the time it takes for a webpage to become fully interactive. A page is considered fully interactive when it is capable of responding instantly to user input, such as clicks or key presses. A shorter TTI translates to a better user experience since users can begin interacting with your site sooner.
Total Blocking Time
Total Blocking Time (TBT) is a metric that measures the total amount of time that a page is blocked from responding to user input, such as clicks or key presses, while it’s loading. This blockage occurs when the main thread of a browser is busy and can’t process user input. A lower TBT means that your webpage is more responsive and provides a better user experience.
Speed Index
The Speed Index (SI) is another performance metric used by Pagespeed Insights, Google’s free performance evaluation tool. It measures how quickly content is visually displayed during the loading of a page. Unlike FCP, which only considers the first piece of content, SI takes into account the entire visible content on the screen.
A lower Speed Index means that your website appears visually complete to a user faster, thus providing a better user experience. Factors that can affect your SI include the size and complexity of your site’s content, the number of requests it makes, and the speed of the user’s internet connection.
Page Performance Score
Google Pagespeed Insights is a free tool that provides a page score between 0-100. There is a different score for mobile and desktop (typically the mobile score will be lower, reflecting the fact that mobile devices have more limited bandwidth and computing resources).
The page performance score is computed based on a real-time measurement of FCP, LCP, TBT, CLS, and Speed Index by a Google crawler. A higher page performance score indicates that your webpage performed well at the time of the test.
Note: It’s important to realize that this is only a “lab measurement”, and not the real CWV score used by Google to evaluate a website. The real CWV scores are shown separately in Pagespeed Insights, under the label “Discover what your real users are experiencing”. These scores are measured over a period of 28 days (while the Page Performance Score is measured on demand when you run the report).
Core Web Vitals Lifecycle
Google has a structured methodology for introducing Core Web Vitals metrics, which consists of three stages: Experimental, Pending, and Stable.
Experimental
In the Experimental stage, Google tests new web vitals metrics to assess their effectiveness in measuring user experience. These tests are conducted using a variety of methods, such as lab testing and real-user monitoring.
During this stage, Google accepts feedback from web developers and the broader web community. This feedback helps Google refine the metrics and ensure they accurately measure user experience.
Pending
After the Experimental stage, the metrics move to the Pending stage. During this stage, Google continues to gather and analyze data, but the metrics are not yet used in the ranking algorithm.
The Pending stage is a transitional phase where Google fine-tunes the metrics based on the data collected and the feedback received. It’s also a time for web developers to familiarize themselves with the new metrics and start optimizing their websites accordingly.
Stable
Finally, the metrics reach the Stable stage, where they become a part of Google’s ranking algorithm. This means that they now directly impact a website’s ranking on the SERPs.
During the Stable stage, it’s crucial for web developers to monitor their websites’ performance using these metrics and optimize them to improve their ranking.
The INP metric we described above is an example of a metric that is being transitioned from the Pending to the Stable stage, at the time of this writing.
4 Ways to Measure Core Web Vitals
1. Chrome UX Report (CrUX)
The Chrome User Experience Report, commonly known as CrUX, is a public dataset provided by Google that allows you to measure how real-world Chrome users experience the web. It provides user experience metrics for how real-world Chrome users experience popular destinations on the web.
CrUX reports on a range of user experience metrics, including Core Web Vitals, offering a comprehensive picture of how your website performs in the real world. However, it’s important to note that CrUX data is only available for sites that have enough traffic to generate statistically significant samples.
How to use it: You can access the CruX Dashboard here.
2. Google Lighthouse
Google Lighthouse is another tool that allows you to measure your website’s Core Web Vitals. It’s an open-source, automated tool for improving the quality of web pages. With it, you can run audits for performance, accessibility, progressive web apps, and more.
Lighthouse collects and analyzes lab data which can help you identify and fix performance issues even before your users experience them. If you’re looking to improve your website’s Core Web Vitals, Lighthouse can provide actionable recommendations tailored to your site.
How to use it: Lighthouse is built into Chrome DevTools and is also available as a command line interface (CLI), Node.js module, or web-based UI. Learn more here.
3. Google PageSpeed Insights
PageSpeed Insights is a free web-based tool offered by Google that provides both lab and field data about a page’s performance. It fetches and analyzes a URL twice, once with a mobile user-agent, and once with a desktop user-agent. Field data is shown at the top, based on data from real Chrome browsers visiting your site (as shown in the screenshot below). Lab data is shown further down, with data from an on-demand crawl performed on your site.
PageSpeed Insights provides a wealth of information about your website’s performance, including its Core Web Vitals scores. The tool also offers suggestions on how you might improve your website’s performance, prioritized by their potential impact.
Google Search Console is another free tool provided by Google that helps you understand and improve how Google sees your website. One of the features of Search Console is the Core Web Vitals report, which shows you how your pages perform based on real-world usage data (also known as field data).
The Core Web Vitals report in Google Search Console helps you identify groups of pages across your site that require attention, based on real-world field data. This tool is particularly useful to track performance improvement over time.
How to use it: Access Google Search Console here, set it up for your website, then select Core Web Vitals from the left-hand navigation bar.
How to Improve Core Web Vitals
Improving Core Web Vitals is not just about enhancing user experience but also boosting your website’s SEO rankings, since Google has made it clear that CWV is a ranking factor in its search algorithm.
Improving LCP (Largest Contentful Paint)
Largest Contentful Paint (LCP) measures the time it takes for the largest content element on your page to load. Here are some strategies to improve LCP:
Prioritize Loading of Resources
Your website’s resources include images, JavaScript, CSS, and more. Prioritizing the loading of these resources can significantly improve your LCP score. To do this, you can use the preload resource hint. This tells the browser to start downloading a resource as soon as possible.
Make Files Smaller
Making your files smaller will help them load faster, which improves LCP. You can achieve this by compressing your files, removing unused code, and minifying CSS and JavaScript.
Serve Files Closer to Users
The physical distance between your server and your users can impact load times. To serve files closer to your users, use a Content Delivery Network (CDN). A CDN works by storing copies of your website on servers around the world.
Host Resources on the Same Server
Hosting all your resources on the same server reduces the number of HTTP requests needed to load a page, which can improve LCP. If you can’t host all resources on the same server, at least try to host critical resources there.
Use Caching
Caching can significantly improve load times by storing a copy of your website’s resources in the user’s browser. When the user revisits your site, the browser can load the cached resources instead of downloading them again.
Improving CLS (Cumulative Layout Shift)
Cumulative Layout Shift (CLS) measures the visual stability of a webpage. It quantifies how much elements on the page shift during load. Here’s how you can improve your CLS score:
Reserve Space for Images, Videos, Iframes
Reserving space for your images, videos, and iframes avoids layout shifts. You can do this by specifying the height and width attributes in your HTML.
Optimize Fonts
Flash of Unstyled Text (FOUT) or Flash of Invisible Text (FOIT) can cause layout shifts. To prevent this, you can preload your fonts, use font-display: optional, or host fonts locally.
Use Animations That Don’t Trigger Layout Changes
Animations can cause layout shifts if not handled correctly. To avoid this, make sure your animations don’t affect elements outside the animated component.
Make Sure Your Pages are Eligible for BFCache
The Back/Forward Cache (BFCache) allows instant navigation when users click the back or forward button. To make your pages eligible for BFCache, avoid using unload event listeners and ensure your pages work correctly when shown from the BFCache.
Improving FID (First Input Delay)
First Input Delay (FID) measures the time from when a user first interacts with a page to the time the browser begins processing event handlers in response to that interaction. Here’s how you can improve your FID score:
Reduce the Amount of JavaScript
Reducing the amount of JavaScript that needs to be loaded and parsed on your site can significantly improve FID. This means removing unused code and only loading the JavaScript needed for the initial page view.
Load JavaScript Later if Possible
You can improve FID by deferring non-critical JavaScript until after the first paint. This gives the browser less work to do up-front and allows it to respond more quickly to user interactions.
Break up Long Tasks
Long tasks are JavaScript tasks that block the main thread for long periods, causing poor responsiveness. To improve FID, break up long tasks into smaller, asynchronous tasks.
Use Web Workers
Web workers allow you to run JavaScript on a background thread, freeing up the main thread to respond to user interactions. This can significantly improve FID.
Use Prerendering or Server-Side Rendering (SSR)
Prerendering and server-side rendering can improve FID by generating HTML on the server and sending it to the client. This reduces the amount of JavaScript that the client needs to parse and execute before the page becomes interactive.
Improving Core Web Vitals with Coralogix
Coralogix’s robust RUM features will help you ensure that your customer experience is exceptionally delightful. Learn more about our Core Web Vitals module here.
Where Modern Observability and Financial Savvy Meet.
Oh no!We didn’t find anything for “”,
