Core Web Vitals in 2026: What's Changed

Google replaced FID with INP (Interaction to Next Paint) as an official ranking signal in March 2024. By 2026, INP is the hardest metric to pass for JavaScript-heavy applications. Here's the full picture.

The Three Metrics: Current Thresholds

Metric	Good	Needs Improvement	Poor
LCP (Largest Contentful Paint)	≤ 2.5s	2.5–4s	> 4s
INP (Interaction to Next Paint)	≤ 200ms	200–500ms	> 500ms
CLS (Cumulative Layout Shift)	≤ 0.1	0.1–0.25	> 0.25

Optimizing LCP

1. Preload the LCP Resource

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

2. Priority on LCP Image in Next.js

<Image src="/hero.webp" priority alt="Hero" fill />

3. Use a CDN with edge caching

Vercel, Cloudflare, and Fastly all serve static assets from edge PoPs. A properly cached hero image served from 50ms away cannot be slow.

Optimizing INP — The Hard One

INP measures the 98th percentile of all interactions (clicks, taps, key presses). The main culprits:

• Long tasks on the main thread — break them up with scheduler.yield()
• Heavy event handlers — defer non-visual work with requestIdleCallback
• Third-party scripts — load them with async defer, or move to web workers

// Break up a long task
async function processLargeDataset(data) {
  for (let i = 0; i < data.length; i++) {
    process(data[i]);
    if (i % 100 === 0) await scheduler.yield(); // yield to browser
  }
}

Optimizing CLS

• Always set explicit width and height on images and iframes
• Reserve space for ads and embeds with CSS aspect-ratio
• Avoid inserting content above existing content on load
• Use font-display: optional to prevent FOUT-induced layout shifts

Measure Real Users, Not Lighthouse

Lighthouse runs in a synthetic environment. Real-user metrics via the Chrome UX Report (CrUX) and web-vitals JS library are what Google actually uses for ranking.