Skip to main content

Core Web Vitals Explained: LCP, INP, CLS Guide

Core Web Vitals are three metrics that measure real-world user experience and directly affect your React app's Google ranking, conversion rate, and bounce rate. Google uses LCP (load speed), INP (responsiveness), and CLS (visual stability) as ranking factors and passes/fails pages based on achieving "good" thresholds in each. The Chrome User Experience Report aggregates field data from millions of real users and publishes these metrics publicly, giving you a competitive benchmark.

What Are Core Web Vitals?​

Core Web Vitals are quantifiable signals of a web page's perceived performance and stability from the user's perspective. Google began using them as a ranking factor in May 2021; failing even one metric can hurt your search visibility (Google Search Central, 2024). The three metrics are: Largest Contentful Paint (LCP, load speed), Interaction to Next Paint (INP, responsiveness), and Cumulative Layout Shift (CLS, visual stability). Unlike older metrics like First Contentful Paint or First Input Delay, these three directly correlate with user satisfaction and conversion (Web.dev, 2025).

Understanding LCP (Largest Contentful Paint)​

LCP measures when the largest visible element on the page finishes rendering. In a React app, this is often the above-the-fold hero image, main content block, or headline that the user came to see. Google's threshold for "good" is less than 2.5 seconds; "needs improvement" is 2.5–4 seconds; "poor" is above 4 seconds (Web.dev, 2026).

LCP is affected by server response time, CSS/JavaScript blocking, image download time, and third-party scripts. A typical React e-commerce site with a large hero image might see LCP times of 3–5 seconds on slow 4G networks if not optimized. LCP fires once and does not update; it captures the moment users perceive the page as ready to interact.

Why it matters: A 1-second delay in LCP increases bounce rate by 7% on average (Google Search Central research, 2024). Mobile users on 4G networks are more sensitive to LCP delays.

Understanding INP (Interaction to Next Paint)​

INP measures the time between a user interaction (click, tap, or keypress) and the next visual update. In React, this is the delay between onClick firing and state update rendering. Google's threshold for "good" is 200 milliseconds or less; "needs improvement" is 200–500 ms; "poor" is above 500 ms (Web.dev, 2026).

INP is affected by JavaScript execution time, React re-render duration, and the browser's ability to paint. If your onClick handler runs a long filter operation on a large array or triggers a heavy component tree re-render, users perceive lag. INP replaced First Input Delay (FID) in March 2024 because it measures all interactions, not just the first one.

Why it matters: 25% of users abandon sites that feel unresponsive (Chromium Blog, 2024). Faster INP correlates with higher completion rates in forms and e-commerce checkouts.

Understanding CLS (Cumulative Layout Shift)​

CLS measures unexpected layout changes during the page lifetime. Common causes in React apps are unloaded fonts, missing image dimensions, ads inserting after content loads, or animations without fixed dimensions. Google's threshold for "good" is 0.1 or less; "needs improvement" is 0.1–0.25; "poor" is above 0.25 (Web.dev, 2026).

A classic scenario: your page loads, then the browser downloads a @font-face file, causing text to reflow and shift all DOM elements down. Or an image loads late and pushes text beneath it. CLS accumulates throughout the page lifetime, so a layout shift at 30 seconds counts as much as one at load time.

Why it matters: Layout shifts erode trust and cause misclicks. If a user aims for a button and the button moves, they click the wrong element—a poor experience.

Pass/Fail Thresholds​

Google measures Core Web Vitals using the 75th percentile of real-world page loads, aggregated from the Chrome User Experience Report (CrUX). A page "passes" if 75% of page views meet the "good" threshold for all three metrics.

MetricGoodNeeds ImprovementPoor
LCP (Largest Contentful Paint)≤ 2.5s2.5s–4s> 4s
INP (Interaction to Next Paint)≤ 200ms200ms–500ms> 500ms
CLS (Cumulative Layout Shift)≤ 0.10.1–0.25> 0.25

React apps that pass all three metrics see a measurable lift in click-through rate from search results. Google also signals "Core Web Vitals" in search results for pages that pass.

Field Data vs Lab Data​

Field data is real-world user telemetry from your production site, collected via the web-vitals library or your analytics vendor. Lab data is synthetic testing you run locally or in CI/CD, such as Lighthouse. Field data always takes precedence because it reflects actual user networks, devices, and behaviors. Lab scores can be misleading—a perfect Lighthouse score on a desktop in a lab tells you nothing about a user on a Pixel 4 on a 3G network.

Key Takeaways​

  • Core Web Vitals (LCP, INP, CLS) are Google ranking signals and directly impact user experience.
  • LCP measures load speed: the moment users see the largest content element (good: ≤ 2.5s).
  • INP measures responsiveness: the delay from user interaction to next visual update (good: ≤ 200ms).
  • CLS measures visual stability: unexpected layout shifts throughout the page lifetime (good: ≤ 0.1).
  • Google uses the 75th percentile of real-world (field) data from CrUX to assess pages.
  • Field data (real users) is more reliable than lab data (Lighthouse) for tuning performance.

Frequently Asked Questions​

What is the difference between First Input Delay (FID) and INP?​

FID measured only the first user interaction and has been deprecated as of March 2024. INP measures all interactions on the page, giving a more complete picture of responsiveness. If your page is slow to respond to the 10th click but fast on the first, INP will catch it; FID would not.

Can I improve Core Web Vitals after launch?​

Yes. Core Web Vitals are measurable in production using the web-vitals library. You can identify regressions in real time, set performance budgets, and iterate on code optimizations. React's code-splitting, lazy-loading, and memoization techniques directly improve all three metrics.

Does CLS include shifts after user interaction?​

CLS measures layout shifts throughout the entire page lifetime by default. However, if you apply pointer-events: none or disable user interaction during a shift, the shift is not counted. Use the hadRecentInput flag in the web-vitals library to exclude shifts caused by user-initiated animations.

How do I know if my React app passes Core Web Vitals?​

Check the Chrome User Experience Report (CrUX) for your domain at https://crux.run or Google Search Console. These report field data from real users over the past 28 days. For lab testing, run Lighthouse in Chrome DevTools or via CI/CD.

Further Reading​