Core Web Vitals: LCP, FID, CLS Explained & How to Fix

March 15, 2026 · 9 min read

Core Web Vitals are Google's official metrics for measuring user experience on the web. Since becoming a ranking factor, they've transformed how developers and SEOs think about page performance. This guide breaks down each metric, explains what causes poor scores, and gives you concrete fixes you can implement today.

What Are Core Web Vitals?

Core Web Vitals (CWV) are a set of three specific metrics that Google considers essential for a good user experience. They measure three dimensions of page performance:

• Loading performance — How quickly does the main content appear?
• Interactivity — How quickly does the page respond to user input?
• Visual stability — Does the page layout shift unexpectedly?

Google uses real-world data (Chrome User Experience Report) to evaluate these metrics, meaning lab scores alone aren't enough — you need actual users to have good experiences on your site.

Why Core Web Vitals Matter for SEO

Core Web Vitals are part of Google's page experience signals, which also include mobile-friendliness, HTTPS, and no intrusive interstitials. While content relevance still dominates rankings, CWV act as a tiebreaker — when two pages are equally relevant, the one with better performance wins.

More importantly, good performance directly impacts business metrics:

• Pages that meet CWV thresholds see 24% fewer page abandonment rates
• A 100ms improvement in LCP correlates with a 1.7% increase in conversion rate
• Sites passing all three CWV metrics retain users 15% longer on average

Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest visible content element to render. This is typically a hero image, video thumbnail, or large text block.

LCP Thresholds

• Good: ≤ 2.5 seconds
• Needs Improvement: 2.5 – 4.0 seconds
• Poor: > 4.0 seconds

Common LCP Problems & Fixes

1. Slow Server Response Time (TTFB > 800ms)

• Use a CDN to serve content from edge locations closer to users
• Implement server-side caching (Redis, Varnish)
• Upgrade hosting if response times consistently exceed 600ms
• Check server response headers with the Header Checker

2. Render-Blocking Resources

• Defer non-critical CSS and JavaScript with async or defer attributes
• Inline critical CSS for above-the-fold content
• Eliminate unused CSS with code-splitting

3. Unoptimized Images

• Use modern formats: WebP (30% smaller than JPEG) or AVIF (50% smaller)
• Set explicit width and height attributes
• Add fetchpriority="high" to your LCP image
• Preload the LCP image: <link rel="preload" as="image" href="hero.webp">

Interaction to Next Paint (INP)

INP replaced First Input Delay (FID) in March 2024 as the official interactivity metric. While FID only measured the delay of the first interaction, INP measures the responsiveness of all interactions throughout the page's lifecycle.

INP Thresholds

• Good: ≤ 200 milliseconds
• Needs Improvement: 200 – 500 milliseconds
• Poor: > 500 milliseconds

Common INP Problems & Fixes

1. Long JavaScript Tasks

• Break up tasks longer than 50ms using requestIdleCallback or setTimeout
• Use web workers for heavy computation (data processing, parsing)
• Audit third-party scripts — analytics, ads, and chat widgets are frequent offenders

2. Excessive DOM Size

• Keep DOM elements under 1,400 nodes where possible
• Virtualize long lists (only render visible items)
• Remove hidden elements from the DOM instead of using display: none

3. Event Handler Bottlenecks

• Debounce scroll and resize handlers (100-150ms)
• Use passive: true for touch and wheel event listeners
• Avoid synchronous layout reads inside event handlers (forced reflow)

Cumulative Layout Shift (CLS)

CLS measures visual stability — how much the page layout shifts unexpectedly during loading. Nothing frustrates users more than clicking a button only to have a late-loading ad push it out of the way.

CLS Thresholds

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

Common CLS Problems & Fixes

1. Images Without Dimensions

• Always set width and height attributes on <img> elements
• Use CSS aspect-ratio for responsive images
• Reserve space with placeholder containers for lazy-loaded images

2. Dynamically Injected Content

• Reserve space for ads with fixed-dimension containers
• Load web fonts with font-display: swap and preload critical fonts
• Avoid inserting banners, notifications, or consent bars above existing content

3. Late-Loading Embeds & Iframes

• Set explicit dimensions on iframes, embeds, and video players
• Use placeholder images until the embed loads
• Consider loading embeds only on user interaction (click-to-load)

How to Measure Core Web Vitals

Use a combination of lab and field tools for the most accurate picture:

Lab Tools (Synthetic Testing)

• SEO-IO Page Speed Checker — Quick performance analysis with actionable recommendations
• Chrome DevTools (Lighthouse tab) — Detailed performance audit
• WebPageTest — Multi-location testing with waterfall analysis

Field Tools (Real User Data)

• Google Search Console — Core Web Vitals report with page-level data
• Chrome User Experience Report (CrUX) — 28-day rolling field data
• PageSpeed Insights — Combines both lab and field data

Check your mobile experience too — use the Mobile-Friendly Tester to ensure your responsive design isn't causing performance issues on smaller screens.

Complete Optimization Playbook

Here's a prioritized action plan for improving all three Core Web Vitals:

Quick Wins (Do These First)

1. Add width/height to all images and iframes (fixes CLS)
2. Preload your LCP image with <link rel="preload"> (fixes LCP)
3. Add defer to non-critical scripts (fixes LCP + INP)
4. Set font-display: swap on all web fonts (fixes CLS)
5. Enable Brotli/GZIP compression on your server (fixes LCP)

Medium-Term Improvements

1. Convert images to WebP/AVIF format
2. Implement lazy loading for below-fold images and embeds
3. Audit and remove unused CSS/JavaScript
4. Set up a CDN for static assets
5. Optimize server caching — verify with the Header Checker

Advanced Optimizations

1. Implement critical CSS inlining
2. Use resource hints: preconnect, prefetch, preload
3. Code-split JavaScript bundles with dynamic imports
4. Move to edge computing (Cloudflare Workers, Vercel Edge)
5. Implement service workers for return visitors

Frequently Asked Questions

Do Core Web Vitals directly affect rankings?

Yes, but they're one of many signals. Great content on a slow page will still outrank thin content on a fast page. However, when competing pages have similar content quality, better CWV scores give you an edge. Think of it as a tiebreaker, not the main ranking factor.

What replaced FID as a Core Web Vital?

Interaction to Next Paint (INP) replaced First Input Delay (FID) in March 2024. INP is a more comprehensive metric because it measures all interactions during the page lifecycle, not just the first one. This gives a better picture of real-world interactivity.

How long does it take for CWV improvements to affect rankings?

Google uses 28-day rolling field data from the Chrome User Experience Report. After implementing fixes, allow 4-6 weeks for changes to fully reflect in your CrUX data and potentially impact rankings. Lab tools show improvements immediately, but Google uses real user data.

Should I optimize for mobile or desktop Core Web Vitals?

Prioritize mobile. Google uses mobile-first indexing, so your mobile CWV scores matter most for rankings. Use the Mobile-Friendly Tester alongside performance testing to ensure your mobile experience is solid.

Can a CDN fix my LCP issues?

A CDN can significantly improve LCP by reducing server response time (TTFB), especially for users far from your origin server. However, LCP issues caused by render-blocking resources, unoptimized images, or client-side rendering need additional fixes beyond a CDN.