Interaction to Next Paint (INP) was initially introduced by Google as an experimental field metric to measure load responsiveness. INP tracks the latency of user interactions during the entire page lifecycle, providing insights into how quickly a page responds to user input. It measures the time from the initial input to the next frame being painted and the execution of event handlers. While INP started as an experimental metric, it will transition to become a Core Web Vital metric by March 2024. This means that INP will play a significant role in assessing and improving website performance and user experience.
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.
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.
Google's Search Console is now sending out valuable notifications about INP - Core Web Vitals issues.
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.
The Interaction to Next Paint (INP) is a web performance metric that measures the latency of a webpage's response to user interactions. Essentially, it represents the time it takes for a page to visually respond after a user interacts with it, such as by clicking or tapping.
The INP metric is calculated as the highest duration of all user interactions with the page, more specifically, the time between the interaction and the final presentation change on the page. For pages with less than 50 interactions, INP is determined by the interaction with the worst latency. For pages with many interactions, INP is usually the 98th percentile of interaction latency.
An interaction's latency is composed of three components:
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.
The INP metric is classified into three categories:
Source: https://web.dev/inp/#what's-a-%22good%22-inp-value
We help businesses worldwide increase customer engagement and sales by making their websites faster.
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.
Measuring INP requires field tools that capture real user interaction data. Google measures all the interactions that real Chrome users have with a page and stores it in the CrUX dataset, which is the official dataset for Core Web Vitals. You can get the official INP metrics in PageSpeed Insights or the CrUX dashboard and Google BigQuery.
Alternatively, you can also use:
Browser Tools:
In the field:
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.
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.
Improving INP can be a complex task as even one slow interaction can affect the entire INP metric. Here are some strategies for improvement:
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 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.
Read more in our article about How to solve INP issues
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.