← Back to Blog

Core Web Vitals: What Google Actually Measures and How to Fix It

·6 min read

Google has been using Core Web Vitals as a ranking signal since 2021. Five years later, most website owners still don't understand what's being measured — or why their scores are bad.

Here's the thing: page speed isn't one number. It's three specific metrics, each measuring a different part of user experience. Fix the wrong one and nothing changes.

The Three Metrics That Matter

LCP — Largest Contentful Paint

What it measures: How long it takes for the biggest visible element (usually a hero image or headline) to finish rendering.

Good: Under 2.5 seconds
Needs work: 2.5–4.0 seconds
Poor: Over 4.0 seconds

LCP is the metric most sites fail. The usual culprits:

  • Unoptimized images. A 3MB hero image will kill your LCP every time. Convert to WebP or AVIF, serve responsive sizes with srcset, and add loading="eager" to your above-the-fold image (not lazy — that delays it).
  • Slow server response. If your TTFB (Time to First Byte) is over 800ms, no frontend optimization will save you. Check your hosting. A $5/month shared host serving a WordPress site with 40 plugins is going to be slow.
  • Render-blocking CSS/JS. Every stylesheet and script in your <head> blocks rendering until it downloads and parses. Inline your critical CSS. Defer non-essential scripts with defer or async.

INP — Interaction to Next Paint

INP replaced FID (First Input Delay) in March 2024. It measures responsiveness — specifically, the time between a user clicking/tapping something and the browser visually responding.

Good: Under 200ms
Needs work: 200–500ms
Poor: Over 500ms

Bad INP usually means your JavaScript is hogging the main thread. Common fixes:

  • Break up long tasks. Any JavaScript task over 50ms blocks the browser. Use requestAnimationFrame or setTimeout to yield back to the browser between chunks.
  • Reduce third-party scripts. That chat widget, analytics tag, ad script, and cookie banner are all fighting for the same thread. Audit with Chrome DevTools Performance tab — you'll probably find one script eating 200ms+ on every interaction.
  • Debounce event handlers. If your scroll or input handlers fire on every pixel/keystroke, you're generating hundreds of unnecessary tasks.

CLS — Cumulative Layout Shift

What it measures: How much the page layout jumps around while loading. Ever tried to tap a button and the page shifted, so you hit an ad instead? That's layout shift.

Good: Under 0.1
Needs work: 0.1–0.25
Poor: Over 0.25

CLS is the easiest to fix:

  • Set explicit width and height on images and videos. This reserves space before the media loads. Without dimensions, the browser renders a 0-height box, then everything below jumps when the image appears.
  • Don't inject content above existing content. Banners, cookie notices, and late-loading ad slots that push the page down are the #1 CLS offender.
  • Use font-display: swap carefully. Web fonts that swap in after system fonts render cause text to reflow. Consider font-display: optional for non-critical fonts — it skips the swap entirely if the font isn't cached.

How to Check Your Scores

Two data sources, and they tell you different things:

Lab data (Lighthouse, our Page Speed Insights tool) runs a simulated test right now. Useful for debugging specific issues and testing fixes before deploying.

Field data (Chrome User Experience Report / CrUX) shows real scores from actual Chrome users over the past 28 days. This is what Google uses for rankings. You need real traffic volume to generate field data — new or low-traffic sites won't have any.

Run your URL through our Page Speed Insights tool to get lab scores instantly. For field data, check the "Origin Summary" section in Google's PageSpeed Insights or look at the Core Web Vitals report in Google Search Console.

The Fixes That Give You the Biggest Wins

If your scores are bad across the board, don't try to fix everything at once. Prioritize by impact:

1. Optimize images (fixes LCP + CLS)

This one change fixes more speed issues than anything else. Convert all images to WebP. Set explicit dimensions. Use responsive srcset. For hero images, add a fetchpriority="high" attribute.

2. Audit third-party scripts (fixes INP + LCP)

Open Chrome DevTools → Network tab → sort by size and load time. Every external script (analytics, chat, pixels, fonts) adds latency. Remove what you don't need. Defer what you do.

3. Use a CDN (fixes LCP)

If your server is in Virginia and your visitor is in California, every request adds ~70ms round-trip. A CDN like Cloudflare (free tier is fine) caches your static assets on edge servers worldwide.

4. Preload critical resources (fixes LCP)

<link rel="preload" href="/hero-image.webp" as="image">
<link rel="preload" href="/critical-font.woff2" as="font" crossorigin>

This tells the browser to start downloading these files immediately instead of waiting until the parser discovers them in the CSS.

Does Page Speed Actually Affect Rankings?

Yes, but it's a tiebreaker — not a primary factor. Google's own documentation calls it a "page experience signal" that matters when two pages have similar content quality and relevance.

That said, page speed has a massive indirect effect on rankings. Slow pages have higher bounce rates. Higher bounce rates mean fewer engaged users. Fewer engaged users mean fewer backlinks, shares, and return visits — which are primary ranking factors.

A page that loads in 1.5 seconds versus 4 seconds will see measurably different engagement metrics. Over months, that compounds.

Quick Wins by Platform

WordPress: Install a caching plugin (WP Super Cache or W3 Total Cache), use ShortPixel or Imagify for automatic image compression, and switch to a lightweight theme. Remove plugins you're not using — each one adds CSS and JS.

Shopify: Use Shopify's built-in image optimization. Minimize apps (each injects scripts). Use system fonts instead of custom web fonts. Lazy-load product images below the fold.

Next.js / React: Use next/image for automatic optimization. Enable static generation where possible. Code-split with dynamic imports. Check your bundle size with next build — if your JavaScript bundle is over 200KB gzipped, find what's bloating it.

Static sites: You're already ahead. Make sure images are optimized, enable gzip/brotli on your server, and set long cache headers for static assets.

Checking and Monitoring Over Time

Run your key pages through our Page Speed Insights tool after making changes. Compare before and after scores for each metric individually — aggregate "performance scores" hide which specific vital improved.

For ongoing monitoring, set up the Core Web Vitals report in Google Search Console. It groups your URLs by status (Good, Needs Improvement, Poor) and tracks changes over time. When you fix an issue, use the "Validate Fix" button so Google rechecks those URLs faster.

Your meta tags and structured data determine what shows up in search results, but Core Web Vitals determine whether Google considers your page good enough to rank in the first place. Get the fundamentals right and everything else works harder for you.

Ready to try it?

Analyze your HTML for performance bottlenecks. Find render-blocking resources, unoptimized images, large inline scripts, and get a performance score with actionable fixes.

⚡ Page Speed Insights — Free Online Tool

Get notified about new SEO tools

More free tools coming soon — keyword research, sitemap generator, and more.