Core Web Vitals Explained for Beginners

If you've run a PageSpeed Insights audit, you've seen the term "Core Web Vitals" — usually next to red, amber, or green dots. Here's what each one actually measures, why Google cares, and what counts as good.

What are Core Web Vitals?

Core Web Vitals (CWV) are three specific metrics Google uses to grade how your website feels to real users. They measure loading, interactivity, and visual stability:

• LCP — Largest Contentful Paint (loading)
• INP — Interaction to Next Paint (interactivity, replaced FID in 2024)
• CLS — Cumulative Layout Shift (visual stability)

These three are part of Google's page experience ranking signals. Sites that pass all three get a small SEO boost. Sites that fail get noticeably penalized.

LCP — Largest Contentful Paint

What it measures: How long until the biggest visible element (usually a hero image or headline) appears.

Why it matters: Users perceive a page as "loaded" when they can see the main content. LCP is the closest proxy to "did the page feel fast?"

Thresholds:

• ✅ Good: ≤ 2.5 seconds
• ⚠️ Needs improvement: 2.5–4.0 seconds
• ❌ Poor: > 4.0 seconds

Common causes of bad LCP: Huge unoptimized images, slow server response, render-blocking CSS, late-loading hero images.

For a full guide: LCP: What It Means and How to Improve It.

CLS — Cumulative Layout Shift

What it measures: How much the page jumps around as it loads. Calculated as the sum of all unexpected layout shifts.

Why it matters: There's nothing worse than tapping a button and having it move just as your finger lands. CLS measures exactly that.

Thresholds:

• ✅ Good: ≤ 0.1
• ⚠️ Needs improvement: 0.1–0.25
• ❌ Poor: > 0.25

Common causes of bad CLS: Images without width/height, ads that load late, cookie banners, font swaps that resize text.

Full guide: CLS: What It Means and How to Fix It.

INP — Interaction to Next Paint

What it measures: The time between a user tapping something and the page visibly responding. INP looks at all interactions on a page, not just the first one (which is what the old FID metric measured).

Why it matters: It's how Google measures whether your site feels snappy or laggy.

Thresholds:

• ✅ Good: ≤ 200ms
• ⚠️ Needs improvement: 200–500ms
• ❌ Poor: > 500ms

Common causes of bad INP: Heavy JavaScript event handlers, long tasks blocking the main thread, third-party scripts.

Full guide: INP: What It Means and Why It Matters.

Related metrics (not Core Web Vitals, but on the report)

Lighthouse also shows three other timing metrics. They're useful for diagnosis even though they're not Core Web Vitals:

FCP — First Contentful Paint

Time until anything visible appears (text, an image, even a background color). Good: ≤ 1.8s. If FCP is bad, your CSS or server is the bottleneck.

Speed Index

How quickly the visible portion of the page is populated, frame by frame. Good: ≤ 3.4s.

TBT — Total Blocking Time

Total time the main thread was blocked for more than 50ms during page load. It's the lab-only proxy for INP. Good: ≤ 200ms.

Lab data vs field data

When you run PageSpeed Insights, you'll see two sections:

1. Field data ("real-user data") — actual measurements from Chrome users who visited your site in the last 28 days. This is what Google uses for rankings.
2. Lab data — a simulated audit run on Google's servers right now. Useful for debugging, but doesn't directly affect rankings.

If your lab score is great but field data is bad, you have a real-world performance problem (maybe slow CDN, geographic issues, or a specific device class is hurting). If field data isn't available, your site doesn't get enough Chrome traffic yet.

How to check your Core Web Vitals

Three free options:

1. PageSpeed Insights — official Google tool. Shows both lab and field data.
2. RateMySite.io — letter-grade summary with both mobile and desktop side-by-side. Free audit here.
3. Chrome DevTools — the Performance tab can record a real session and show you CWV live.

For sites with enough traffic, you can also check Google Search Console's Core Web Vitals report for trend data across your entire site.

What "passing" means

Google considers a URL to be "passing" Core Web Vitals if all three metrics are in the green for 75% of page loads. This is the threshold for the SEO boost.

You don't need a 100 score. You need green LCP, green INP, and green CLS for most of your real users.

The action plan

If your Core Web Vitals are bad, work in this order:

1. Fix the worst metric first. Usually that's the one Lighthouse flags red.
2. Tackle LCP with image optimization and a faster hero. See how images affect website speed.
3. Tackle INP with less JavaScript. See how JavaScript slows down websites.
4. Tackle CLS by setting explicit dimensions everywhere.
5. Re-test with a free audit after each change. Don't trust your gut.

That's it. Three metrics. Three categories of fix. Real impact on both rankings and the actual humans visiting your site.