Core Web Vitals Explained: LCP, INP, and CLS in Plain English

Core Web Vitals are the three specific metrics Google uses to decide whether a website feels fast to real users. They're also one of the ranking signals in Google Search. If you're serious about SEO or user experience, understanding LCP, INP, and CLS is non-negotiable.

This is the plain-English version. What each metric measures, what threshold Google considers passing, why sites fail each one, and the specific fixes that actually move the numbers.

1. LCP — Largest Contentful Paint

LCP measures when the biggest above-the-fold content (usually the hero image or main headline) becomes visible. It's the closest single metric to when does the page feel loaded?

• Good: ≤ 2.5 seconds
• Needs improvement: 2.5s – 4s
• Poor: > 4 seconds

Common causes of poor LCP: unoptimised hero images, slow server response, render-blocking CSS, client-side rendered content (SPA cost).

Fixes: optimise the hero image (AVIF, responsive sizes, fetchpriority="high"), preload the hero, use SSR or SSG instead of client rendering, put content in HTML rather than injecting via JS.

2. INP — Interaction to Next Paint

INP measures how quickly the page responds to user input (click, tap, keypress). It replaced FID as a Core Web Vital in March 2024. Unlike FID (which measured only the first input), INP looks at all interactions and reports the worst one.

• Good: ≤ 200ms
• Needs improvement: 200ms – 500ms
• Poor: > 500ms

Common causes of poor INP: heavy JavaScript execution on interaction, long tasks blocking the main thread, unbatched React state updates, complex CSS animations triggered by interaction.

Fixes: break long tasks into smaller chunks (requestIdleCallback, scheduler.postTask), use React's useTransition for non-urgent updates, minimise work in event handlers, move heavy work off the main thread with Web Workers.

3. CLS — Cumulative Layout Shift

CLS measures how much content jumps around on the page unexpectedly. Every time an image loads and shifts everything below it down, or an ad loads mid-scroll and pushes the text, you're accumulating CLS.

• Good: ≤ 0.1
• Needs improvement: 0.1 – 0.25
• Poor: > 0.25

Common causes: images without width/height, ads/embeds injected after page load, web fonts that shift text when they swap, dynamically-injected content above existing content.

Fixes: always specify width and height on images (or use aspect-ratio in CSS), reserve space for ads and embeds, use font-display: optional or size-adjust to prevent text shifts, avoid inserting content above existing content.

4. Where the data comes from

Google combines two data sources:

• Field data (real user monitoring) — collected from Chrome users via the Chrome User Experience Report (CrUX). This is what actually affects rankings.
• Lab data (Lighthouse) — synthetic tests run on Google's servers or in your DevTools. Useful for diagnosis, not for ranking.

Rankings use field data. Lighthouse is just a debugging tool. This distinction matters — a site that scores 90 in Lighthouse but has poor field data will still be penalised.

5. The 75th percentile rule

Google evaluates Core Web Vitals at the 75th percentile of your users. This means 75% of your visitors must meet the good threshold for the page to pass. If 30% of your users hit LCP > 2.5s, the page fails.

In practice, this means optimising for the slower half of your audience — mid-range Android on 4G, not a MacBook Pro on gigabit fibre.

6. Quick reference — Core Web Vitals thresholds

7. How to measure your site

1. PageSpeed Insights (pagespeed.web.dev) — enter your URL, get field + lab data instantly.
2. Search Console → Core Web Vitals report — aggregated field data for your whole site.
3. Chrome DevTools Performance panel — for deep debugging of specific interactions.
4. web-vitals library — instrument your own analytics with real-user CWV data.

The bottom line

Core Web Vitals aren't scary once you know what each measures. LCP is how fast does it look loaded? INP is how snappy does it feel? CLS is does it move around? Fix the specific cause of each red metric and you're green.

Read why website speed matters for the business case, and website speed optimisation for the full technique playbook.