What is INP?
Interaction to Next Paint (INP) measures the latency of every user interaction — clicks, taps, and keyboard input — throughout the entire page visit. It reports the worst interaction (or near-worst for pages with many interactions). INP replaced First Input Delay (FID) as a Core Web Vital in March 2024.
What problem does it solve?
FID only measured the delay before the browser started processing the first interaction. INP measures the full interaction latency — input delay + processing time + presentation delay — and does so for every interaction, not just the first.
What is a good INP score?
What elements count as INP?
- Click events on any interactive element
- Tap events on touchscreen devices
- Keyboard key presses (keydown, keypress, keyup)
- Pointer events (pointerdown, pointerup)
- Scroll and pinch-to-zoom (continuous gestures)
- Mouse hover events (mouseover, mouseenter, mouseleave)
- Pointer move events (pointermove, mousemove)
- Drag interactions (drag, dragover)
How to improve INP
The key is to tackle issues related to each contributing phase.
Input delay
Time from when the user interacts to when the browser begins processing the event handler. Caused by other tasks blocking the main thread.
Break up long tasks with scheduler.yield() or setTimeout(fn, 0). Move non-critical work off the main thread into Web Workers.
Processing time
Time spent executing the event handler(s) triggered by the interaction.
Profile handlers with Chrome DevTools Performance panel. Defer non-visual updates — only do the minimum needed to update the DOM in the handler.
Presentation delay
Time from the handler completing to the next frame being painted by the browser.
Avoid forced style/layout recalculations after DOM mutations. Batch DOM writes and minimise layout thrashing.
Root cause analysis, not plugin guessing. Baseline from field data or lab — wherever you are.