What is Interaction to Next Paint (INP)?

Definition

Interaction to Next Paint (INP) is a Core Web Vital metric that measures the responsiveness of a web page by observing the latency of all click, tap, and keyboard interactions throughout a user's visit. INP records the delay between when a user interacts with the page and when the browser is able to paint the next frame in response. Unlike First Input Delay (FID), which only measured the first interaction, INP considers every interaction during the entire page visit and reports the worst (or near-worst) interaction latency. INP replaced FID as a Core Web Vital in March 2024.

INP captures three phases of interaction latency: input delay (time between the user's action and the start of event handler execution, usually caused by the main thread being busy), processing time (time to execute the event handlers themselves), and presentation delay (time from when event handlers finish to when the browser renders the next visual frame). Understanding which phase contributes most to a slow INP tells you where to focus optimization, a long input delay means the main thread is blocked by other work, while long processing time means the event handler itself is doing too much work.

Why It Matters

INP directly measures how responsive your website feels to users. A slow INP means users experience noticeable delays when clicking buttons, typing in forms, or tapping on mobile. Poor responsiveness frustrates visitors and leads to higher bounce rates, lower engagement, and fewer conversions. Because INP measures all interactions throughout the entire visit, it gives a much more accurate picture of real-world user experience than the previous FID metric.

Google uses INP as a ranking signal, so a poor INP score can hurt your search visibility. The shift from FID to INP raised the bar significantly, many sites that passed FID (which only measured the first interaction) fail INP because later interactions are slow due to accumulated JavaScript, ongoing API calls, or complex re-rendering triggered by state changes. This makes INP a more honest reflection of the actual user experience and requires sites to maintain responsiveness throughout the entire visit, not just during the initial load.

How to Measure

INP is measured in milliseconds and reported as a single value representing the worst interaction latency observed during a page visit, with some outlier filtering for pages with many interactions. A good INP is 200 milliseconds or less, 200-500ms needs improvement, and above 500ms is poor. Measure INP using field data from the Chrome User Experience Report (CrUX) or real-user monitoring solutions, as lab tools cannot fully replicate the variety of interactions real users perform.

In Chrome DevTools, the Performance tab records individual interactions and shows the three phases of latency (input delay, processing time, presentation delay) for each one. Look for long tasks (JavaScript execution blocking the main thread for 50ms or more) that coincide with user interactions, these are the primary cause of high input delay. Check for expensive event handlers that perform heavy computation, trigger large DOM updates, or make synchronous API calls. Test interactions throughout the full page lifecycle, not just immediately after load, since INP captures the worst interaction across the entire visit.

How Racoons.ai Helps

Racoons.ai measures INP as part of its comprehensive Core Web Vitals assessment during page audits. Our analysis identifies pages with slow interaction responsiveness and pinpoints the likely causes, such as heavy JavaScript execution, long tasks blocking the main thread, or inefficient event handlers. You get specific recommendations to improve INP alongside your other performance metrics.

Best Practices

Break up long JavaScript tasks into smaller chunks using techniques like yielding to the main thread with setTimeout or scheduler.yield(). The browser cannot process user interactions while a long task is running on the main thread, so any task over 50ms creates interaction delay. Split heavy computation into smaller increments that allow the browser to process pending user input between chunks.

Minimize the work done in event handlers, keep them focused on updating state and triggering minimal DOM changes. Defer expensive operations (analytics calls, non-critical UI updates) to requestIdleCallback or queueMicrotask so they don't block the interaction response. Reduce the total amount of JavaScript on your pages by code-splitting and lazy-loading modules that aren't needed immediately. Third-party scripts (analytics, ads, chat widgets) are frequent INP offenders because they run periodic tasks on the main thread, audit and remove or defer any third-party scripts that are not essential for the core user experience.

Frequently Asked Questions