What Is Interaction to Next Paint (INP)?
Interaction to Next Paint (INP) is a Core Web Vital metric that measures the latency from a user's input event (click, tap, or keyboard press) to the moment the browser renders the next visual frame in response — capturing the full responsiveness of a page across its entire lifecycle. Unlike First Input Delay (FID), which only measured input delay for the first interaction, INP evaluates every qualifying interaction during a session and reports the worst or near-worst result as the page's single responsiveness score. Google officially replaced FID with INP as a Core Web Vital in March 2024, with a 'Good' threshold defined as 200ms or under.
What Is Interaction to Next Paint (INP)?
Interaction to Next Paint (INP) is a Core Web Vital metric that measures the latency from a user's input event (click, tap, or keyboard press) to the moment the browser renders the next visual frame in response — capturing the full responsiveness of a page across its entire lifecycle. Unlike First Input Delay (FID), which only measured input delay for the first interaction, INP evaluates every qualifying interaction during a session and reports the worst or near-worst result as the page's single responsiveness score. Google officially replaced FID with INP as a Core Web Vital in March 2024, with a 'Good' threshold defined as 200ms or under.
How Interaction to Next Paint (INP) Works
INP is measured using the Event Timing API, part of the W3C Web Performance Working Group's specification. When a user triggers a qualifying interaction — a pointerdown, pointerup, click, or keydown event — the browser records three phases: input delay (time from interaction to when the event handler begins executing), processing time (time spent running JavaScript event handlers), and presentation delay (time from when handlers finish to when the next frame is painted to screen). INP is the sum of these three phases for a given interaction. The browser collects data on all qualifying interactions throughout the page session. At the end of the session, INP is determined by taking a high percentile of those recorded latencies — specifically, if a page has fewer than 50 interactions, the worst single value is used; for more interactions, the 98th percentile is used to avoid penalizing pages for rare outlier events. This makes INP a holistic measure of sustained responsiveness rather than a one-time snapshot. The most common culprits for poor INP scores are long-running JavaScript tasks on the main thread. When the main thread is busy processing a large task — such as a heavy React re-render, a synchronous XHR call, or a bloated third-party script — it cannot handle the event callback and schedule a paint in time. The browser's rendering pipeline (style recalculation → layout → paint → composite) must complete before the frame becomes visible, and any forced reflow or excessive DOM mutation during this pipeline extends presentation delay significantly. INP is observable in the field via the web-vitals JavaScript library (using `onINP()` from version 3+), which wraps the PerformanceObserver API targeting the 'event' entry type with `buffered: true`. Lab tools like Chrome DevTools Performance panel and Lighthouse 10+ can simulate INP by profiling interactions and identifying the longest animation frame or task, though real user monitoring (RUM) is required for accurate field data since INP depends on actual user interaction patterns.
Best Practices for Interaction to Next Paint (INP)
Break up long JavaScript tasks using `scheduler.yield()` (available in Chrome 115+) or `setTimeout(fn, 0)` to yield control back to the browser between chunks of work, preventing the main thread from blocking input handling — this directly reduces both input delay and processing time. Minimize DOM size and complexity before interactions occur; a page with 3,000+ DOM nodes forces expensive style recalculation and layout during presentation delay, so flatten component trees and use CSS containment (`contain: layout style`) to limit reflow scope. Defer non-critical third-party scripts using the `defer` or `type='module'` attributes, and audit scripts like analytics, chat widgets, and A/B testing tools with Chrome's 'Bottom-Up' flame chart to identify which scripts consume main thread time during interaction windows. For event-heavy UI like dropdowns, modals, and form validation, debounce or throttle handlers appropriately, avoid synchronous reads of layout properties (like `offsetHeight` or `getBoundingClientRect`) inside event callbacks which trigger forced reflow, and use CSS transitions over JavaScript animations so the compositor thread handles visual updates independently of the main thread.
Interaction to Next Paint (INP) & Canvas Builder
Canvas Builder generates production-ready Bootstrap 5 HTML with lean, well-structured markup that avoids the deep component hierarchies and JavaScript framework runtime overhead that are the primary architectural causes of poor INP scores. Because Canvas Builder's output is static HTML with Bootstrap's lightweight, CSS-animation-driven components rather than a JavaScript-rendered SPA, user interactions are processed directly by the browser without framework reconciliation cycles — eliminating a major category of processing delay. Developers who export Canvas Builder sites can further optimize INP by auditing the generated `<script>` tag placement and applying `defer` attributes, confident that the underlying HTML structure already minimizes layout thrashing and forced reflow risks.
Try Canvas Builder →