What Is Interaction to Next Paint?
Interaction to Next Paint (INP) is a Core Web Vital metric that measures the latency between a user's input event (click, tap, or keyboard press) and the next frame the browser paints in response, capturing the worst-case interaction delay across a page's full lifetime. It replaced First Input Delay (FID) as an official Core Web Vital in March 2024. A score below 200 milliseconds is considered good, 200-500 milliseconds needs improvement, and anything above 500 milliseconds is poor.
What Is Interaction to Next Paint?
Interaction to Next Paint (INP) is a Core Web Vital metric that measures the latency between a user's input event (click, tap, or keyboard press) and the next frame the browser paints in response, capturing the worst-case interaction delay across a page's full lifetime. It replaced First Input Delay (FID) as an official Core Web Vital in March 2024. A score below 200 milliseconds is considered good, 200-500 milliseconds needs improvement, and anything above 500 milliseconds is poor.
How Interaction to Next Paint Works
INP is measured by the browser's Event Timing API, which records the full duration of an interaction from the moment the user's input is received to the moment the browser commits the next visual frame. This duration encompasses three phases: input delay (the time the main thread is busy before the event handler can begin executing), processing time (the time spent running the event handler itself), and presentation delay (the time needed for the browser to render and paint the updated frame after handler execution completes). Unlike its predecessor FID, which only measured input delay for the very first interaction on a page, INP samples every qualifying interaction throughout the entire page session and reports the worst one (with a small allowance for outliers based on interaction count). This makes it far more representative of real user experience, since many interactions happen after the initial page load when JavaScript bundles have already executed but may still cause jank through heavy re-renders or long tasks. Long tasks on the main thread are the primary culprit for poor INP scores. When JavaScript execution blocks the main thread for more than 50 milliseconds (the threshold defined by the RAIL model), any queued interaction events must wait before their handlers can run. This input delay alone can push a site past the 200ms threshold. Frameworks that perform large synchronous reconciliation passes (such as React before concurrent features were introduced) are particularly prone to this pattern during state updates. INP data is collected via the Chrome User Experience Report (CrUX) using real user sessions from Chrome browsers that have opted into metrics sharing. The field data feeds directly into Google Search Console's Core Web Vitals report and PageSpeed Insights. Lab tools like Chrome DevTools' Performance panel and the web-vitals JavaScript library can replicate INP measurement during development by tracking interaction durations via PerformanceEventTiming entries.
Best Practices for Interaction to Next Paint
Break up long JavaScript tasks using scheduler.yield(), setTimeout with zero delay, or the newer Scheduler API (scheduler.postTask()) so the main thread can process pending interactions between chunks of work. Avoid synchronous layout thrashing inside event handlers by batching DOM reads before DOM writes, since interleaving read and write operations forces the browser to recalculate styles repeatedly within a single frame. Defer non-critical event handler work using requestAnimationFrame or microtask queues so the visual update happens first and secondary logic (analytics, logging, state sync) follows without blocking the paint. When using component frameworks like React or Vue, leverage concurrent rendering features (React 18's useTransition and useDeferredValue, for example) to mark expensive state updates as interruptible, preventing them from blocking the response to user input. Profile real interactions using the Performance panel in Chrome DevTools with the 'Interactions' track enabled, or add the web-vitals library to your production bundle to capture INP attribution data (including the interaction target element and the breakdown of delay phases) from actual users.
Interaction to Next Paint & Canvas Builder
Canvas Builder outputs production-ready Bootstrap 5 HTML where interactive components like modals, accordions, and navigation menus are powered by Bootstrap's own optimized JavaScript, which is designed to perform minimal DOM work per interaction and avoid long tasks. The clean, semantic markup Canvas Builder generates means there is no unnecessary JavaScript framework overhead inflating event handler processing time or presentation delay. Because the generated sites ship lean HTML without bloated client-side rendering layers, developers starting from a Canvas Builder template have a strong INP baseline and only need to be mindful of the third-party scripts and custom JavaScript they add on top.
Try Canvas Builder →