What is Core Web Vitals

How it works

Each metric has a good/needs-improvement/poor threshold, assessed at the 75th percentile of your real users. A page passes only if all three are in the good range.

• LCP good: under 2.5s
• INP good: under 200ms (replaced FID in March 2024)
• CLS good: under 0.1

Common mistakes

The most common error is optimising for the Lighthouse lab score and ignoring the field data in Search Console, which is what Google actually uses. INP problems are usually caused by heavy JavaScript blocking the main thread on interaction, and CLS is usually images or ads without reserved space, or fonts that reflow text.

Why it matters

Core Web Vitals turned "site speed" from a vague aspiration into three numbers a whole team can agree on and be measured against. For SEO they are a genuine (if minor) ranking input inside the page-experience signals, but their real leverage is commercial: LCP, INP and CLS map directly to bounce, conversion and revenue. Amazon and others have repeatedly shown that hundreds of milliseconds of extra load time measurably drop conversion, so passing CWV is usually justified by the funnel long before it is justified by rankings.

• A tie-breaker ranking signal, strongest when competitors are otherwise equal
• A shared, measurable definition of "fast and stable" across dev, design and SEO
• Directly correlated with bounce rate and conversion, so it pays for itself commercially

How to improve each metric

The three metrics have different root causes, so they are fixed differently. LCP is about how fast the largest above-the-fold element (usually a hero image or heading) renders; INP is about main-thread responsiveness during interaction; CLS is about reserving space so nothing jumps. Chasing the Lighthouse lab number is the classic trap — Google ranks on the 75th-percentile field data in the CrUX dataset (surfaced in Search Console), so that is the number to move.

• LCP: prioritise the hero image, preload it, cut render-blocking CSS/JS, use a CDN
• INP: break up long JavaScript tasks, defer non-critical work, reduce third-party scripts
• CLS: set explicit width/height on images and embeds, reserve ad space, preload fonts

Worked example

Take a typical product page failing LCP at 4.1 seconds. Inspection shows the largest element is a hero image loaded by JavaScript after a large render-blocking CSS bundle. The fix sequence is: serve the hero as a plain `<img>` with `fetchpriority="high"` and a preload hint so the browser fetches it immediately; split and defer the non-critical CSS so it stops blocking the first render; and move the page behind a CDN so bytes travel less distance. LCP drops to 2.2 seconds. INP is then addressed separately by breaking a 300ms sorting script into smaller chunks with `requestIdleCallback`, and CLS by setting explicit dimensions on the image and the ad slot. The lesson is that each of the three metrics has a distinct root cause and a distinct fix — you cannot treat 'Core Web Vitals' as one problem, and you verify every change against Search Console field data, not the Lighthouse lab score.