Since INP (Interaction to Next Paint) replaced FID as a Core Web Vital in March 2024, we have measured dozens of production sites. Two years on, the picture is clear: INP is the metric separating sites that feel fast from sites that feel slow. LCP, long considered the "true" speed metric, is mostly a solved problem on well-built sites. What makes the difference today is interaction responsiveness.
What INP measures
INP measures the worst response time of a page to user interactions: click, tap, keypress. Not the first, not the average: p98 across session interactions. If the user clicks ten times and one click freezes the UI for 800ms, INP is 800ms.
Thresholds:
- Good: ≤ 200 ms
- Needs improvement: 201-500 ms
- Poor: > 500 ms
Five most common causes of high INP
1. Heavy JavaScript bundles loaded on click
A click that opens a modal that lazy-loads a component: if the component is 200 KB, the browser blocks the main thread for parsing/eval. Fix: preload critical components via <link rel="modulepreload"> and shrink the bundle.
2. Long synchronous handlers
An onClick looping over 5,000 DOM nodes blocks everything. Rule: every handler must yield within 50ms. For long ops, scheduler.yield() (Chrome 129+) or requestIdleCallback.
3. Expensive React re-renders
A click that updates state and re-renders 500 components without memoization spikes INP. React Compiler in v19 helps a lot, but does not replace a focused pass with React DevTools Profiler.
4. Global listeners intercepting every event
Tracking, analytics, A/B testing: often intercept clicks globally. With three or four stacked, INP grows silently.
5. JavaScript animations instead of CSS
Animating top/left with JS is 90s. Animating transform and opacity with CSS is decades ahead. Every year we find sites where the animation library of the day causes more damage than the marketing it was meant to help.
New 2025-26 tools that help
View Transitions API
Native navigation animations handled by the browser. No more heavy libraries for route fades. Now on Chromium and Safari, coming on Firefox.
Speculation Rules API
Lets you prefetch or prerender pages declaratively. For editorial and e-commerce sites it cuts LCP to almost zero on internal navigations.
scheduler.yield()
A browser primitive to yield the main thread cooperatively. Cleanly replaces setTimeout(fn, 0) or requestAnimationFrame hacks used as yield.
CrUX 2026 numbers
From public Chrome UX Report data, Q1 2026:
- Italian sites with "good" INP: 53% — up from 47% a year ago.
- Italian sites with "good" LCP: 76% — stable.
- Italian sites with "good" CLS: 81% — stable.
INP is where there is still headroom. It is also where badly written frontends show: no image optimisation can save you if your JS bundle eats half a second on every click.
Our 2026 checklist
- Initial-page JS bundle under 150 KB gzipped.
- Code splitting per route and per rare interaction.
- React Compiler enabled or manual memoization where it matters.
- scheduler.yield() in any handler above 50ms.
- View Transitions for navigations.
- Speculation Rules for likely-next links.
- Global listener audit every 6 months.
Performance is not a one-off optimisation. It is a continuous discipline — and in 2026, one of those that makes the difference between a site that sells and a site that loses users after the first click.