Mastering Interaction to Next Paint (INP) for Responsive Websites

Interaction to Next Paint (INP) observes the latency of all click, tap, and keyboard interactions throughout a visitor’s entire lifecycle on a page, reporting the worst interaction latency (at the 75th percentile). A good INP is 200 milliseconds or less.

1. The Three Phases of Every Interaction

• Input Delay: Time waiting for background tasks on the main thread to finish before event handlers can run.
• Processing Time: Time spent executing JavaScript event callbacks and state updates.
• Presentation Delay: Time required for the browser to recalculate layout and paint the next visual frame.

2. Break Up Long Tasks and Defer Non-Critical Work

Any task that blocks the main thread for more than 50 milliseconds delays user input. Yield to the main thread so visual feedback—such as opening a drawer or highlighting a filter button—renders immediately before heavy analytics or secondary updates run.

3. Audit Third-Party Tag Managers and Widgets

Chat widgets, heatmap recorders, and redundant ad pixels frequently compete for CPU time on mobile devices. Load only essential scripts and defer non-critical tags until after initial hydration.