Interaction to Next Paint (INP) is an experimental field metric developed by Google that measures load responsiveness. INP records the latency of all interactions throughout the entire page lifecycle. In other words, how fast a page reacts to user interaction. It captures the full event time, from initial input until the next frame is painted and event handlers have run. For pages with many interactions, it uses the maximum duration with some approximations.
The Interaction to Next Paint (INP) metric helps measure your user's impression of your site's responsiveness. If responsiveness is good, pages react quickly to interactions made with them. In response to user interaction, a page will display visual feedback. This feedback lets us know, for example, if a video starts to play, if a shopping cart item has been added, if input on a form field is valid, if a modal opens, and so on.
It is crucial to start measuring INP on your website because there is a possibility that INP will be added to Core Web Vitals and/or will replace FID.
The purpose of this article is to explain how Interaction to Next Paint works, how to measure it, and what can be done to improve it, since responsiveness is critical for good user experiences.
The Core Web Vitals are a set of metrics that measures the loading speed, interactivity, and visual stability of your website. Read this article to learn more about the Core Web Vitals.
When a user interacts with a website, they expect their actions to result in changes to the website. A recent study indicates that any user input that takes longer than 100 milliseconds is considered slow. Therefore, it is important to identify interactions that did not meet those criteria.
Each interaction consists of 3 phases: the input delay, the processing time, and the presentation delay. The time involved for all three phases of an interaction is the duration of its associated event callbacks. The event with the longest duration in the logical user interaction is recorded.
An interaction is triggered when:
If the INP is low, the page was able to respond with visual feedback quickly for most interactions. This is the time it takes for the browser to show a visual update after the first event.
It is considered good to have an INP of 200 milliseconds or less. When a page's responsiveness is between 200 and 500 milliseconds, it needs improvement. Whenever a page's responsiveness exceeds 500 milliseconds, it is considered poor.
Check the performance of your website using the Core Web Vitals and Lighthouse performance reports.Do the test
INP measures all interactions with a page during the whole session, while First Input Delay only measures the first interaction with a page. Instead of only measuring input delay, INP also measures the processing time for event handlers and the time it takes to paint the next frame.
FID is calculated after the first interaction with the page, but INP is calculated after the user leaves the page, resulting in one value that represents the overall responsiveness of the page.
Also part of the "Load responsiveness" metric, First Input Delay focuses on the first impression. The rationale behind this is that if the first interaction has no delay, then the user will have a good first impression.
Although INP is still an experimental metric it can already be measured in the field (RUM data).
In the field:
For more information on using onINP(), see the reference documentation.
And there’s also a code snippet available for logging interaction latency to the console.
The most common causes that can lead to a high Interaction to Next Paint are:
We often find that if we improve Total Blocking Time (TTB) and Time to Interactive, the Interaction to Next Paint also improves.
With features like selective hydration and startTransition, React 18 make things more interactive. Concurrent React prioritises what you interact with and is interruptible if something higher priority happens.
Using these API's, you will be able to improve INP during page startup as well as after page startup.
Not sure if your website is fast enough? Try our Website Performance tool to find out.
You can get more business by creating happy customers by giving them a good user experience. Start now and request a performance audit.