What is INP?
Interaction to Next Paint (INP) measures page responsiveness by observing the latency of all click, tap, and keyboard interactions throughout a page's lifespan. A good INP score is under 200 milliseconds.
Why INP Replaced FID
In March 2024, INP replaced First Input Delay (FID) as a Core Web Vital. While FID only measured the first interaction, INP measures all interactions, providing a more complete picture of responsiveness.
Steps to Improve INP
Break Up Long Tasks
Use setTimeout, requestIdleCallback, or yield to break JavaScript tasks into smaller chunks that don't block the main thread.
Optimize Event Handlers
Keep event handlers lightweight. Move heavy computations to Web Workers or defer them.
Reduce JavaScript Execution Time
Minimize and tree-shake JavaScript bundles. Remove unused code and dependencies.
Use Content-Visibility
Apply content-visibility: auto to off-screen content to reduce rendering work.