What is Interaction to Next Paint (INP)?

Interaction to Next Paint (INP), explained

web.dev defines INP as a metric that assesses a page's overall responsiveness by observing the latency of all click, tap and keyboard interactions during a visit. Hovering, scrolling and zooming don't count. For pages with many interactions, one outlier is ignored for every 50 interactions, and the reported value approximates the worst remaining interaction. As with the other Core Web Vitals, the 75th percentile of page views is what's assessed.

The thresholds: 200 milliseconds or less is good, up to 500 milliseconds needs improvement, and above 500 milliseconds is poor. A page where users never click, tap or type may have no INP value at all. INP replaced First Input Delay as a Core Web Vital in March 2024, because FID only measured the delay before the first interaction's handlers started, not the full time until the screen updated.

Each interaction's latency has three parts. Input delay is the time before event handlers can start, usually because the main thread is busy with other JavaScript. Processing duration is how long the handlers take. Presentation delay is the time until the next frame is painted, which grows with large DOM updates and heavy rendering.

The common culprits are third-party scripts, large client-side frameworks hydrating big pages, expensive handlers that do too much work synchronously, and huge DOMs. Fixes include shipping less JavaScript, breaking long tasks up, deferring non-essential work until after the next paint, and rendering static content on the server so there's less to hydrate.

Why it matters for founders

INP is where JavaScript-heavy marketing sites fail. A sluggish menu or pricing toggle is both a Core Web Vitals problem and a conversion problem.

Example

Your pricing page's monthly/annual toggle takes 600ms to update because it re-renders the whole page and runs analytics synchronously. You update only the prices and send analytics after the paint, and INP falls under 200ms.

Common mistakes

• Measuring only load metrics and ignoring responsiveness.
• Heavy third-party scripts running on every interaction.
• Hydrating large, mostly static pages on the client.
• Still optimizing for First Input Delay, which INP replaced.