INP (Interaction to Next Paint)

Interaction to Next Paint (INP) measures the latency of every user interaction on a page and reports the worst (P95) latency observed. It captures the gap between input and visual feedback — the 'is this page responsive' feel.

Google's threshold: INP under 200ms is 'good', 200–500ms is 'needs improvement', over 500ms is 'poor'. INP became a Core Web Vital in March 2024, replacing First Input Delay (FID) — which only measured the first interaction.

Common INP failures: heavy JavaScript handlers running on click (analytics, ad-network calls, hydration in React apps), large component re-renders blocking the main thread, and long tasks (>50ms) that delay paint. Modern frontend frameworks have been the most common culprit — initial hydration in React/Next.js apps frequently spikes INP on the first interaction.

Fixes: break long tasks into smaller chunks with scheduler.yield() or requestIdleCallback(); defer non-critical work (analytics, marketing pixels) until after first interaction; use React Server Components or partial hydration to reduce client-side work; debounce expensive handlers; and avoid re-rendering entire trees on every state change.

INP matters most for sites with heavy interactivity: SaaS dashboards, e-commerce filters, AI chat surfaces. Marketing sites typically have low INP by default because they're mostly static — unless they include heavy embedded widgets (chat tools, third-party ad scripts) that block interaction.