Interaction to Next Paint

How Interaction to Next Paint Works

INP is calculated by observing the latency of every interaction a user makes with a page during their visit and reporting a high percentile (approximately 98th percentile) of those interaction latencies as the page's INP score. An interaction latency consists of three phases: the input delay (time from user action to when the browser begins processing the event handler), the processing time (time the event handler takes to execute), and the presentation delay (time from handler completion to the next frame painted). Reducing any of these three phases improves INP.

Why Interaction to Next Paint Matters for B2B Marketing

Long Tasks on the main thread are the primary source of high input delay. A Long Task is any JavaScript execution that blocks the main thread for more than 50 milliseconds, preventing the browser from processing user inputs during that window. Breaking up Long Tasks using scheduler.yield(), setTimeout with zero delay, or Web Workers allows the browser to process user interactions between chunks of work. This is particularly important for complex single-page applications that perform heavy computation on the main thread during page lifecycle events.

Interaction to Next Paint: Best Practices & Strategic Application

Third-party scripts — analytics, chat widgets, advertising tags, heatmap tools, and social embeds — are frequent INP offenders because they execute JavaScript on the main thread at unpredictable times, often during user interaction windows. Auditing third-party script performance using the Chrome DevTools Performance panel reveals which scripts are contributing to Long Tasks. Loading non-essential third-party scripts with async or defer attributes, or using a tag manager to delay their firing until after first user interaction, mitigates their impact on INP.

Agency Perspective: Interaction to Next Paint in Practice

React and other single-page application frameworks can produce high INP scores when state updates trigger large component re-renders synchronously on the main thread. React's concurrent features (useTransition and useDeferredValue) allow expensive re-renders to be interrupted and deferred, keeping the main thread available for user input processing. For non-React sites, minimizing DOM manipulation complexity, reducing event handler execution time, and avoiding forced layout reflows inside event handlers are the most effective optimization strategies.