Core Web Vitals are Google's three measurements of how a page feels to use: how fast the main content appears, how quickly it responds to input, and whether it jumps around while loading. They are part of Google's page experience signals. They will not rescue weak content, but poor scores on a competitive query can cost you.
The three metrics and their thresholds
| Metric | Measures | Good | Poor |
|---|---|---|---|
| LCP, Largest Contentful Paint | How long until the main content is visible | 2.5 s or less | over 4 s |
| INP, Interaction to Next Paint | How quickly the page reacts to taps and clicks | 200 ms or less | over 500 ms |
| CLS, Cumulative Layout Shift | How much the layout moves unexpectedly | 0.1 or less | over 0.25 |
Anything between "good" and "poor" is "needs improvement". INP replaced the older First Input Delay (FID) metric in March 2024.
A page passes only if all three are in the good range, judged at the 75th percentile of real visits. That means three out of four visits must be good, not the average one.
Lab data and real-user data are different
This is the most misunderstood part.
- Lab data (Lighthouse, PageSpeed Insights' test) loads your page once on a simulated device and network. It is repeatable and great for debugging.
- Field data (the Chrome UX Report, or CrUX) comes from real Chrome users over the previous 28 days. This is what Google uses for ranking.
You can score 100 in a lab test and still fail in the field, because real visitors have slower phones and flaky networks. Small or new sites may have no field data at all.
curl seoloop.in/cwv/example.com
curl seoloop.in/lighthouse/example.comThe first command returns real-user LCP, INP and CLS where Google has the data. The second runs a lab test.
Fixing LCP
The LCP element is usually a hero image or a big heading. What usually helps:
- Slow server response. If the first byte takes a second, nothing else can be fast. Check TTFB first.
- Heavy hero image. Serve modern formats (WebP or AVIF) at the displayed size.
- Do not lazy-load the hero. Lazy loading the largest image delays it. Lazy-load only images below the fold.
- Render-blocking CSS and fonts. Inline critical CSS and preload the key font.
Fixing INP
INP is mostly a JavaScript problem. The page is busy when the user taps, so the response waits.
- Break up long tasks so the browser can respond between them.
- Remove or delay third-party scripts such as chat widgets and trackers.
- Avoid doing heavy work inside click handlers.
Fixing CLS
Layout shifts come from things that load without reserving space.
- Put
widthandheightattributes on images and videos. - Reserve room for ads, banners and embeds.
- Use
font-display: swapwith a similar fallback font so text does not jump when the web font arrives. - Insert new content below existing content, not above it.
Where to start
Measure first. Pick the metric that fails in field data, fix the biggest cause for it, and test again. Chasing a perfect lab score on a metric that is already good in the field is wasted effort.