Web development
Core Web Vitals: what they are, which thresholds to meet, how to improve them
Definitions of LCP, INP and CLS, the thresholds Google publishes for each, how to measure them for free, and what to do when your site misses them.
Short answer
Core Web Vitals are three metrics Google uses to measure a page's loading experience: LCP (perceived load speed) under 2.5 seconds, INP (responsiveness) under 200 milliseconds, and CLS (visual stability) under 0.1. You can measure them free with PageSpeed Insights.
Almost every conversation about web speed ends at these three acronyms. It is worth knowing what each measures, because they are fixed in different ways.
The three metrics
LCP — Largest Contentful Paint. How long the largest visible element takes to appear: usually the main image or the headline. It is the "how long until something useful shows" metric.
INP — Interaction to Next Paint. How long the page takes to respond when someone taps or clicks. It replaced FID because it measures every interaction, not just the first.
CLS — Cumulative Layout Shift. How much content moves while loading. It is the "I was about to tap the button and it moved" metric.
The official thresholds and definitions are documented by Google at web.dev/vitals.
Thresholds
| Metric | Good | Needs improvement | Poor |
|---|---|---|---|
| LCP | ≤ 2.5 s | 2.5 – 4.0 s | > 4.0 s |
| INP | ≤ 200 ms | 200 – 500 ms | > 500 ms |
| CLS | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
Google evaluates the 75th percentile of real visits, not the average. Three quarters of your visitors have to be inside the threshold.
How to measure them
PageSpeed Insights is free and gives two things at once: a lab test under controlled conditions, and field data from the Chrome UX Report, which is real visits. Field data only appears once your site has enough traffic.
Search Console includes a Core Web Vitals report that groups pages with similar problems, useful on a large site.
One detail that confuses people: lab and field results almost never match. Lab tells you what to fix; field tells you whether the fix worked.
What to check when they fail
High LCP
- Unoptimised images, no modern format, no declared dimensions
- The main image lazy-loaded when it should be prioritised
- Web fonts blocking rendering
- A slow server, or no caching
High INP
- Heavy JavaScript running on the main thread
- Third-party scripts: chat widgets, pixels, tag managers
- Event handlers doing too much work at once
High CLS
- Images without declared width and height
- Ads or banners inserted late that push content down
- Fonts that change size on load
- Elements injected by scripts after first paint
The order worth working in
- Measure with field data, not just lab.
- Fix the metric that is red first, not all three at once.
- Start with images: they are the most common cause of poor LCP and the cheapest to fix.
- Audit third-party scripts. Every chat, pixel and widget costs responsiveness.
- Measure again with field data after a few weeks.
In short
Core Web Vitals are LCP, INP and CLS, with thresholds of 2.5 s, 200 ms and 0.1, evaluated across 75% of real visits. Measure them free with PageSpeed Insights, fix the red one first, and start with images and third-party scripts.
Want us to review your site's performance? Tell us about your project.