What is Interaction to Next Paint (INP), and how to measure it.
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.
What are the Core Web Vitals?
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.
What's in an interaction?
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:
- A mouse clicks on an interactive element.
- Tapping on an interactive element on a touchscreen device.
- By pressing a key on a keyboard (physical & onscreen).
What's a "good" INP value?
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.
What is the difference between INP and FID (First Input Delay)?
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.
How To measure Interaction to Next Paint
Although INP is still an experimental metric it can already be measured in the lab or in the field.
- Chrome Devtools Lighthouse User Flows
- Web Vitals extension
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.
How can I improve the Interaction to Next Paint
The most common causes that can lead to a high Interaction to Next Paint are:
- Third Party Scripts
- Framework overhead
- Multiple event handlers
- Complexity in Styles & Layout
Not sure if your website is fast enough? Try our Website Performance tool to find out.