INP (Interaction to Next Paint): How Fast a Page Reacts
INP measures how quickly a page reacts to clicks, taps, and keystrokes. Learn what causes lag and how to get under the threshold.
Interaction to Next Paint (INP) is a Core Web Vital that measures the time between a user interaction and the page's next visual update.
What INP Measures
If a button feels laggy, that lag is INP. It replaced First Input Delay (FID) in 2024 because it measures the full interaction, including the work that follows the event.
The Good Threshold
- Good: 200 milliseconds or less.
- Needs improvement: up to 500 milliseconds.
- Poor: more than 500 milliseconds.
INP is measured at the 75th percentile of interactions across visits.
What Causes Poor INP
- Long main-thread tasks over 50ms.
- Heavy JavaScript and large frameworks.
- Event handlers that re-render large sections.
- Layout thrashing from repeated reads and writes.
How to Improve INP
- Trim unused JavaScript and ship less on load.
- Break long tasks into smaller chunks.
- Keep event handlers light and optimistic.
- Defer third-party scripts until after load.
The change: a storefront button that takes 600ms to react.
The setup: analytics scripts are deferred and the click handler is simplified.
The reading: the button now responds in under 200ms.
Why it works: the main thread stays free, so the page can paint the result quickly.
Quick Tip
Look for long tasks in DevTools. Each task over 50ms blocks input and paints; breaking them up is the fastest way to fix INP.
Frequently Asked Questions
INP, Bottom Line
INP catches what load speed misses: a page that renders fast but freezes when you use it.
Trim the scripts, break up the long tasks, and the page feels alive.