Core Web Vitals definition
Core Web Vitals are three metrics Google uses to measure real-world user experience on a web page: Largest Contentful Paint (LCP) for loading speed, Interaction to Next Paint (INP) for responsiveness and Cumulative Layout Shift (CLS) for visual stability. They are measured from real Chrome users and feed into Google's page experience signals.
The three Core Web Vitals
Each metric has a "good" threshold, and a page passes when at least 75 percent of real visits meet it, measured separately for mobile and desktop. Interaction to Next Paint replaced First Input Delay as the responsiveness metric in March 2024, because it measures every interaction on a page rather than only the first one.
- Largest Contentful Paint (LCP): time until the largest image or text block renders. Good is 2.5 seconds or less.
- Interaction to Next Paint (INP): delay between a click, tap or key press and the next visual update. Good is 200 milliseconds or less.
- Cumulative Layout Shift (CLS): how much visible content jumps around unexpectedly. Good is 0.1 or less.
Field data vs lab data
Google judges pages on field data from the Chrome User Experience Report, a rolling 28-day sample of real visits. Lab tools such as Lighthouse simulate a single load on a set device and network, which is ideal for debugging but can differ widely from what real users experience. PageSpeed Insights shows both, and Google Search Console groups URLs that share problems.
For ongoing monitoring, add real-user monitoring with the open-source web-vitals JavaScript library or a RUM service. Field data from your own users shows which templates, devices and countries struggle, and confirms whether a fix actually helped once it has been deployed.
How to improve LCP and CLS
LCP is usually a hero image or headline. Serve HTML quickly from a CDN, render the main content on the server instead of waiting for JavaScript, preload the hero image with high fetch priority, never lazy-load it, and use modern formats such as AVIF or WebP at the right size. Remove render-blocking CSS and scripts that delay the first paint.
CLS comes from content that loads without reserved space. Give images and videos width and height attributes or a CSS aspect ratio, reserve slots for ads, embeds and cookie banners, load web fonts with fallbacks matched in size, and animate with transforms rather than properties that change layout.
How to improve INP
Poor INP almost always means the main thread is busy when the user interacts. Long JavaScript tasks from hydration, analytics, tag managers, chat widgets and heavy event handlers block the browser from painting a response. Break long tasks into smaller chunks, defer or remove third-party scripts, keep DOM updates small, use features such as React's transitions for non-urgent updates and move heavy computation into web workers.
Worked example: a retailer's product listing page shows INP problems on mid-range Android phones. Profiling reveals a filter click re-renders 400 product cards and runs three tracking scripts. Rendering only the visible cards and sending analytics after the next paint brings interactions back within the good threshold without removing any features.
Do Core Web Vitals affect SEO?
They are part of Google's ranking systems, but relevance and content quality matter far more. Good vitals act more like a tiebreaker between similar pages than a way to outrank better content. Their bigger value is commercial: faster, steadier pages keep visitors engaged and complete more purchases and sign-ups. Nexzem includes Core Web Vitals budgets in every website build and checks them with real-user data after launch.