Performance Guide

Core Web Vitals Explained
(And How to Fix Them)

Google's page experience signals simplified. Learn what LCP, INP, and CLS measure, what good scores look like, and exactly how to fix common issues.

Test Your CWV Read Guide

What Are Core Web Vitals?

Core Web Vitals are a set of specific metrics that Google considers important for a webpage's overall user experience. Introduced as a ranking signal in 2021, these metrics measure real-world user experience for loading performance, interactivity, and visual stability.

Unlike vanity metrics, Core Web Vitals are based on actual user data collected from Chrome users who have opted in to sharing usage statistics. This means Google measures how your real visitors experience your site, not just how fast it loads in lab conditions.

Why Core Web Vitals Matter

  • Ranking Factor: CWV is a confirmed Google ranking signal as part of Page Experience
  • User Experience: Sites with good CWV have lower bounce rates and higher engagement
  • Conversion Rates: Studies show every second of delay reduces conversions by 7%
  • Competitive Advantage: Many sites still fail CWV, creating opportunity for those who optimize

The Three Core Web Vitals

As of 2024, the three Core Web Vitals are:

  • LCP (Largest Contentful Paint): Measures loading performance
  • INP (Interaction to Next Paint): Measures interactivity (replaced FID in March 2024)
  • CLS (Cumulative Layout Shift): Measures visual stability

Lab Data vs Field Data

Lab data (like Lighthouse) shows what could happen. Field data (CrUX) shows what actually happens for real users. Google uses field data for ranking, so that's what matters most. If you don't have enough traffic for field data, focus on improving lab scores.

► Watch: Core Web Vitals Explained in 5 Minutes

The History of Core Web Vitals

▼

Core Web Vitals were announced by Google in May 2020 and became a ranking signal in June 2021 as part of the "Page Experience" update. The metrics have evolved:

  • 2020: Google announces CWV with LCP, FID, and CLS
  • 2021: CWV becomes a ranking factor (desktop and mobile)
  • 2023: Google announces INP will replace FID
  • March 2024: INP officially replaces FID as a Core Web Vital

This shift from FID to INP reflects Google's focus on comprehensive interactivity measurement rather than just first input delay.

How Much Do Core Web Vitals Actually Affect Rankings?

▼

Core Web Vitals are a confirmed ranking factor, but content relevance still matters more. According to Google, CWV acts as a "tiebreaker" when content quality is similar between competing pages. However, studies show:

  • Pages passing all CWV have 24% fewer visitors abandoning before interaction (Google data)
  • Sites in the top 10% for CWV see 10-15% higher organic traffic than average
  • E-commerce sites with good CWV report up to 70% lower cart abandonment

The indirect benefits (lower bounce rates, higher engagement) often have a bigger impact than the direct ranking signal.

Source: Google Chrome UX Report (CrUX), 2024; Google Web Vitals Documentation
⚡
LCP
Largest Contentful Paint
Measures how long it takes the largest content element to become visible

What LCP Measures

LCP measures the render time of the largest image, text block, or video visible within the viewport. It's essentially how long users wait to see the main content of your page. The "largest" element is typically a hero image, featured video, or main heading with large text.

LCP Score Thresholds

Good
≤ 2.5s
Needs Improvement
2.5s - 4.0s
Poor
> 4.0s

Common LCP Issues

  • Slow server response times (TTFB)
  • Render-blocking JavaScript and CSS
  • Slow resource load times (large images)
  • Client-side rendering delays

How to Fix LCP

  • 1
    Optimize Server Response Time
    Use a CDN, upgrade hosting, enable caching, and optimize database queries. Target TTFB under 200ms.
  • 2
    Preload the LCP Element
    Add <link rel="preload"> for your hero image. This tells the browser to fetch it early.
  • 3
    Optimize Images
    Use WebP format, compress images, and serve properly sized images based on viewport. Use srcset for responsive images.
  • 4
    Remove Render-Blocking Resources
    Defer non-critical CSS and JavaScript. Inline critical CSS. Use async or defer attributes on scripts.
  • 5
    Avoid Lazy Loading LCP Element
    Don't lazy load your hero image. It should load immediately with the initial HTML.
⚡

Advanced LCP Optimization: Resource Hints

▼

Beyond basic optimizations, resource hints can dramatically improve LCP:

  • <link rel="preload">: Forces early loading of critical resources like hero images
  • <link rel="preconnect">: Establishes early connections to required origins (CDNs, font servers)
  • <link rel="dns-prefetch">: Resolves DNS early for third-party domains
  • fetchpriority="high": Tells the browser this resource is high priority

Example for hero image: <link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

Source: web.dev/lcp, Google Chrome Team
👉
INP
Interaction to Next Paint
Measures how quickly the page responds to user interactions

What INP Measures

INP measures the latency of all click, tap, and keyboard interactions throughout the page's lifecycle, and reports a single value that represents the overall responsiveness. Unlike FID (which it replaced), INP measures the entire interaction, not just the initial delay.

A good INP means when users click a button, tap a link, or type in a field, the page responds quickly with visual feedback.

INP Score Thresholds

Good
≤ 200ms
Needs Improvement
200ms - 500ms
Poor
> 500ms

Common INP Issues

  • Long-running JavaScript tasks blocking the main thread
  • Large JavaScript bundles taking time to parse
  • Third-party scripts with heavy execution
  • Expensive event handlers
  • Layout thrashing during interactions

How to Fix INP

  • 1
    Break Up Long Tasks
    Split JavaScript tasks over 50ms into smaller chunks using setTimeout or requestIdleCallback. This keeps the main thread responsive.
  • 2
    Reduce JavaScript Execution Time
    Remove unused JavaScript, defer non-critical scripts, and use code splitting to load only what's needed.
  • 3
    Optimize Event Handlers
    Debounce scroll and resize events. Avoid expensive operations in click handlers. Use passive event listeners where possible.
  • 4
    Audit Third-Party Scripts
    Remove unnecessary third-party scripts. Load them asynchronously. Consider self-hosting critical third-party resources.
  • 5
    Use Web Workers
    Move heavy computations to Web Workers so they don't block the main thread.

INP Replaced FID in March 2024

First Input Delay (FID) is no longer a Core Web Vital. INP is a more comprehensive measure of interactivity because it considers all interactions, not just the first one.

📈
CLS
Cumulative Layout Shift
Measures how much the page layout shifts unexpectedly during loading

What CLS Measures

CLS measures the sum of all unexpected layout shifts that occur during the entire lifespan of the page. A layout shift happens when a visible element changes its position from one rendered frame to the next without user interaction.

Ever tried to click a button and the page shifted, making you click something else? That's what CLS measures and penalizes.

CLS Score Thresholds

Good
≤ 0.1
Needs Improvement
0.1 - 0.25
Poor
> 0.25

Common CLS Issues

  • Images without dimensions (width/height attributes)
  • Ads, embeds, or iframes without reserved space
  • Dynamically injected content (banners, modals)
  • Web fonts causing FOUT (Flash of Unstyled Text)
  • Actions waiting on network response before updating DOM

How to Fix CLS

  • 1
    Always Include Size Attributes on Images and Videos
    Add width and height attributes to all <img> and <video> elements. The browser reserves space before the resource loads.
  • 2
    Reserve Space for Ads and Embeds
    Use CSS to define minimum heights for ad containers and embeds. Prevents content from jumping when they load.
  • 3
    Avoid Inserting Content Above Existing Content
    Don't add banners or notifications above the viewport after initial load. If you must, reserve space in advance.
  • 4
    Preload Web Fonts
    Use <link rel="preload"> for fonts. Add font-display: swap to show text immediately while fonts load.
  • 5
    Use CSS aspect-ratio
    Modern CSS aspect-ratio property maintains element proportions before content loads. Works great for responsive images.

How to Measure Core Web Vitals

There are two types of Core Web Vitals data:

Lab Data

Lab data is collected in a controlled environment with predefined device and network settings. It's useful for debugging issues during development but doesn't reflect real user experience. Tools that provide lab data:

  • Lighthouse (in Chrome DevTools)
  • PageSpeed Insights (lab section)
  • WebPageTest

Field Data (Real User Monitoring)

Field data is collected from real users as they interact with your page. This is what Google uses for search rankings. Sources of field data:

  • Chrome User Experience Report (CrUX) via PageSpeed Insights
  • Google Search Console Core Web Vitals report
  • SchemaReports Dashboard
core_web_vitals_check
# Field Data (Real Users)
LCP: 1.8s (Good)
INP: 245ms (Needs Improvement)
CLS: 0.05 (Good)
# Assessment
Overall: Needs Improvement
# All three must pass for "Good" status

The 75th Percentile Rule

Google uses the 75th percentile of page loads when assessing Core Web Vitals. This means 75% of your users need to have a "Good" experience for that metric to pass. Outliers and poor connections still count.

Common Issues & Quick Fixes

Hero Image Slowing LCP

The most common LCP issue. Fix it by:

  • Converting to WebP format (30-50% smaller than JPEG)
  • Adding fetchpriority="high" attribute
  • Preloading with <link rel="preload">
  • Removing lazy loading from above-the-fold images

Third-Party Scripts Hurting INP

Analytics, chat widgets, and ads often cause interactivity issues:

  • Load non-critical scripts after page interactive
  • Use async attribute instead of defer for truly independent scripts
  • Consider loading chat widgets on user interaction
  • Self-host critical third-party resources when possible

Font Loading Causing CLS

Custom fonts often cause layout shifts when they load:

  • Preload your most important font files
  • Use font-display: optional or swap
  • Match fallback font sizes to your custom font
  • Consider using system fonts for body text

Tools for Monitoring Core Web Vitals

SchemaReports
Automated CWV monitoring with AI-powered recommendations
Free Tier Available
PageSpeed Insights
Google's official tool with both lab and field data
Free
Google Search Console
Site-wide CWV report grouped by URL pattern
Free
Chrome DevTools
Lighthouse audits and Performance panel for debugging
Free
WebPageTest
Detailed waterfall analysis and filmstrip view
Free
GTmetrix
Performance reports with historical tracking
Free Tier

Check Your Core Web Vitals Now

Get a comprehensive performance analysis with actionable recommendations to improve your scores.

Test Your Website

Understanding the 75th Percentile

Google evaluates Core Web Vitals at the 75th percentile of page loads. This means if you have 100 visitors, the 75th worst experience determines your score. Why? Because it ensures most users have a good experience while filtering out extreme outliers (like users on very slow connections).

📈

This is why field data matters more than lab data. Lab tests show ideal conditions; field data shows what real users experience on various devices and connections.

Source: Google Web Vitals Documentation, "How Google Evaluates Core Web Vitals"

Frequently Asked Questions About Core Web Vitals

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

▼

Core Web Vitals data is collected over a rolling 28-day period in the Chrome User Experience Report (CrUX). After implementing improvements, it can take 28+ days for the new data to fully replace old data. Google also recrawls and reprocesses pages on its own schedule. Expect 4-8 weeks to see ranking impacts from CWV improvements.

My lab scores are good but field data fails. Why?

▼

Lab tests (Lighthouse, PageSpeed Insights lab mode) use controlled conditions with fast connections. Real users have slower devices, poor connections, and varying conditions. Common causes: third-party scripts that load slowly on mobile, aggressive ad networks, or features that behave differently with real user interactions. Debug by testing on throttled connections and mid-range mobile devices.

Do all pages need to pass Core Web Vitals?

▼

Google evaluates pages individually, not sites as a whole. However, there can be URL groupings in Search Console where pages with similar templates are evaluated together. Focus on your most important pages first: homepage, service pages, and high-traffic landing pages. Low-traffic pages may not even have field data available.

Can I pass Core Web Vitals with a slow server?

▼

Server speed (TTFB - Time to First Byte) directly impacts LCP. If your server takes 2 seconds to respond, it's nearly impossible to achieve a good LCP of 2.5 seconds. Target TTFB under 200-500ms. Solutions include: better hosting, CDN implementation, server-side caching, database optimization, and static page generation where possible.

How do SPAs (Single Page Apps) handle INP?

▼

Single Page Applications built with React, Vue, or Angular often struggle with INP because they rely heavily on JavaScript. Best practices: code split aggressively, use server-side rendering (SSR) or static generation, defer non-critical JavaScript, break up long tasks with yield points, and consider partial hydration techniques. Framework-specific solutions like React Server Components can help significantly.

Related Guides