Interaction to Next Paint (INP)

For every click, tap and key press during a visit, the browser measures the time from the input until the next frame is painted. INP reports the worst of those interactions (for pages with many interactions, it ignores one outlier per 50 so a single hiccup doesn’t define the page). Hovering and scrolling are not counted.

INP became a Core Web Vital on 12 March 2024, replacing First Input Delay, which only measured the input delay of the first interaction and was passed by over 90% of sites on mobile.

INP needs a real person interacting. Lighthouse’s standard navigation run doesn’t click anything, so PageSpeed Insights shows INP only in the field section. In the lab, Total Blocking Time is the best proxy: long main-thread tasks during load are exactly what delays early interactions. To measure INP yourself, use Chrome DevTools’ Performance panel (which shows live INP as you click) or the web-vitals library in production.

• Yield inside long handlers. Update the UI first (spinner, pressed state), then await scheduler.yield() before expensive work so the frame can paint.
• Audit third-party scripts. Tag managers, chat widgets and A/B testing tools often run long tasks exactly when users start interacting.
• Reduce hydration cost. Frameworks that hydrate the whole page block input; use partial or lazy hydration and server components where available.
• Avoid layout thrashing. Reading offsetHeight after writing styles forces synchronous layout. Batch reads, then writes.
• Keep the DOM lean. Style and layout cost scales with element count; content-visibility: auto skips off-screen work.
• Debounce input handlers on search boxes and filters, and move heavy computation to a Web Worker.