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).
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.
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.
Source: https://web.dev/inp/#what's-a-%22good%22-inp-value
Curious how we can improve your performance?
Check the performance of your website using the Core Web Vitals and Lighthouse performance reports.
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 field (RUM data).
Browser Tools:
- Chrome Devtools Lighthouse User Flows
- Web Vitals extension
In the field:
- Treo.sh
- PageSpeed Insights
- Chrome User Experience Report (CrUX)
With Javascript: You can write your own PerformanceObserver to measure the INP or you can use the web-vitals JavaScript library.
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 #
A high Interaction to Next Paint is mainly caused by scripts that are blocking the main thread. The Main Thread is where the browser does most of the work required to display a page. Heavy javascript can block the main thread for a long period of time. Besides JavaScript, CSS also blocks the Main Thread by default.
The most common causes that can lead to a high Interaction to Next Paint are:
- Third Party Scripts
- Unoptimised Javascript bundles
- Framework overhead
- Hydration
- Multiple event handlers
- Complexity in Styles & Layout
- Unused code
- Long javascript tasks
We often find that if we improve Total Blocking Time (TTB) and Time to Interactive, the Interaction to Next Paint also improves.
How can I improve INP in React or Next? #
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 Suspense, you won't need to wait for all the JavaScript to load before you can start hydrating. In this way, components can become interactive faster since the browser does not have to do everything at once. This makes your page more responsive and results in lower FID and INP.
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.
