Core Web Vitals 2026: How to Optimize INP and LCP

Since INP (Interaction to Next Paint) replaced FID as a Core Web Vital in March 2024 the game has changed. FID measured only the first interaction — INP measures the worst one. That means sites that looked fast on PageSpeed now fall through once real users click their way through complex React views. In 2026 INP is the most-missed ranking signal in technical SEO.

The basics first. You need to pass three thresholds at the 75th percentile of your real visitors: LCP under 2.5 seconds, INP under 200 milliseconds, CLS under 0.1. Real users, not lab tests — Google ranks on CrUX data, not on the PageSpeed score you get when you click Run.

LCP fixes that still apply. Set fetchpriority=high on the hero image. Serve modern formats (AVIF/WebP) with correct srcset. Don't let the LCP element be hidden behind client-side hydration. On Vite/React: preload the critical image in index.html and keep the hero font local or preloaded — Google-fonts CSS is still one of the most common causes of bad LCP we see.

INP is the hard one. INP measures the time from user interaction to the next paint. Long tasks on the main thread — big React renders, heavy state, unguarded useEffects that synchronously recompute everything — are the killer. Break up work with startTransition, useDeferredValue, and Web Workers for anything that doesn't need to block the UI.

The most common INP culprit we find in 2026: third-party scripts. An analytics tag initialized with sync JS, a chat widget injecting 300 kB of inline styles, an A/B tool blocking the first click. Load everything third-party with defer or inside requestIdleCallback, and force every vendor to show you their INP impact.

CLS is usually the easy one. Give images, embeds, and ads explicit width and height. Use font-display: optional or preloaded fonts to avoid FOUT jumps. Reserve space for anything that loads asynchronously. On 90% of sites CLS is a couple of hours of work.

Measure in the field, not the lab. PageSpeed Insights gives you lab data plus CrUX. CrUX is the truth. For per-page detail: run the web-vitals library in production and ship the metrics to your own endpoint or GA4. You need ~1000 data points per URL before the numbers are stable.

React 19 and the View Transitions API have moved the goalposts. useOptimistic dramatically cuts perceived latency on forms. View Transitions make navigation between pages smoother without costing INP. Vite 6 with esbuild splitting reduces initial JS bundles by an average 20% in our projects.

A pragmatic checklist for Q3 2026: 1) Install web-vitals and log in production. 2) Open the CrUX dashboard in Search Console. 3) Find the worst INP URL and break up the biggest useEffect chain. 4) Fix the LCP image with fetchpriority and preload. 5) Audit third-party scripts. 6) Measure again in two weeks.

In short: performance is still money. Google has shown that improving LCP from 3s to 2s lifts conversion measurably, and INP is the single biggest hidden cost in modern JS sites. Optimizing Core Web Vitals isn't technical SEO — it's product work that happens to come with an SEO bonus.