Core Web Vitals 2026: LCP, INP, CLS Guide & Fixes

Only 42% of websites pass all three Core Web Vitals thresholds. That means more than half the web is delivering a subpar experience — and potentially losing rankings because of it. If you haven't revisited your Core Web Vitals strategy since Google swapped out First Input Delay for Interaction to Next Paint in March 2024, you're optimizing for a metric that no longer exists. Here's everything that changed and exactly how to fix each metric in 2026.

What Are Core Web Vitals in 2026 — Updated Thresholds and Metrics

Core Web Vitals (CWV) are Google's standardized set of three performance metrics that measure real-world user experience on the web. They feed directly into Google's page experience ranking system, and they're based on field data collected from actual Chrome users through the Chrome UX Report (CrUX). Not lab simulations — real visits from real people on real devices.

As of 2026, the three Core Web Vitals and their thresholds are:

These thresholds haven't changed since INP was introduced, but overall pass rates have improved modestly. According to HTTP Archive data, the percentage of origins passing all three metrics climbed from roughly 39% in early 2024 to about 42% by early 2025. Progress, but slow. The biggest bottleneck remains LCP — only around 53% of origins meet the "good" threshold, compared to 92% for CLS and 65% for INP. Mobile performance lags desktop by 10–15 percentage points across the board, which matters enormously given that Google uses mobile-first indexing.

Understanding where each metric stands is the first step. The next step is understanding what changed.

What Changed — INP Replaces FID and New Measurement APIs

The most significant shift in the Core Web Vitals landscape happened on March 12, 2024, when INP officially replaced FID as the responsiveness metric. This wasn't a minor tweak — it was a fundamental change in what Google considers "interactive."

FID only measured the delay of the first user interaction. If your page was sluggish on the tenth click but fast on the first, FID didn't care. INP measures the latency of every interaction throughout the entire page lifecycle and reports the worst one (technically the 98th percentile). As Barry Pollard from the Google Chrome team put it: "INP is a much more representative metric of actual user experience than FID ever was. FID only measured the delay of the first interaction — INP captures the full latency of all interactions, which is what users actually feel."

This matters because many sites that comfortably passed FID are now failing INP. Third-party scripts — analytics, ads, chat widgets — contribute to approximately 57% of JavaScript execution time on the median page according to the HTTP Archive Web Almanac, and they affect interactions long after the page initially loads.

Beyond the metric swap, two important API changes affect how developers diagnose issues in 2026:

• Long Animation Frames (LoAF) API has replaced the Long Tasks API as the recommended tool for debugging INP. LoAF provides detailed attribution data showing exactly which scripts cause slow frames, making it far more actionable.
• CLS measurement uses session windows — a 1-second gap, 5-second cap approach that more accurately reflects user-perceived layout instability. This change stopped unfairly penalizing long-lived single-page applications.

Additionally, the Speculation Rules API for prerendering and prefetching has matured significantly in Chrome 121+, enabling near-instant subsequent page loads that effectively zero out LCP, INP, and CLS on navigations.

How to Fix LCP — Largest Contentful Paint Optimization

LCP is the hardest Core Web Vital to pass, and the median LCP on mobile sits at approximately 3.4 seconds globally — well above the 2.5-second "good" threshold according to HTTP Archive loading speed data. Since images account for roughly 72% of LCP elements across the web per the Web Almanac Performance chapter, image optimization is your highest-leverage fix.

Here's the priority list for LCP optimization:

1. Mark your LCP image correctly. Apply fetchpriority="high" to the LCP element and never use loading="lazy" on it. Google's own A/B tests show that fetchpriority="high" improves LCP by 5–12% on major sites.

2. Make the LCP resource discoverable in HTML. If the LCP image is set via CSS background-image or injected by JavaScript, the browser can't find it during the initial HTML parse. Either move the image to an <img> tag or add a preload hint:

<head>
  <!-- Preload LCP image so the browser discovers it immediately -->
  <link rel="preload" href="/hero.avif" as="image" 
        fetchpriority="high" type="image/avif">

  <!-- Use Speculation Rules for instant subsequent navigations -->
  <script type="speculationrules">
  {
    "prerender": [
      { "where": { "href_matches": "/*" }, "eagerness": "moderate" }
    ]
  }
  </script>
</head>

<body>
  <img src="/hero.avif" alt="Hero" width="1200" height="600"
       fetchpriority="high" decoding="async">
</body>

3. Slash your server response time. Aim for a Time to First Byte (TTFB) under 200ms. Use a CDN, enable edge caching, and consider streaming server-side rendering through frameworks like Next.js 14+ or Astro.

4. Eliminate render-blocking resources. Inline critical CSS, defer non-essential stylesheets, and move scripts to the bottom of the page or add defer/async attributes.

5. Serve modern image formats. AVIF delivers 30–50% smaller files than WebP and dramatically better compression than JPEG. Use an AVIF → WebP → JPEG fallback chain via <picture> or CDN-based content negotiation.

How to Fix INP — Interaction to Next Paint Best Practices

INP is where most sites struggle the most in 2026 because it exposes a problem that was always there but previously invisible: the main thread is overloaded. Every click, tap, or keypress competes with JavaScript execution, and if the browser is busy running a long task, the user's interaction has to wait.

The single most impactful strategy is breaking up long tasks so the browser can process input between chunks of work. The modern way to do this is scheduler.yield(), available in Chrome 129+:

async function handleUserClick(event) {
  // Immediate visual feedback — keep under 50ms
  updateButtonState(event);

  // Yield to let the browser paint and handle other input
  if ('scheduler' in window && 'yield' in scheduler) {
    await scheduler.yield();
  } else {
    await new Promise(resolve => setTimeout(resolve, 0));
  }

  // Continue with non-urgent work
  sendAnalyticsEvent(event);
  await scheduler.yield();
  updateSecondaryContent(event);
}

Beyond yield-based task splitting, here are the key INP strategies:

• Audit third-party scripts ruthlessly. Use the LoAF API in Chrome DevTools' Performance panel to identify which scripts block interactions the most. Defer, remove, or move heavy scripts like chat widgets and analytics to web workers using tools like Partytown.
• Reduce hydration cost. If you use React, Vue, or Angular, the hydration process can freeze the main thread for hundreds of milliseconds. Consider partial hydration, islands architecture (Astro), or React Server Components to send less JavaScript to the client.
• Use content-visibility: auto on below-the-fold sections. This tells the browser to skip rendering work for offscreen content, freeing up the main thread for interactions.
• Move computation off the main thread. Web Workers can handle data processing, sorting, filtering, and other CPU-intensive operations without blocking user input.

The goal is simple: no single task on the main thread should run longer than 50 milliseconds. If it does, break it up.

How to Fix CLS — Preventing Layout Shifts for Good

CLS has the highest pass rate of the three Core Web Vitals at 92%, but the sites that fail it often fail badly — and layout shifts are among the most annoying user experiences on the web. A page that jumps around while you're trying to read or tap a button erodes trust instantly.

The updated session window measurement approach (1-second gap, 5-second cap) means CLS now more fairly represents what users perceive. As Annie Sullivan from Chrome's Speed Metrics team explained: "The windowed approach measures what users actually perceive as instability," rather than unfairly accumulating minor shifts over long sessions.

Here are the fixes, ordered by impact:

1. Always set explicit dimensions on media elements. Every <img>, <video>, and <iframe> should have width and height attributes. The browser uses these to calculate the aspect ratio and reserve space before the resource loads.

<!-- Good: dimensions prevent layout shift -->
<img src="/photo.webp" alt="Product" width="800" height="600">

<!-- Also good: CSS aspect-ratio as fallback -->
<style>
  .video-wrapper { aspect-ratio: 16 / 9; }
</style>

2. Reserve space for dynamic content. Ads, cookie consent banners, and notification bars are the worst offenders. Use min-height on containers where dynamic content will appear. If you inject ads via JavaScript, set the container dimensions before the ad loads.

3. Handle web fonts properly. Font swaps cause a flash of invisible text (FOIT) or a flash of unstyled text (FOUT), both of which trigger layout shifts. Use font-display: optional to prevent shifts entirely, or preload your most critical font files with <link rel="preload" as="font" crossorigin>.

4. Prefer transform-based animations. CSS properties like top, left, width, and height trigger layout recalculations. Use transform: translateX() or transform: scale() instead — these properties are composited on the GPU and never cause layout shifts.

5. Avoid inserting content above existing content. If you need to show a banner or notification, overlay it on top of the page (using position: fixed) rather than pushing existing content down.

Tools to Measure and Monitor Core Web Vitals

You can't improve what you don't measure, and with Core Web Vitals, there's a critical distinction between field data (real user metrics from CrUX) and lab data (synthetic tests from Lighthouse). Google's ranking signal uses field data exclusively, so that's your source of truth.

Essential free tools:

• PageSpeed Insights — The starting point. Shows both CrUX field data and Lighthouse lab data for any URL. The field data section at the top is what affects your rankings.
• Chrome UX Report (CrUX) — The raw dataset behind PageSpeed Insights. Access it via BigQuery for bulk analysis or the CrUX API for programmatic checks. Origin-level data updates monthly.
• Chrome DevTools Performance Panel — Your debugging cockpit. The 2025+ version includes LoAF-based INP attribution, showing exactly which script caused a slow interaction and how long each phase (input delay, processing, presentation delay) took.
• web-vitals.js — Google's official JavaScript library for measuring CWV in the field. Add it to your site to collect real user data and send it to your analytics platform.
• Web Vitals Chrome Extension — Provides a real-time overlay showing LCP, INP, and CLS as you browse, making it easy to spot issues during manual testing.

Paid monitoring tools worth considering:

• DebugBear — Continuous synthetic monitoring with CrUX integration, ideal for tracking CWV trends over time.
• SpeedCurve — Combines synthetic testing with real user monitoring (RUM) and offers competitive benchmarking.
• WebPageTest — Deep-dive waterfall analysis with filmstrip views, invaluable for diagnosing complex LCP issues.
• Calibre — Performance budgets and alerting, useful for catching regressions in CI/CD pipelines.

The recommended workflow: use PageSpeed Insights for a quick health check, CrUX for tracking trends, and Chrome DevTools for deep debugging when a metric fails.

Core Web Vitals and SEO — How Much Do They Actually Affect Rankings?

Let's address the question every SEO professional asks: how much do Core Web Vitals actually move the ranking needle? The honest answer is that they're a real signal but not a dominant one.

Google's own documentation states it plainly: "Core Web Vitals are one signal among many that our ranking systems use. Great page experience doesn't override having great, relevant content. However, in cases where there are multiple pages of similar relevance, page experience can be much more important for visibility in Search."

In practical terms, CWV functions as a tiebreaker. If your content quality and relevance are comparable to competitors, better Core Web Vitals can push you ahead. In competitive SERPs — especially e-commerce, publishing, and local services — those marginal gains compound.

The business impact, however, goes well beyond rankings. Google's research shows that pages passing all Core Web Vitals are 24% less likely to have users abandon them before loading completes. Case studies from Vodafone, Agrofy, and NDTV published on web.dev demonstrate 15–20% improvements in search-driven conversion rates after moving CWV scores from "poor" to "good."

So while CWV alone won't catapult a thin-content page to position one, the combined effect of better rankings, lower bounce rates, and higher conversion rates makes optimization well worth the investment. The sites that treat performance as a product feature — not just an SEO checkbox — consistently outperform those that don't.

Next Steps — Audit Your Core Web Vitals Today

Here are your actionable takeaways:

1. Run a CrUX check immediately. Open PageSpeed Insights, enter your URL, and look at the field data section. If any metric is yellow or red, you now know exactly which section of this guide to follow.
2. Prioritize LCP first — it has the lowest pass rate and the highest impact on perceived speed. Start with your hero image: add fetchpriority="high", ensure it's in a modern format, and preload it if needed.
3. Audit your JavaScript for INP. Open Chrome DevTools, go to the Performance panel, interact with your page, and look for long animation frames. Third-party scripts are almost certainly your biggest offender.
4. Set dimensions on every media element to prevent CLS. This is the easiest fix on the list and often takes less than an hour.
5. Set up continuous monitoring. Add web-vitals.js to your site and pipe the data to your analytics. CWV regressions happen gradually — by the time you notice in CrUX, you've lost a month of data.

Core Web Vitals are not going away, and the bar will only rise as more sites optimize. The good news: every improvement you make benefits both your search visibility and your users' experience. That's a rare alignment of incentives in SEO.

Want to see exactly where your site stands across all three Core Web Vitals — with prioritized, actionable recommendations? Run a free audit at checkseo.site and get a clear roadmap for fixing LCP, INP, and CLS before your competitors do.