Core Web Vitals: the 3 metrics that decide your Google ranking

Since 2021, Google measures the user experience of your site using 3 specific metrics called Core Web Vitals. If your numbers are bad, Google ranks you lower — even if your content is excellent.

This post explains the 3 metrics without technical jargon, how to measure them for free, and what to do when your site fails.

What Core Web Vitals are

Google wants to show sites that are fast, stable, and responsive. Instead of asking designers to guess what that means, it defined 3 measurable metrics:

1. LCP — Largest Contentful Paint (load speed)
2. CLS — Cumulative Layout Shift (visual stability)
3. INP — Interaction to Next Paint (responsiveness)

Each metric has a "good", "needs improvement", and "poor" range. Google rewards sites with all 3 green.

LCP — load speed

What it measures: how long it takes for the largest visible element on the page to appear (usually the hero image or main heading).

Ranges:

• 🟢 Good: under 2.5 seconds
• 🟡 Needs improvement: 2.5 – 4.0 seconds
• 🔴 Poor: over 4.0 seconds

Why it matters: if your page takes 6 seconds to show anything, 53% of users have already left. Google sees that signal and assumes your site is bad.

Common causes of poor LCP:

• Huge unoptimized images (4MB photos straight from mobile)
• Slow hosting (cheap shared hosting on saturated servers)
• Render-blocking JavaScript
• Too many plugins loading simultaneously

How to fix:

• Optimize images (WebP/AVIF, next/image, appropriate sizes)
• Lazy-load below-the-fold images
• Remove unnecessary plugins
• Migrate to a modern framework (Next.js) that pre-renders statically

CLS — visual stability

What it measures: how much elements "move" while the page loads. If the page jumps because an image loaded late and pushed text down, that's high CLS.

Ranges:

• 🟢 Good: under 0.1
• 🟡 Needs improvement: 0.1 – 0.25
• 🔴 Poor: over 0.25

Why it matters: ever gone to click a button and suddenly it jumps because a banner appeared above it? That's bad CLS. It's frustrating and Google knows it.

Common causes:

• Images without width and height attributes (browser can't reserve space)
• Web fonts that load late and resize text (FOIT/FOUT)
• Ads that appear and shift content around
• Pop-ups that push content down

How to fix:

• Always specify width + height on all images
• Use font-display: swap with font preloading
• Reserve space for ads with fixed-size containers
• Avoid dynamic insertions above existing content

INP — responsiveness

What it measures: how long your site takes to respond when users click, tap, or type. INP replaced FID (First Input Delay) as the official metric in March 2024.

Ranges:

• 🟢 Good: under 200ms
• 🟡 Needs improvement: 200 – 500ms
• 🔴 Poor: over 500ms

Why it matters: a site that takes half a second to respond to a click "feels broken" even if it technically works.

Common causes:

• Heavy JavaScript blocking the main thread
• Event handlers doing heavy synchronous work
• Animations running on the main thread instead of GPU
• Huge JS bundles (300KB+ on the initial page)

How to fix:

• Code splitting (load JS on demand)
• Move heavy work to Web Workers
• Use requestIdleCallback for non-critical tasks
• Audit bundles with tools like @next/bundle-analyzer

How to measure your Core Web Vitals (free)

Three free tools:

1. PageSpeed Insights

Go to pagespeed.web.dev. Enter your URL. You get:

• Overall score (0–100)
• LCP, CLS, INP specifically
• Concrete improvement suggestions

Do this first. It's the tool Google uses for ranking, so its numbers are the ones that matter.

2. Google Search Console

Search Console → "Core Web Vitals" in the sidebar. Shows:

• Which URLs are failing
• How many times they failed in the last 28 days
• Historical trend

This is the definitive source of how Google actually sees your site across real users (not a synthetic test).

3. Chrome DevTools Lighthouse

In Chrome, open DevTools (F12) → "Lighthouse" tab → Generate report. Useful for debugging specific improvements before deploying to production.

What to do when your numbers are bad

Priority:

1. LCP first. Biggest impact on user perception. If your LCP is 8 seconds, fix that before anything else.
2. CLS next. Relatively easy to fix (add image dimensions, preload fonts).
3. INP last. Hardest — requires JavaScript analysis.

For an average WordPress site, improving Core Web Vitals can take 20–40 hours of technical work. For a well-built Next.js site from scratch, all 3 are green by default.

Our standard

Every site we build at SoftInWeb must have 90+ on PageSpeed Insights mobile before launch. Not optional — it's part of the deliverable. If it doesn't hit that, we don't ship it.

If your current site has Core Web Vitals in the red, reach out for a free audit — we'll give you the 3 highest-impact changes you can make this week.