Master Core Web Vitals

Pass all three Core Web Vitals. Here’s how.

The Three Metrics

Core Web Vitals are Google’s user experience metrics. They affect rankings and represent real user frustration. Fix the worst issues first.

Google measures these from real Chrome users visiting your site. Lab scores in PageSpeed Insights may differ from field data in Search Console because real users have different devices and networks.

Diagnose Your Bottleneck First

Do not fix all three metrics at once. Run PageSpeed Insights, identify which metric fails, and work on that one only. Here is a diagnosis flow:

1. LCP over 2.5s? Check the waterfall in DevTools → Network tab. If the hero image loads late, it is a resource priority issue. If the server responds slowly (TTFB over 800ms), the problem is hosting or backend, not frontend.
2. CLS over 0.1? Open DevTools → Performance → check “Layout Shift Regions.” The blue flashes show exactly which elements shift. The cause is almost always images without dimensions or late-loading ads.
3. INP over 200ms? Open DevTools → Performance, click around your page, and look for long tasks (red-flagged bars over 50ms). That specific JavaScript is your bottleneck.

Before and After: A Real Fix

A content site with a 4.8s LCP traced the problem to a 1.2MB uncompressed hero image loading without priority hints. Three changes brought LCP to 1.9s:

• Converted hero from PNG (1.2MB) to WebP (148KB) — saved 2.1s
• Added fetchpriority="high" and <link rel="preload"> — saved 0.4s
• Moved render-blocking CSS inline (critical path only) — saved 0.3s

Total improvement: 4.8s → 1.9s LCP. The site moved from “Poor” to “Good” in Search Console within 28 days.

Check Your Scores

Before fixing anything, measure where you stand. Lab data shows what’s possible. Field data shows what users actually experience.

1. PageSpeed Insights – pagespeed.web.dev
2. Search Console – Core Web Vitals report (real user data)
3. Chrome DevTools – Lighthouse tab

Fix LCP (Loading)

LCP is the most common failure point. The largest visible element — usually your hero image or main heading — must finish rendering in under 2.5 seconds.

Quick Wins

• Compress hero image (use WebP, under 200KB)
• Add fetchpriority="high" to hero image
• Preload critical resources: <link rel="preload" href="hero.webp" as="image">
• Use a CDN

Bigger Fixes

• Remove render-blocking JavaScript
• Inline critical CSS
• Server-side render above-the-fold content

Fix INP (Responsiveness)

User interactions (clicks, taps, key presses) must respond in under 200ms. INP is the hardest metric to fix because it requires JavaScript optimization. Most failures come from third-party scripts blocking the main thread.

Quick Wins

• Break up long JavaScript tasks (over 50ms)
• Use requestIdleCallback for non-critical work
• Defer third-party scripts

Bigger Fixes

• Use web workers for heavy computation
• Virtualize long lists
• Debounce input handlers

Fix CLS (Stability)

Page elements shouldn’t shift around as the page loads. CLS is usually the easiest metric to fix — most shifts come from images without explicit dimensions or fonts that swap after loading.

Quick Wins

• Add width and height to all images
• Reserve space for ads and embeds
• Don’t inject content above existing content

Bigger Fixes

• Preload fonts with font-display: optional
• Use CSS aspect-ratio for dynamic content
• Avoid inserting dynamic banners at page top

Priority Order

1. LCP – Most common failure, biggest performance impact
2. CLS – Usually easiest to fix
3. INP – Hardest, requires JavaScript improvement

Monitor Your Scores Monthly

Run PageSpeed Insights on your homepage. Fix the specific issues it flags, starting with LCP.

Sources

• pagespeed.web.dev