Core Web Vitals Explained: LCP, INP and CLS

Core Web Vitals are three measurements Google uses to describe how a page feels to a real visitor: how fast the main content appears, how quickly the page responds when you interact with it, and whether the layout jumps around while it loads.

This guide explains each metric, the thresholds Google uses, where the numbers come from and what usually fixes them.

The three metrics

Metric	What it measures	Good	Needs improvement	Poor
Largest Contentful Paint (LCP)	Loading: when the largest image or text block becomes visible	2.5 s or less	up to 4 s	over 4 s
Interaction to Next Paint (INP)	Responsiveness: how quickly the page reacts to clicks, taps and key presses	200 ms or less	up to 500 ms	over 500 ms
Cumulative Layout Shift (CLS)	Visual stability: how much visible content moves unexpectedly	0.1 or less	up to 0.25	over 0.25

INP replaced First Input Delay (FID) as a Core Web Vital in March 2024. FID only measured the delay before the first interaction was handled; INP looks at the responsiveness of interactions throughout the visit.

A page passes the Core Web Vitals assessment when all three metrics are "good" at the 75th percentile of real page loads, measured separately for mobile and desktop. In other words, at least three out of four visits need a good experience.

Field data and lab data

There are two kinds of numbers, and it helps to know which one you are looking at.

Field data (real users)

Field data comes from the Chrome User Experience Report (CrUX): anonymised measurements from real Chrome users who visited the page, over the previous 28 days. This is what the Core Web Vitals assessment is based on.

Field data is only available for pages and sites with enough Chrome traffic. A new or small site may have none, in which case PageSpeed Insights may fall back to origin-level data for the whole site, or show no field data at all.

Lab data (a simulated test)

Lab data comes from Lighthouse, which loads the page once in a controlled environment that simulates a device and a network. It produces the familiar 0 to 100 scores for performance, accessibility, best practices and SEO. The score bands are 90 to 100 good, 50 to 89 needs improvement and 0 to 49 poor.

Lab tests are always available and are great for debugging, but a single run can vary, and a lab test cannot measure INP because nobody interacts with the page. Use the lab score to find problems and field data to confirm that real visitors benefit.

Why mobile scores are lower

Mobile tests simulate a slower processor and a slower network than desktop tests. The same page almost always scores lower on mobile, and mobile is where most visitors see your site, so start there.

How to improve LCP

The largest element is usually a hero image, a large heading or a video poster. To make it appear sooner:

• Make the server respond quickly. A slow time to first byte delays everything else. Caching and a nearby host help.
• Do not lazy-load the LCP image, and consider giving it a high fetch priority so the browser downloads it first.
• Serve the right size and format. A modern format such as WebP or AVIF at the size it is displayed is much smaller than a full-size JPEG or PNG.
• Remove render-blocking resources. Large CSS and synchronous JavaScript in the head delay the first paint.
• Avoid rendering the main content only after JavaScript runs. Content in the initial HTML can be painted much earlier.

How to improve INP

INP is about the main thread being free when someone interacts:

• Ship less JavaScript. Remove unused libraries, third-party widgets and tags you no longer need.
• Break up long tasks. Work that blocks the main thread for hundreds of milliseconds delays every click that happens during it.
• Keep event handlers light. Show visual feedback first and do heavy work afterwards.
• Avoid large, repeated layout work after an interaction, such as re-rendering a long list.

How to improve CLS

Layout shifts happen when something appears or changes size after the content around it has been drawn:

• Set width and height (or an aspect ratio) on images and videos so the browser reserves the space.
• Reserve space for ads, embeds and banners instead of letting them push content down.
• Do not insert content above existing content unless the user asked for it, for example with a cookie bar that overlays rather than pushes.
• Load web fonts carefully, with a fallback font of similar size, so text does not reflow when the font arrives.

How much do Core Web Vitals matter for SEO?

Core Web Vitals are part of the page experience signals Google uses in ranking, but Google has been clear that relevance and content quality come first: a fast page does not outrank a much more useful one. Think of good Core Web Vitals as removing a disadvantage and, above all, as a better experience for the people who visit your site.

Tracking Core Web Vitals over time

A single test is a snapshot. To see whether a change helped, test the same pages after each release and compare. PageSpeed and Core Web Vitals in SEO Tracker Pro runs Google PageSpeed Insights for mobile and desktop and keeps every run, with the four Lighthouse scores, field data from the Chrome UX Report when it exists, and the top opportunities. Tests never use credits; every plan includes a monthly number of tests, and Pro and Agency can schedule them.

Speed is one part of technical health. For the rest, see how to do a website SEO audit or run a website audit.