What is Interaction to Next Paint (INP), and how to measure it.
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.
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 is interaction to the next paint? #
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:
- Input Delay: The time between when the user interacts with the page and when event handlers execute.
- Processing Time: The total amount of time it takes to execute code in the associated event handlers.
- Presentation Delay: The time between when event handlers have finished executing and when the browser presents the next frame.
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" Interaction to Next Paint score? #
The INP metric is classified into three categories:
- An INP of 200 milliseconds or less is considered good, indicating that the page has good responsiveness.
- An INP between 200 and 500 milliseconds means that the page's responsiveness needs improvement.
- An INP above 500 milliseconds is classified as poor, showing that the page has poor responsiveness.
Source: https://web.dev/inp/#what's-a-%22good%22-inp-value
Curious how we can improve your performance?
We help businesses worldwide increase customer engagement and sales by making their websites faster.
What is the difference between first input delay and interaction to next paint? #
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 #
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:
- 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.
Improving INP can be a complex task as even one slow interaction can affect the entire INP metric. Here are some strategies for improvement:
- Minimize the input delay: Try to prevent long tasks on the main thread, especially during the page startup phase. This can involve removing unused code, loading non-essential code during browser idle times, identifying slow scripts and making them more efficient, and ensuring your page is 'easy to render'.
- Minimize the processing time: Ensure the page responds directly to user input by providing immediate feedback. For example, when a user submits a form or adds an item to a shopping cart, don't wait for the server-side confirmation, but provide immediate feedback.
- Minimize presentation delay: When the page needs to be updated, try to update only the necessary parts of the page and avoid re-rendering too much content. This can help keep things simple and improve the INP metric.
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.
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.
