Interaction to Next Paint: The Decisions That Matter
A measure of responsiveness: how long a page takes to render a visual response after a user interaction.
Marcus Adeyemi
What is at stake
It replaced First Input Delay because it measures all interactions through the visit rather than only the first, which is closer to how a page actually feels.
The playbook
- Break long tasks into smaller ones that yield to the main thread
- Defer non-essential work until after the interaction has been acknowledged
- Give immediate visual feedback even when processing continues
- Audit third-party scripts, which frequently cause long tasks
- Measure in the field rather than on a fast development machine
Where it goes wrong
Avoid:
- Heavy synchronous work in event handlers
- Large hydration passes blocking interaction
- Third-party scripts running long tasks during interaction
- Assuming a fast machine represents real users
The numbers behind it
| Measure | Figure |
|---|---|
| Good | 200 milliseconds or less |
| Needs improvement | between 200 and 500 milliseconds |
| Poor | over 500 milliseconds |
| Scope | all qualifying interactions during a visit, reported as a high percentile |
| Main cause | long JavaScript tasks blocking the main thread |
| Components | input delay, processing time and presentation delay |
Getting outside help
When to hand it over: Bring in help when INP fails and profiling does not identify a clear cause, when a framework's hydration is the bottleneck, or when third-party code is responsible.
Where this comes from
- web.dev — Interaction to Next Paint
- Chrome for Developers — Main thread profiling
- MDN Web Docs — Long tasks
The figures and practices above come from the sources listed.
Working on something like this?
We take on Performance & Accessibility work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
