What Is INP and How JavaScript Tasks Affect It

Interaction to Next Paint (INP) is a Core Web Vital that measures a web page’s overall responsiveness to user interactions. This article explains how INP tracks interaction latency, breaks down the three phases of an interaction, and demonstrates how the duration of JavaScript tasks directly impacts your INP scores by blocking the browser’s main thread.

Understanding Interaction to Next Paint (INP)

INP measures responsiveness by observing the latency of all click, tap, and keyboard interactions that occur throughout a user’s visit. The final INP score represents the longest interaction observed, ignoring rare outliers.

A low INP value means the page consistently provides fast visual feedback when a user interacts with it. An interaction consists of three distinct phases:

1. Input Delay: The time between the user initiating an action and the browser starting to run the associated event handlers.
2. Processing Duration: The total time required to execute the JavaScript event handlers tied to the interaction.
3. Presentation Delay: The time needed for the browser to recalculate styles, update layout, paint pixels, and composite the next frame on the screen.

How JavaScript Task Duration Affects INP

Browsers execute JavaScript on a single thread—the main thread. The main thread is also responsible for handling user input, style calculations, layout, and painting. When a JavaScript task takes a long time to run (typically classified as a “long task” if it exceeds 50 milliseconds), it monopolizes the main thread.

JavaScript task duration affects INP in two primary ways:

1. Increased Input Delay

If a user clicks a button while a heavy background script, third-party tag, or hydration process is running, the browser cannot immediately process the click. The interaction must wait in a queue until the running task completes. Longer tasks create longer queues, directly increasing input delay.

2. Extended Processing Duration

If the event handler itself executes complex calculations, iterates over large datasets, or makes synchronous DOM queries, the processing phase takes longer. The browser cannot advance to rendering visual feedback until these event callbacks finish executing.

When either the input delay or processing duration is prolonged by long-running JavaScript, the browser cannot render the next frame in a timely manner, resulting in a poor INP score.

Key Techniques to Reduce JavaScript Execution Impact

• Break Up Long Tasks: Use APIs like scheduler.yield() or setTimeout() to divide large chunks of JavaScript into smaller, non-blocking tasks. This allows the browser to process incoming user inputs between tasks.
• Offload Non-UI Work: Move CPU-intensive calculations, data parsing, and analytics processing away from the main thread using Web Workers.
• Optimize Event Listeners: Keep event handlers lightweight. Update the UI state immediately with visual feedback (such as loading states) and defer complex, non-critical background operations.
• Avoid Layout Thrashing: Prevent interleaving DOM reads and writes inside event handlers, which forces the browser to calculate layouts synchronously and adds unnecessary processing overhead.