Interaction to Next Paint (INP)

Interaction to Next Paint (INP) is the Core Web Vitals metric measuring how quickly a page visually responds to user interactions. It replaced First Input Delay (FID) as an official Core Web Vital in March 2024. Where FID only measured the first interaction's input delay, INP measures the worst-case latency across every interaction during the page's lifetime — a much stricter and more representative measurement.

Thresholds: Good is under 200ms, Needs Improvement is 200–500ms, Poor is over 500ms. Measured at the 75th percentile of real-user loads.

An interaction in INP terms includes mouse clicks, taps, and key presses (but not scrolling or hovering). Each interaction has three phases: input delay (how long until the event handler can start), processing time (how long the handler takes), and presentation delay (how long until the browser paints the resulting visual update). INP captures the full latency across all three phases.

The most common INP failures come from heavy JavaScript work on the main thread. Large bundles, third-party tags, expensive React or Vue render cycles, and synchronous tracking scripts all block the main thread and stretch interaction latency. The fix patterns: code-splitting to defer non-critical JavaScript; using Web Workers for expensive computation; replacing synchronous blocking analytics with the Beacon API or async equivalents; debouncing or throttling expensive handlers; and using requestIdleCallback to defer non-urgent work.

Common counterintuitive cases: a page can pass FID (the old metric) easily but fail INP because INP captures interactions throughout the session. A page that handles the first click in 50ms but takes 800ms to respond to the seventeenth click — after analytics scripts have loaded and the page has accumulated DOM work — fails INP even though FID looked fine.

Diagnose with Chrome DevTools' Performance panel or the Web Vitals extension. Both can highlight slow interactions and trace them to specific event handlers. Fix the worst handlers first — INP is a 75th-percentile metric, so the long-tail interactions are what drag your score.

Treat INP optimisation as ongoing JavaScript discipline rather than a one-time fix. Every new third-party tag is a potential regression vector.