Introduction to Core Web Vitals

Modified on Thu, 17 Nov, 2022 at 5:24 AM

Google’s Web Vitals are experience metrics that measure how well a site is performing and how good of a user experience it provides. In June 2021, Google plans to release an improvement to their user experience metrics called Core Web Vitals that focus on loading speed, interactivity, and visual stability. These Core Web Vitals are: Cumulative Layout Shift (CLS), First Input Delay (FID), Largest Contentful Paint (LCP), Interaction To Next Paint (INP), and Time to First Byte (TTFB).

Core Web Vitals are important because they are a common set of metrics and benchmarks that are used across many Google services and have a direct impact on search rankings. By measuring and optimizing your site for Core Web Vitals you also improve the overall user experience of your site.

CLS

CLS measures the visual stability of the content on a page by counting the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. A layout shift happens when an element changes from its starting position due to resources loading later in a page's lifecycle and pushing content below it down the page. For example, a user is online shopping and right as they try to click the add to cart button an ad loads above the button and pushes it down. This layout shift causes the user to accidentally click the ad instead of the add to cart button. A low CLS can help ensure your users have a positive experience on your site and can quickly accomplish what they came to do.

FID

FID measures the delay in interactivity and responsiveness. This is the time from when the user interacts with your content by clicking a link, tapping a button, or pressing a key to when the browser processes that interaction. FID only counts the delay, not the time it takes to process the event or how long it takes the UI to update. A delay typically happens because the browser is busy loading the rest of the page content and cannot respond to the user’s interaction yet. A short FID can help increase the chance that the user remains on the page and interacts with your content. Currently, most websites perform well on FID measurement.

Note

Zooming and scrolling are not measured for FID.

LCP

LCP measures the time it takes for the largest visible element on the page to load relative to when the page first started loading. As different elements load, the LCP can change. The browser stops measuring LCP when the user begins interacting with the page, since interactions typically change what is visible to the user. A fast load speed can reassure the user that the page is useful because they are able to quickly begin viewing content.

Elements that can be the LCP:

<img>
<image> inside an <svg>
<video>
Element with a background image loaded using the url() function instead of a CSS gradient
Block-level elements that contain text nodes or other inline-level text elements children

Note

As Google expands their Core Web Vitals, they have indicated <svg> and <video> might be included as elements used to measure LCP in the future.

INP

INP refers to how the page responds to specific user interactions that are programmed into the overall INP metric measured by Google Chrome’s lab data and field data. INP is designed to provide a representation of the overall interaction delay of a page. It does this by working from a sample of the single longest interactions that happen when a user visits the page. For example, if a page has less than 50 total interactions, INP takes into consideration the interaction that has the absolute worst delay. The measurement of INP is a representation of how long a user has to wait in order to interact with the entire page. This is a direct contrast to FID (First Input Delay).

INP is concerned with the following types of interactions:

Any mouse click of an interactive element.
Any tap of an interactive element on any device that includes a touchscreen.
The press of a key on a physical or onscreen keyboard.

Google’s web.dev documentation explains that a good INP value is around 200 milliseconds or less.

Note

INP is still experimental and the guidance it recommends regarding this metric is likely to change.

TTFB

TTFB measures the length of time that it takes for the first byte to be transferred by the server.

TTFB has long been suspected as a driver of significant performance gains, which means that it’s a priority that SEO professionals should be optimizing as part of their SEO process.

How to Measure Core Web Vitals

When measuring Core Web Vitals you can use lab or field data. Lab data is gathered from tools that simulate a page load and interaction. Field data is gathered from real user’s interaction with your website. We recommend that you use real-world metrics such as Real User Monitoring (RUM) instead of lab tests so that you can optimize your site more accurately. Google’s CRuX data set can be used to measure your website and is a great choice because it is what Google uses to measure Core Web Vitals.

Both CLS and LCP can be measured in the lab or in the field. FID can only be measured in the field because a real user needs to interact with the content. We strongly recommend you test every page on your website.

The following tools can be used to measure Core Web Vitals:

Field Tools

Lab Tools

Note

To learn more about the differences between Lighthouse and Core Web Vitals, see Lighthouse and Core Web Vitals Comparison.

Ideal Scores

For a page on your website to be considered passing it needs to achieve all the following metrics at the 75th percentile:

CLS. 0.1 layout shift score or less
FID. 0.1 seconds or less
LCP. 2.5 seconds or less

Currently, only 20% of websites pass all three metrics. To learn how to optimize your website, see Optimize Your Site for Core Web Vitals.