Sign in

Core Web Vitals

Updated: 4 min read SEOFuxx editorial team

The Core Web Vitals are three Google metrics for the user experience of a page: Largest Contentful Paint (LCP, load time until the main content), Interaction to Next Paint (INP, response time to input) and Cumulative Layout Shift (CLS, visual stability). Google's ranking systems take them into account, but the relevance of the content counts for more.

The three metrics

MetricMeasuresGoodNeeds improvementPoor
LCPHow long the largest visible element (usually an image or text block) takes to renderup to 2.5 s2.5 to 4 sover 4 s
INPHow quickly the page shows the next frame after clicks, taps and key presses (the worst typical value across the whole visit)up to 200 ms200 to 500 msover 500 ms
CLSHow much visible content shifts while loadingup to 0.10.1 to 0.25over 0.25

In March 2024 INP replaced First Input Delay (FID) as a Core Web Vital. FID only measured the delay of the first input, INP takes all interactions of a visit into account.

Field and lab data

Field data counts for the assessment: measurements from real visitors that Chrome collects in the Chrome User Experience Report (CrUX). What matters is the value that 75 percent of page views reach or beat, separately for mobile and desktop. The data covers the last 28 days, so an improvement only becomes visible gradually.

Lab data comes from a test run under fixed conditions, for example with Lighthouse. It is suited to finding causes and checking changes immediately, but does not replace field data. INP does not exist in the lab; Total Blocking Time serves as an approximation there.

How much they influence the ranking

Google writes that its ranking systems take the Core Web Vitals into account, and recommends good values. There is no single page experience signal, though, and search always shows the most relevant content first, even if the page experience is mediocre. A fast page therefore does not overtake a more fitting one in terms of content, but can help decide between comparable results. Good values do not guarantee top positions. Regardless of ranking, fast, stable pages are more pleasant for visitors, because they do not have to wait.

Improving LCP

  • Reduce the server response time (caching, faster hosting, a CDN)
  • Have the LCP element load early: an image in the right size and a modern format, with fetchpriority="high" or a preload
  • Do not delay the LCP image with lazy loading
  • Reduce blocking CSS and JavaScript in the head of the page

Improving INP

  • Break long tasks on the main thread into small pieces
  • Ship less JavaScript and remove scripts you do not need
  • Load third-party scripts (tracking, chat, ads) with a delay
  • Keep the number of DOM elements small, because large pages slow down every change

Improving CLS

  • Give images, videos and embeds fixed dimensions (width and height)
  • Reserve space for ads, banners and content loaded later
  • Load fonts so the text does not jump when they swap (font-display, preload important fonts)
  • Do not insert content above content that is already visible

Measuring

  • PageSpeed Insights: shows field data from CrUX and lab data for a single address
  • Search Console: the "Core Web Vitals" report groups similar pages across the whole website and separates mobile and desktop (see Google Search Console)
  • Chrome DevTools and Lighthouse: for cause analysis in the lab
  • web-vitals library: measures the values for your real visitors and sends them to your analytics tool

Common mistakes

  • Testing only in the lab: A good Lighthouse value says little if real visitors arrive with weaker devices and slow networks.
  • Optimizing for the score: The Lighthouse performance score is not a Core Web Vital. LCP, INP and CLS are what matter.
  • Checking only desktop: Assessment is separate, and mobile values are usually worse (see mobile-first indexing).
  • Judging too early: Because of the 28 days it takes a while until field data shows a change.
  • Delaying the LCP image: Lazy loading is meant for images below the visible area, not for the largest image at the top of the page.

Sources

Is this content helpful?

·