What Are Core Web Vitals?

Core Web Vitals (CWV) are a subset of Google's broader Web Vitals initiative — a unified set of signals designed to quantify how real users experience a page. Google introduced them in 2020 and confirmed them as a search ranking factor as part of the Page Experience update in 2021.

The three current Core Web Vitals are:

  • LCP — Largest Contentful Paint (loading performance)
  • INP — Interaction to Next Paint (interactivity, replaced FID in March 2024)
  • CLS — Cumulative Layout Shift (visual stability)

Each metric has three rating bands — Good, Needs Improvement, and Poor — and Google aims for at least 75% of page visits to fall in the "Good" band before awarding a positive signal. You can read the full technical definitions in Google's Web Vitals documentation.

Key point: Core Web Vitals are measured using field data — real user measurements collected in Chrome — not just synthetic lab tests. A page can look fast in Lighthouse but still fail CWV if real users on slow connections experience delays.

Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest visible content element in the viewport to render from when the page first starts loading. That element is typically a hero image, a large heading, or a video poster frame.

LCP Thresholds

RatingLCP Value
Good≤ 2.5 seconds
Needs Improvement2.5 s – 4.0 s
Poor> 4.0 seconds

Common LCP Causes

  • Slow server response times (high TTFB)
  • Render-blocking JavaScript and CSS
  • Unoptimised hero images (large file size, wrong format)
  • Client-side rendering frameworks that delay content paint

The fastest fix is almost always to optimise the LCP image: compress it, convert it to WebP or AVIF, add fetchpriority="high" to the <img> tag, and serve it from a CDN. Compressing your images is something you can do right now with a free image compression tool.

Interaction to Next Paint (INP)

INP replaced First Input Delay (FID) as an official Core Web Vital in March 2024. While FID only measured the delay before the browser could process the first user interaction, INP evaluates all interactions (clicks, taps, keyboard events) throughout the entire page lifecycle and reports the worst-case latency.

INP Thresholds

RatingINP Value
Good≤ 200 ms
Needs Improvement200 ms – 500 ms
Poor> 500 ms

Fixing Poor INP

High INP is almost always caused by long tasks on the main thread. JavaScript execution blocks the browser from responding to input. Strategies to improve INP include:

  • Breaking up long tasks with setTimeout or the Scheduler API
  • Deferring non-critical JavaScript
  • Moving heavy work to Web Workers
  • Removing unused third-party scripts (chat widgets, analytics, ad SDKs)

Cumulative Layout Shift (CLS)

CLS measures the unexpected movement of visible page elements during the loading phase. When an image loads without explicit dimensions and pushes text down, or when an ad banner appears and shifts the entire layout, that counts as a layout shift. CLS is a unitless score — a sum of impact fraction × distance fraction for each individual shift event.

CLS Thresholds

RatingCLS Score
Good≤ 0.1
Needs Improvement0.1 – 0.25
Poor> 0.25

Common CLS Culprits

  • Images without explicit width and height attributes
  • Ads, embeds, or iframes with no reserved space
  • Dynamically injected content above existing content
  • Web fonts causing FOIT/FOUT (Flash of Invisible/Unstyled Text)
  • CSS animations that trigger layout properties (width, top, margin)
Quick CLS fix: Always add explicit width and height attributes to every <img> tag. Modern browsers use these to calculate the correct aspect-ratio box before the image loads, completely eliminating layout shift for that element.

How to Pass Core Web Vitals

Passing Core Web Vitals means getting 75% of your real-user page visits into the "Good" band for all three metrics. Here is a prioritised action list:

LCP Improvements

  1. Add fetchpriority="high" and loading="eager" to your LCP image.
  2. Preload the LCP image using <link rel="preload"> in the <head>.
  3. Convert images to WebP or AVIF — typically 25–50% smaller than JPEG.
  4. Serve assets from a CDN close to your users.
  5. Reduce server response time: aim for a TTFB under 800 ms.
  6. Eliminate render-blocking resources by deferring or inlining critical CSS.

INP Improvements

  1. Audit your JavaScript with Chrome DevTools Performance panel.
  2. Remove or defer third-party scripts that are not critical to the page.
  3. Use requestIdleCallback to run analytics and tracking code when the browser is idle.
  4. Implement code-splitting so users only download JavaScript they need.

CLS Improvements

  1. Set explicit dimensions on all images, videos, and iframes.
  2. Reserve space for ads and embeds using CSS aspect-ratio or min-height.
  3. Use font-display: optional or font-display: swap to manage web font loading.
  4. Avoid inserting content above existing content unless in response to a direct user action.

Tools to Measure and Monitor

You cannot improve what you do not measure. Use these authoritative tools to get both lab and field data:

  • Google Search Console — The Core Web Vitals report shows field data segmented by URL group. This is the most important report because it reflects actual user experience.
  • PageSpeed Insights — Combines CrUX field data with a Lighthouse lab audit. Gives actionable recommendations.
  • Chrome DevTools Lighthouse — Excellent for development-time testing. Run it in an incognito window to avoid extension interference.
  • WebPageTest — Advanced filmstrip view, waterfall charts, and multi-location testing. Ideal for diagnosing specific bottlenecks.
  • Chrome UX Report (CrUX) — Raw field data available via BigQuery and the CrUX API. Useful for large-scale monitoring across thousands of pages.

For a broader look at technical SEO factors alongside performance, see our Technical SEO Checklist 2026.