Interaction to Next Paint (INP) is a metric that reports one of the longest delays between user interaction and the browser response throughout the entire page lifecycle. INP is a Core Web Vital metric.
How to measure Interaction to Next Paint?#
The quickest and easiest way to see Interaction to Next Paint performance for your site is to use our free Core Web Vitals test tool, or use the form below.
Check your Interaction to Next Paint
How is Interaction to Next Paint calculated?#
For Interaction to Next Paint calculation, interaction can be one of the following events:
- clicking on an interactive element with a mouse
- tapping on an interactive element with a touchscreen
- pressing a key (on physical or onscreen keyboard)
An interaction might also consist of multiple events composed of three phases: the input delay, the processing time, and the presentation delay. INP will be calculated as the visitor leaves the page.
Interaction to Next Paint represents the page's overall latency and will also vary depending on how interactive a page (e.g. a reasonably static website versus a highly interactive application) is:
- less than 50 interactions in total: INP is the interaction with the worst latency
- more than 50 interactions in total: INP is most often in the 98th percentile of interaction latency
What Interaction to Next Paint measurement is fast?#
Pages with Interaction to Next Paint lower or equal than 200ms are considered as fast, and above 500ms are considered slow.
How to improve Interaction to Next Paint?#
Interaction to Next Paint improves when the main thread is free to respond quickly to input. Work through these steps:
1. Find your slowest interactions#
Start by identifying which interactions are slow, and on which pages:
- Use field data: Calibre's Real User Monitoring reports INP from real sessions, with attribution to the input delay, processing duration and presentation delay subparts, and the element that was interacted with.
- Reproduce in the lab: Open Chrome DevTools, record in the Performance panel, and use the Interactions track to find long interactions.
- Check field data quickly: Our free Core Web Vitals test shows INP from Google's CrUX dataset.
2. Reduce JavaScript execution and break up long tasks#
Long tasks hold the main thread so it cannot respond to input:
- Yield to the main thread: Break long tasks into smaller pieces and yield with
scheduler.yield()orsetTimeout()so the browser can handle pending input between them. - Ship less JavaScript: Code-split, defer non-critical scripts, and reduce your bundle size.
- Defer non-urgent work: Schedule work that is not time-sensitive with
requestIdleCallback().
3. Optimise event handlers and rendering#
- Keep handlers light: Debounce or throttle expensive handlers, and avoid heavy layout work inside them.
- Avoid large rendering costs: Watch for large DOM sizes and costly style or layout recalculations triggered by an interaction.
- Show feedback first: Update the UI to acknowledge the interaction, then defer heavier work to a later frame.
4. Monitor Interaction to Next Paint over time#
- Track INP in the field: Monitor INP with Calibre's Real User Monitoring and CrUX Dashboard.
- Segment to find regressions: Filter by page, device and element to find the interactions affecting the most visitors.
- Compare against thresholds: INP is good at 200ms or less and poor above 500ms. See Core Web Vitals thresholds.
Browser compatibility#
See the full browser compatibility table on MDN.