Interaction to Next Paint: A UX Guide to Responsive Interfaces
When someone presses “Add to cart,” opens a menu, or submits a filter, the interface should quickly show that the action registered. If the button stays still while the browser works, people may click again or assume the page is broken.
Interaction to Next Paint (INP) measures how responsive a page feels across clicks, taps, and keyboard interactions. It makes responsiveness a user-experience concern as well as a performance metric.
What INP measures
An interaction can trigger multiple event handlers. INP tracks the time from the user's action until the browser can paint the next visual feedback. It is not a measurement of every eventual effect, such as how long a server takes to finish a request after the page has already acknowledged it.
Google's current web.dev guidance uses the 75th percentile of real-world page visits to assess INP, evaluated separately for mobile and desktop. At or below 200 milliseconds is considered good; above 200 through 500 milliseconds needs improvement; above 500 milliseconds is poor.
These thresholds help prioritize investigation, but they do not replace testing the actual interaction. A page can meet a metric threshold while a particular button still feels confusing, and a quick visual response does not guarantee that the user's task completed correctly.
Start with field evidence
Use real-user monitoring or the Chrome User Experience Report in tools that expose field data to identify which page experiences need attention. Separate mobile from desktop and look for the specific route, device conditions, and interaction patterns associated with the poor result.
Field data tells you that users are experiencing a problem; it may not tell you which handler or rendering task caused it. Reproduce the flow with representative data and use browser performance tools to inspect long tasks, scripting, style recalculation, layout, and paint.
Prioritize interactions that block an important user task. A slow navigation menu, form submission, or filter may have more impact than an occasional delay on a rarely used control.
Show immediate feedback while work continues
Some tasks cannot finish instantly. Separate the immediate acknowledgement from the eventual result:
- Change the button or control state as soon as the action is accepted.
- Show a progress or pending state when work continues.
- Disable duplicate submissions only when doing so helps prevent a repeated action.
- Announce meaningful status changes to assistive technology.
- Preserve the user's input if the task fails and provide a recovery path.
This feedback pattern does not make the underlying work faster, but it can prevent the interface from appearing unresponsive while the work continues. Make sure the acknowledgement is truthful: do not show “Saved” before the save completes.
Reduce work on the interaction path
Heavy synchronous JavaScript can keep the browser from painting. Break up long tasks, move non-urgent work off the immediate path, reduce unnecessary component updates, and avoid recalculating large layouts for each input event.
For search and filter controls, debounce expensive queries where appropriate while keeping the control itself responsive. For large data views, update only the affected region or defer non-visible content. For animations, prefer properties that do not repeatedly trigger costly layout when possible.
Measure before and after the change. A code cleanup is not a performance improvement unless it reduces the latency users experience or addresses a verified cause.
Build a repeatable INP review
Include the most important interactions in performance testing: open navigation, change a filter, expand a disclosure, submit a form, and update a complex view. Test realistic data volumes and slower mobile hardware. Compare lab traces with field data instead of treating a single local run as proof of improvement.
For related frontend performance practices, continue with the Angular web performance budget guide, CLS fixes in Angular, and the Angular SSR and hydration guide.