It’s about a web performance measurement metric which measures the responsiveness of a web page, i.e. how quickly it reacts to user interaction. The INP (metric developed by Google) is still in an experimental phase and could become one of the Core Web Vitals in the near future.
Core Web Vitals are Google metrics for evaluating the UX (User Experience) of a site. They combine three criteria: LCP, CLS and FID.
While the LCP and CLS vary from site to site, the FID remains virtually the same for 99.9% of websites. In view of this lack of interest, Google thought of replacing it with a more useful criterion. The INP is designated as his future replacement.
In this article, you will learn what INP is and how to use it to improve the responsiveness of your website.
What is Interaction to Next Paint (INP)?
The INP is the acronym for ” Interaction to Next Paint » (Interaction with the following painting in French). To understand the INP, one must first understand what an interaction is.
What is an interaction?
An interaction is a user input and a device response.
With respect to the INP, an interaction corresponds to one of the following actions:
- press a key on the keyboard or on the screen (for touch screens)
- touch an interactive element on a device equipped with a touch screen
- use the mouse to click on an interactive element
An interaction can also group together several events.
A keystroke on the keyboard groups together, for example, lowercase/uppercase events. All elements of an interaction form a logical interaction with the user.
An interaction takes place in three phases.
When the user makes an input, the device first receives the input, performs the requested processing before rendering and painting the next image.
What does the interaction with the following painting contain?
INP is a time measurement metric that separates the time of user interaction and the time of the next UI update.
It is, for example, the time between the moment when the user clicks on a button to change the image and the moment when the new image is displayed.
This time corresponds to the sum of the delays of the three phases of an interaction:
- Entry delay. It groups all the tasks running in the background on the page and which prevents the execution of the event handler. It is the time between the moments of user interaction and execution of event handlers.
- The submission deadline. It corresponds to the time elapsed between the end of the execution of the element handlers and the display of the elements of the page.
How to assess the value of the INP?
It is difficult to assess the responsiveness of a page.
On the one hand, the site must be optimized to provide a good experience to visitors. On the other hand, it must be taken into account that the devices (low-end or high-end devices) that users use to connect do not have the same capabilities.
To make a relevant measurement, it is therefore necessary to define achievable expectations even on low-end devices.
In this order of idea, it is necessary to consider a responsiveness metric suitable for broad use cases.
The INP plays this role perfectly and can be used to assess the responsiveness of a page.
It is obtained by selecting one of the longest interactions produced when a user visits a page. The INP corresponds to the interaction with the worst latency in the case of a page recording less than 50 interactions. For those that record a large number of interactions, its value corresponds to 98e percentile of interaction latency.
It admits three ranges of values which lead to three different conclusions:
- Lent. For values greater than 500 ms, the INP indicates that the page has very poor responsiveness.
- Request for improvement. INP values greater than 200ms and less than or equal to 500ms indicate that the page is moderately responsive, but needs improvement to optimize it.
- Fast. An INP value less than or equal to 200 ms indicates that the page has good responsiveness. The page will therefore respond reliably at all times.
How to measure INP?
Inasmuch as experimental metricnot all measurement tools support INP yet.
It is currently possible to measure it either with laboratory data or with field data. You have a number of tools at your disposal to achieve this.
However, you should know that the best way to measure your website’s PNI is to collect data in the field (Field data), from real users.
Field tools for measuring INP
As field tools, we can cite:
- PageSpeed Insights
- Chrome User Experience Report (CrUX)
- via BigQuery dans CrUX dataset, table experimental.interaction_to_next_paint
- CrUX API via experimental_interaction_to_next_paint
- CrUX Dashboard
Note that collecting INP metrics in the field only works on browsers that fully support the API Event Timing including his property interactionIdpropriety.
Laboratory tools (Lab data) to measure the INP
Here are some tools to choose from:
- Lighthouse Panel dans DevTools, disponible en « Timespan Mode »
- Lighthouse User Flows
- Lighthouse NPM module
- Web Vitals extension pour Chrome
It can be complex to write your own codeto measure INP.
You can then retrieve the INP data with version 3 (beta version) of web-vitals. Here is the command to install it:
npm install web-vitals@next –save
You can then use the onINP method to get the INP of a web page:
import onINP from ‘web-vitals’;
// Log the value to the console, or send it to your analytics provider.
onIP accepts a function as an argument, just like the other methods exported by web-vitals. It will pass the metrics data to the function provided to it. You can then forward this data to an endpoint for data collection and analysis.
Finally, here is some code offered by Jeremy Wagner that you can copy and modify in your browser (if necessary) to get an idea of what the longest interactions on your page look like:
let maxDuration = 0;
new PerformanceObserver(list =>
for (const entry of list.getEntries())
// Comment this out to show ALL event entry types (useful e.g. on Firefox).
if (!entry.interactionId) continue;
if (entry.duration > maxDuration)
// New longest Interaction to Next Paint (duration).
maxDuration = entry.duration;
console.log(`[INP] duration: $entry.duration, type: $entry.name`, entry);
// Not the longest Interaction, but uncomment the next line if you still want to see it.
// console.log(`[Interaction] duration: $entry.duration, type: $entry.name`, entry);
durationThreshold: 16, // Minimum supported by the spec.
How to improve your INP?
If the INP value indicates that your responsiveness is poor or requires improvement, you will need to put in place actions to improve these values.
These can run at the same time as the user’s interactions. The web.dev site offers ways to improve the Interaction to Next Paint (INP).
How to improve your INP when starting the page
The INP can be a factor when starting the page.
To improve the responsiveness of the site when loading the page, you have several options:
- Eliminate unnecessary code with Coverage tool in Chrome’s DevTools.
- Spot slow third-party scripts that load at page load startup time.
- Identify long tasks that you can optimize using the performance profiler.
How to improve the INP of a page after it starts?
The calculation of the INP takes into account data collected throughout the life cycle of the page.
It can therefore also be influenced by events that take place after the start of the page. If your website finds itself in this case, here are some avenues to explore to find solutions to improve your INP:
- Properly Prioritize Tasks with the API postTask
- Utilize requestIdleCallback to postpone non-essential tasks for when the browser is idle.
- Evaluate discrete interactions with a performance profiler (performance profiler) and identify long tasks to optimize.
- Evaluate the impact of third-party scripts on the responsiveness of your pages through an audit.
Why is UX important for SEO?
A good user experience (UX) attracts visitors, reduces bounce rate and sets you apart from your competition.
Google now takes this criterion into account in its positioning algorithm.
It is therefore necessary today to combine UX and SEO to make a difference and improve your positioning in search engine results.
What are Core Web Vitals used for?
Core Web Vitals are Google criteria for evaluating the UX of a website. They include:
- The LCP (Largest Contentful Paint) which measures the loading speed of the pages of the site;
- The CLS (Cumulative Layout Shift) which checks the visual stability of a page;
- The FID (First Input Delay) which measures the reaction of a page when a user presses a button.
Google realized that the FDI criterion was not very relevant. So he decided to replace it with the interaction with the following painting (INP), aperformance indicator (KPI) which measures the responsiveness of a page.
Why improve the INP of your web pages?
Poor responsiveness harms the user experience on your site.
By improving the INP of your web pages, you reduce latency and increase the responsiveness of your site.
As a result, you provide a better experience for your visitors and increase your chances of getting better positioning in search engine results pages (SERPs).