What Is INP? How to Improve Interaction to Next Paint
Understand Interaction to Next Paint and learn how JavaScript, long tasks, event handlers, and third-party scripts can affect responsiveness.
What Is INP?
Interaction to Next Paint (INP) measures how responsive a page is to user interactions during a visit. It considers interactions such as clicks, taps, and keyboard input and looks at the delay before the browser can present the next visual update.
Why JavaScript Matters
JavaScript often performs work in response to user actions. When too much work runs on the main thread, the browser can be unable to respond quickly.
Long Tasks
Break large JavaScript tasks into smaller pieces where possible. Long tasks can block rendering and input processing.
Heavy Event Handlers
Review click, input, scroll, and other event handlers. Avoid unnecessary calculations and DOM updates inside frequently triggered handlers.
Third-Party Scripts
Analytics, advertising, chat widgets, A/B testing, and other third-party scripts can consume CPU time. Load only services that provide real value.
Practical INP Improvements
- Remove unused JavaScript.
- Split large bundles.
- Defer non-critical code.
- Reduce expensive DOM operations.
- Break up long tasks.
- Optimize event handlers.
- Audit third-party scripts.
INP is one part of the larger Core Web Vitals picture. See our Core Web Vitals guide.
Conclusion
Improving INP starts with understanding what happens between an interaction and the next visual update. Use performance profiling to find the work blocking the main thread rather than optimizing JavaScript blindly.