Introduction to Core Web Vitals

Google Web Vitals are experience metrics that measure how well a site performs and how well it provides a user experience. Google plans to release Core Web Vitals, a user experience metric that focuses on loading speed, interactivity, and visual stability, in June 2021. Cumulative Layout Shift (CLS), First Input Delay (FID), Largest Contentful Paint (LCP), Interaction To Next Paint (INP), and Time to First Byte are the Core Web Vitals (TTFB).

Core Web Vitals are significant because they are a standardised set of metrics and benchmarks used across many Google services and have a direct impact on search rankings. By measuring and optimising your site for Core Web Vitals, you improve your site's overall user experience.

CLS

CLS assesses the visual stability of content on a page by adding the sum of all individual layout shift scores for each unexpected layout shift that occurs during the page's lifetime. A layout shift occurs when an element's starting position changes as a result of resources loading later in a page's lifecycle and pushing content below it down the page. For example, if a user is online shopping and tries to click the add to cart button, an ad appears above the button and pushes it down. Because of this layout change, the user accidentally clicks the ad rather than the add to cart button. A low CLS can help ensure that your users have a positive experience on your site and can complete their tasks quickly.

FID

The delay in interactivity and responsiveness is measured by FID. This is the amount of time that elapses between when a user interacts with your content by clicking a link, tapping a button, or pressing a key and when the browser processes that interaction. FID only counts the delay, not the time it takes to process the event or update the UI. A delay occurs when the browser is busy loading the rest of the page content and cannot respond to the user's interaction. A short FID can help increase the likelihood that the user will stay on your page and interact with your content. Most websites currently perform well in FID measurement.

It should be noted that zooming and scrolling are not measured for FID.

LCP

LCP measures the time it takes for the page's largest visible element to load in comparison to when the page first began loading. The LCP can change as different elements load. When the user interacts with the page, the browser stops measuring LCP because interactions typically change what the user sees. A fast load speed can reassure the user that the page is useful because they can begin viewing content quickly.

Elements that may serve as the LCP:



• <img>
• <image> inside an <svg>
• <video>
• Instead of a CSS gradient, this element has a background image loaded via the url() function.
• Children of block-level elements that contain text nodes or other inline-level text elements

As Google expands their Core Web Vitals, they have indicated that svg> and video> may be added as future LCP measurement elements.

INP

INP refers to how a page responds to specific user interactions that have been programmed into the overall INP metric as measured by Google Chrome's lab and field data. INP is intended to provide a representation of a page's overall interaction delay. It accomplishes this by using a sample of the single longest interactions that occur when a user visits the page. For instance, if a page has fewer than 50 total interactions, INP considers the interaction with the absolute worst delay. INP is a measurement that represents how long it takes a user to interact with the entire page. This is in stark contrast to FID (First Input Delay).

INP is interested in the following interactions:

• Any interactive element mouse click.
• Any interaction with an interactive element on any device with a touchscreen.
• A key press on a physical or onscreen keyboard.

According to Google's web.dev documentation, a good INP value is around 200 milliseconds or less.

INP is still in its early stages, and the recommendations it makes for this metric are subject to change.

TTFB

The time it takes for the server to transfer the first byte is measured by TTFB.

TTFB has long been suspected of being a driver of significant performance gains, which means that SEO professionals should prioritise optimising it as part of their SEO process.

How to Measure Core Web Vitals

Core Web Vitals can be measured using lab or field data. Data from tools that simulate a page load and interaction are collected in the lab. Field data is derived from real-world user interactions with your website. To optimise your site more accurately, we recommend that you use real-world metrics such as Real User Monitoring (RUM) rather than lab tests. Google's CRuX data set, which is what Google uses to measure Core Web Vitals, can be used to measure your website.

CLS and LCP can both be measured in the lab and in the field. Because a real user must interact with the content, FID can only be measured in the field. We strongly advise you to test each page of your website.

Core Web Vitals can be measured using the following tools:

Field Tools

• (Recommended) Chrome User Experience Report
• PageSpeed Insights
• Search Console (Core Web Vitals report)
• Web-vitals JavaScript library

Lab Tools

• Chrome DevTools
• Lighthouse
• WebPageTest

Lighthouse and Core Web Vitals Comparison can help you learn more about the differences between the two.

Ideal Scores

To be considered passing, a page on your website must meet all of 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

Only 20% of websites currently pass all three metrics. See Optimize Your Site for Core Web Vitals for information on how to do so.