Interaction to Next Paint

Why It Matters

• It is a Core Web Vital. INP replaced First Input Delay as the responsiveness metric that search engines care about. It directly affects how your page is evaluated for user experience quality.
• It measures real responsiveness, not just the first click. A page might respond instantly to the first tap but freeze up on subsequent interactions. INP catches those later slowdowns that other metrics miss.
• Slow responses frustrate users. When someone clicks a button and nothing visibly happens for 200+ milliseconds, it feels broken. Users will click again, leave, or lose trust in your site. Responsiveness is visceral.
• It reflects JavaScript performance. Heavy scripts that block the main thread are the most common cause of poor INP. If your JavaScript takes too long to process, user interactions have to wait in line.

How to Improve It

1. Break up long JavaScript tasks. Any script that runs for more than 50 milliseconds blocks the browser from responding to user input. Break long tasks into smaller chunks using requestAnimationFrame, setTimeout, or the scheduler.yield() API.
2. Reduce unnecessary JavaScript. Every script on your page competes for processing time. Remove unused code, defer non-essential scripts, and consider whether every library and plugin is truly needed.
3. Optimize event handlers. If your click or input handlers trigger expensive operations like layout recalculations, large DOM changes, or network requests, move the heavy work off the critical path so the visual update can happen first.
4. Use web workers for heavy computation. Move CPU-intensive work (data processing, complex calculations) to a web worker so it runs in a separate thread and does not block the main thread from handling user interactions.
5. Minimize DOM size. A very large DOM makes every layout recalculation more expensive. When the browser has to re-render thousands of elements after an interaction, even simple changes take longer to paint.

Common Mistakes

• Only testing with the first click. INP is about every interaction, not just the first one. A page that responds well initially but slows down as more scripts load will still get a poor INP score.
• Loading too many third-party scripts. Analytics, chat widgets, ad scripts, and social embeds all compete for main thread time. Each one adds latency to user interactions, even if individually they seem small.
• Triggering layout thrashing in event handlers. Reading layout properties and then immediately writing changes forces the browser to recalculate layout repeatedly within a single interaction. Batch your reads and writes separately.
• Ignoring mobile performance. Desktop devices have powerful processors that mask responsiveness problems. Test on real mid-range mobile devices where limited CPU makes INP issues much more apparent.