INP replaced FID, LCP thresholds tightened, and mobile weightings shifted. A field-tested breakdown of what each metric measures now — and how to fix the common regressions.
Core Web Vitals used to be a nice-to-have. In 2026, they're a page-experience gate: sites in the "poor" bucket get demoted in mobile results and largely excluded from AI Overview citations. Here's the current state of the three metrics, the exact thresholds you're being graded against, and the fixes that actually work.
The 2026 thresholds at a glance
- LCP (Largest Contentful Paint): Good ≤ 2.5s, Poor > 4.0s
- INP (Interaction to Next Paint): Good ≤ 200ms, Poor > 500ms
- CLS (Cumulative Layout Shift): Good ≤ 0.1, Poor > 0.25
These are measured on real users (field data from the Chrome UX Report), not lab tools. A page passes only if the 75th percentile is in the "Good" band across all three.
LCP: what's actually slow
The biggest LCP culprit isn't your image — it's the render-blocking chain before the image can even start loading. In our audits, the fix breakdown looks like this:
- ~40% — hero image not preloaded and sitting behind lazy-loaded CSS.
- ~25% —
<img>without explicitwidth,height, andfetchpriority="high". - ~20% — server response time (TTFB) over 800ms because there's no CDN or edge cache.
- ~15% — third-party scripts blocking the main thread before render.
Quick wins: add <link rel="preload" as="image" fetchpriority="high"> for the LCP element, serve it in AVIF/WebP, and put the origin behind an edge network.
INP: the metric everyone underestimates
INP measures the latency of every user interaction (clicks, taps, key presses) and reports the worst 2% for the session. Most sites' INP problems come from:
- Long-running event handlers. Anything over 50ms on the main thread blocks the next paint. Break work up with
scheduler.yield()or move it to a Web Worker. - Hydration. React and Next.js apps often ship megabytes of client JS. Use React Server Components, streaming, and
use clientonly where you need interactivity. - Third-party tag managers. One misbehaving tag can dominate your INP for every user.
Measure INP in the field with the web-vitals library — Lighthouse's lab number is a rough proxy at best.
CLS: the invisible one
The pattern here almost never changes: images and iframes without explicit dimensions, web fonts that swap after render, and injected content (banners, ads, cookie prompts) pushing content down.
- Always set
widthandheighton media — the browser reserves the space. - Use
font-display: swapplussize-adjustdescriptors so fallback fonts occupy the same box. - Reserve height for above-the-fold ad slots and cookie banners.
Where to measure — free tools
- PageSpeed Insights — Chrome UX Report field data + Lighthouse lab data in one place.
- Search Console → Core Web Vitals report — URL groupings so you can prioritize by page pattern.
- web-vitals JS library — send real-user metrics to your own analytics.
Fix the top-three offending page templates and you'll usually move an entire site from "Needs Improvement" to "Good" within a single CrUX 28-day window.
