Interaction to Next Paint (INP): what is it?
Interaction to Next Paint (INP) is a field (Lab) metric that measures responsiveness , and will officially replace FID in Core Web Vitals in March 2024. INP records the latency of all interactions throughout the lifecycle of a web page. The highest value of these interactions—or close to the highest for pages with many interactions—is recorded as the page’s INP. A low INP indicates that the page is reliably responsive at all times. Responsiveness —how quickly a page responds to a user’s interactions—is crucial to the quality of the user experience. Chrome user data shows that about 90% of the time a user spends on a web page is after it has loaded. It’s important to carefully measure responsiveness, especially as more and more websites rely on JavaScript to provide interactive features. This is what the INP measures, which encompasses the entire life cycle of a page. When responsiveness is good, pages respond quickly to interactions they elicit. When an application reacts to interactions, the resulting changes in the user interface generate visual feedback. Visual feedback is what tells us whether, for example, an item we requested to add to the online shopping cart is actually added, whether the content of a login form is authenticated by the server, whether a mobile menu has opened, etc. In the video below, the example on the right shows visual feedback that indicates an image is being retrieved from the network. This visual feedback highlights the importance of communicating the outcome of an interaction.Visual representation of good or poor responsiveness, when a full-size image is loaded from a media gallery. On the left, the responsiveness is poor because the image has to be downloaded before being displayed, which involves a significant delay. On the right, the responsiveness is good because a loading indicator appears immediately after the image is requested, and the requested image eventually replaces it.
Now let’s look at how the INP works, how to measure it, and make suggestions for improving it, because good responsiveness is imperative for a good user experience.
What is Interaction to Next Paint (INP)?
INP is a metric that aims to represent the overall interaction latency of a page by selecting one of the longest interactions that occur when a user visits a web page. For pages with fewer than 50 total interactions, the INP is the interaction with the longest latency. For pages with many interactions, the INP is most often the 98th percentile of interaction latency.
We will detail later why the longest interaction is not always selected for each page.
An interaction is a set of related events that are triggered by a user action. For example, tap interactions on a touchscreen device include multiple events, such as pointerup , pointerdown , and click , all of which can contribute to the overall latency of the interaction.
The latency of a single interaction is the longest duration of any event that is part of the interaction, with the duration measured from the time the user interacted with the page until the next frame is presented after all associated event handlers have executed. The duration is the sum of the following time intervals:
- Input delay , which is the time between when the user interacts with the page and when the event handlers execute.
- The processing time , which is the total time it takes to execute the code in the associated event handlers.
- The presentation delay , which is the time between the end of the execution of the event handlers and the presentation of the next frame by the browser.
We will see a little later and in detail how the INP is measured .
What is a good Interaction to Next Paint (INP)?
Assigning “good” or “bad” labels for responsiveness measurement is complex. On the one hand, developing user experiences that deliver good responsiveness is important. On the other hand, you need to consider that device capabilities vary widely, and set achievable targets for low – end devices.
This is why a responsiveness metric should be appropriate for broad use cases.
To ensure you are meeting your goals, the right threshold to measure is at the 75th percentile, looking at field data , segmented between mobile and desktop devices :
- An INP less than or equal to 200 milliseconds means that your page has good responsiveness.
- An INP greater than 200 milliseconds and less than or equal to 500 milliseconds means that your page responsiveness needs improvement .
- An INP greater than 500 milliseconds means that your page responsiveness is poor .
Note that Interaction to Next Paint (INP) is an evolving metric and these thresholds may change.
What is an interaction?
The phases of a single interaction. Input delay occurs from the moment an input is received, and can be caused by factors such as blocking tasks on the main thread. Processing delay is the time it takes for the interaction’s event handlers to execute. When execution is complete, we then enter presentation delay, which is the time it takes for the next frame to be rendered and displayed.
When an interaction occurs with a web page, the engine of that interactivity is often JavaScript – although browsers provide interactivity through non-JavaScript-powered controls, such as checkboxes, radio buttons, the HTML <details> element , etc. In terms of the INP, an interaction manifests itself as one of the following events:
- Click on an interactive element with a mouse.
- Tapping an interactive element on a device with a touchscreen.
- Press a key on a physical keyboard or on-screen keyboard.
An interaction can consist of multiple events. For example, a keystroke consists of the keydown and keyup events . Tapping interactions contain the pointerup and pointerdown events . All events in an interaction are part of what is called a logical user interaction. As you may recall, every interaction consists of three phases: input delay , processing time , and presentation delay .
The duration of event callbacks associated with an interaction is the sum of the times required for these three phases . The event with the longest duration in the user’s logical interaction is recorded.
Representation of a more complex interaction. The first part of the interaction receives input when the user clicks a mouse button. However, before the user releases the mouse button, an image is rendered and displayed by the browser. When the user releases the mouse button, another series of input delay – processing time – presentation delay phases must occur before the next elements are displayed. The longer of the two is recorded as the interaction latency
As with Cumulative Layout Shift (CLS), INP is calculated when the user leaves the page, giving a single value that represents the overall responsiveness of that web page throughout its lifecycle. If in the high percentile, page interactions are processed quickly, this means that the interactivity of pages in all lower percentiles is also good.
Why doesn’t INP always take into account the worst latency?
For pages that offer relatively few interactions, the worst interaction, the one with the highest latency, can safely be used to define the Interaction to Next Paint.
However, not all web pages are the same. Some require more interactivity than others, for example a text editor or video game application versus a blog or news site.
For pages with a very high number of interactions, looking at the worst interaction can be misleading. Occasional interruptions in interactivity occur even on websites with good interactivity, and these interruptions should be ignored. By focusing on a high percentile – but not the highest in all cases – it is possible to properly assess whether the vast majority of interactions on a page are processed in a timely manner. The table below summarizes how latency following an interaction is assessed, based on the number of interactions on the page.
How is Interaction to Next Paint (INP) different from First Input Delay (FID)?
While Interaction to Next Paint (INP) takes into account all interactions on a web page, First Input Delay (FID) only takes into account the first interaction . It also only measures input delay, not the processing time of event handlers or the time it takes for subsequent elements to appear on the page.
Since FID is also a measure of responsiveness during loading , the reasoning behind it is that if the first interaction with a page during the loading phase has little to no perceptible input delay , the page made a good first impression .
Also, NPI is not limited to first impressions. It covers all interactions that can occur between the moment the page starts loading and the moment the user leaves the page. By sampling all interactions, responsiveness can be assessed comprehensively. This makes NPI a more reliable indicator of responsiveness than FID.
This is why it is best to think of INP as similar to Cumulative Layout Shift (CLS) , in that it is a metric that is constantly changing and updating throughout the page lifecycle. As with CLS, the INP value is only recorded from the moment the user leaves the page.
INP: what to do if there is no interaction?
A web page may be loaded, but not interacted with. There may be several explanations:
- A page is loaded, but the visitor is distracted and does not use it.
- A page is loaded, the user has scrolled (which is not an interaction that the INP considers), but the user does not click anywhere or use the keyboard. The useful part of the page that the user was looking for may not have required any interaction to reach.
- The page is accessed by a robot (e.g., a search engine robot or a headless browser ) that has not been programmed to interact with the page.
In such cases, no INP value will be reported.
How to measure Interaction to Next Paint (INP)?
INP can be measured with both field data and lab data (with some effort), and you have different tools at your fingertips to do so.
Note that the best way to measure your website’s NPI is to collect data from real users in the field (Field data). If you are used to relying on lab data to evaluate your performance, take the time to read this article which explains the differences between Field data and Lab data .
Field data tools for measuring INP
- PageSpeed Insights
- Chrome User Experience Report (CrUX)
- via BigQuery in CrUX dataset, table experimental.interaction_to_next_paint
- CrUX API via experimental_interaction_to_next_paint
- CrUX Dashboard
- web-vitals JavaScript library
Lab data tools for measuring INP
- Lighthouse Panel in DevTools, available in “Timespan Mode”
- Lighthouse NPM module
- Lighthouse User Flows
- Web Vitals extension for Chrome
Measuring INP in JavaScript
Writing your own PerformanceObserver to measure INP can be complicated.
To measure INP in JavaScript, web-vitals JavaScript library is recommended, which exports an onINP function and does this job for you.
Retrieving INP data is possible with web-vitals version 3 (beta version), which can be installed via the command line:
[pastacode lang= »markup » manual= »npm%20install%20web-vitals%40next%20–save » message= » » highlight= » » provider= »manual »/]
You can retrieve the INP of a web page with the onINP method:
[pastacode lang= »markup » manual= »import%20%7BonINP%7D%20from%20’web-vitals’%3B%0A%0AonINP((%7Bvalue%7D)%20%3D%3E%20%7B% 0A%20%2F%2F%20Log%20the%20value%20to%20the%20console%2C%20or%20send%20it%20to%20your%20analytics%20provider.%0A%20console.log(value)%3B%0A% 7D)%3B » message= » » highlight= » » provider= »manual »/]
Like other methods exported by web-vitals , onINP accepts a function as an argument, and passes the metric data to the function you provide it. From there, you can send this data to a collection point for further analysis.
See the onINP() reference documentation for additional usage instructions.
Be careful though, collecting INP data in the field only works on browsers that fully support the Event Timing API , including the interactionId property .
Measuring INP by yourself in JavaScript is not a trivial matter. For best results, it is highly recommended to use the web-vitals JavaScript library . However, if you want to get an idea of what the longest interactions on your page look like, you can copy and paste the JavaScript snippet below into your browser’s developer tools console and modify it if necessary.
JavaScript snippet to evaluate latency during interactions in a console
[pastacode lang= »javascript » manual= »let%20maxDuration%20%3D%200%3B%0A%0Anew%20PerformanceObserver(list%20%3D%3E%20%7B%0A%20for%20(const%20entry% 20of%20list.getEntries())%20%7B%0A%20%20%20%2F%2F%20Comment%20this%20out%20to%20show%20ALL%20event%20entry%20types%20(useful%20e.g .%20on%20Firefox).%0A%20%20%20if%20(!entry.interact ionId)%20continue%3B%0A%0A%20%20%20if%20(entry.duration%20%3E%20maxDuration)%20%7B%0A%20%20%20%20%20%2F%2F% 20New%20longest%20Interaction%20to%20Next%20Paint%20(duration).%0A%20%20%20%20%20maxDuration%20%3D%20entry.duration%3B%0A%20%20%20%20% 20console.log(%60%5BINP%5D%20duration%3A%20%24%7B entry.duration%7D%2C%20type%3A%20%24%7Bentry.name%7D%60%2C%20entry)%3B%0A%20%20%20%7D%20else%20%7B%0A%20 %20%20%20%20%2F%2F%20Not%20the%20longest%20Interaction%2C%20but%20uncomment%20the%20next%20line%20if%20you%20still%20want%20to%20see%20it.%0A% 20%20%20%20%20%2F%2F%20console.log(%60%5BInt eraction%5D%20duration%3A%20%24%7Bentry.duration%7D%2C%20type%3A%20%24%7Bentry.name%7D%60%2C%20entry)%3B%0A%20%20%20 %7D%0A%20%7D%0A%7D).observe(%7B%0A%20type%3A%20’event’%2C%0A%20durationThreshold%3A%2016%2C%20%2F%2F%20Minimum% 20supported%20by%20the%20spec.%0A%20buffered%3A%20true%0A%7D)%3B » message= » » highlight= » » provider= »manual »/]
How to improve Interaction to Next Paint (INP)
If your website is showing INP values that are outside the “good” threshold, you should obviously determine what you can do to improve these values. High INP values are usually a sign of a heavy reliance on JavaScript , or other non-JavaScript tasks on the Main Thread that may be running concurrently with user interactions.
Improve INP at the beginning of a page load
INP can be a factor during page load, as users may attempt to interact with a page while it is fetching the JavaScript to set up the event handlers that provide the interactivity needed for the page to function.
According to HTTP Archive, Total Blocking Time (TBT, equivalent to FID in Lab data) is twice as correlated with INP as it is with FID. TBT is a lab metric, but if you see high TBT values in Lab tools, it may be a sign that higher INP values will be seen in the field with Field data.
To improve responsiveness while a page is loading, here are some solutions:
- Remove unused code using coverage tool in Chrome’s DevTools.
- Find opportunities to do code-splitting so you can lazyload JavaScript that is not needed for the page to load. Coverage tool can help you with this.
- Identify slow third-party scripts that load when your page starts loading.
- Use a performance profiler to identify long tasks that you could optimize.
- Be careful not to overload the browser once your JavaScript is finished, i.e. not to request a re-render of the component tree, not to decode images that are too large, not to use too many heavy CSS effects, etc.
Improve INP after a page starts loading
Since the INP is calculated from inputs sampled throughout the page lifecycle, it is possible that your site’s INP is influenced by what happens after the page starts loading. If this is the case for your site, here are some possible solutions:
- Use postTask API to properly prioritize tasks.
- Reserve non-essential tasks for when the browser is idle with requestIdleCallback .
- Use a performance profiler to evaluate discrete interactions (e.g., toggling a mobile navigation menu) and find long-running tasks to optimize.
- Audit third-party scripts on your site to assess their impact on the responsiveness of your pages.
Developments in the webperf metric Interaction to Next Paint (INP)
Changes to the INP are reported in this CHANGELOG . If you have any feedback, you can share it in the web-vitals-feedback Google group .
The original version of this article is available on Web.dev . We warmly thank its author, Jeremy Wagner , for allowing us to share it here in French.
Measure your speed with the metrics that match your needs!
Discover the essential webperf metrics to evaluate your loading speed:
