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
widthandheighton images and iframes - Reserve space for ads and embeds with CSS aspect-ratio
- Avoid inserting content above existing content on load
- Use
font-display: optionalto 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.
I audit and optimize web performance for real user impact and SEO gains. Get a free audit call →