Measure And Optimize Interaction to Next Paint (INP)
Interaction to Next Paint (INP) is a new metric that Google uses to measure how quickly your website reacts to user interactions. It will become one of the Core Web Vitals metrics that impact Google rankings in March 2024.
This article takes a look at what INP measures and what you can do to optimize it.
What is Interaction to Next Paint?
Interaction to Next Paint (INP) is a web performance metric that measures user interface responsiveness – how quickly a website responds to user interactions like clicks or key presses.
Specifically, it measures how much time elapses between a user interaction like a click or key press and the next time the user sees a visual update on the page.
How is Interaction to Next Paint measured?
INP measures how much time elapses between user input, like clicks and key presses, and the next UI update. This delay consists of three components:
- Input Delay: waiting for background tasks on the page that prevent the event handler from running
- Processing Time: running event handlers in JavaScript
- Presentation Delay: recalculating the page layout and painting page content
This diagram shows an example timeline of different CPU tasks, and how they add up to INP activity. Interaction to Next Paint spans the entire time frame from the mouse, touch, or keyboard input up to the point when the next frame is rendered by the browser.
The processing time can be made up of multiple event handlers, for example keydown and keyup events.
What's a good Interaction to Next Paint value?
A good INP is less than 200 milliseconds. An INP over 500 milliseconds is poor.
Interaction to Next Paint will become one of the Core Web Vitals metrics in March 2024 and therefore become a Google ranking factor.
How to optimize Interaction to Next Paint
The best way to reduce INP is reducing the amount of CPU processing that happens on your page. You can also run more of your code asynchronously so that the user gets an immediate UI update even some work is still ongoing.
Optimizing INP involves profiling your own website code as well as reviewing third-party scripts that may make your website less responsive.
The DevTools performance profiler is a great tool to find out what's happening on the page main thread and how you can optimize it.
Identify common user interactions on your page and create a recording of on-page CPU activity that occurs during the interaction. Then you can investigate the interactions with the biggest delay.
Reduce the Input Delay component
To reduce the Input Delay component of INP, reduce and break up background CPU activity on the main thread.
When reviewing lab data you can look at the Total Blocking Time metric to see if there is background activity that would block user interactions.
If third-party code is responsible for background tasks check if the code is configurable to reduce the amount of work or if it's possible to only load the third-party script when necessary.
Reduce the processing component
How you then optimize that CPU activity will depend heavily on your app. You need to investigate where the browser is spending most of its time and optimize those parts.
In a React app you might be able to avoid unnecessary rerenders of your components to speed up your website.
If a lot of CPU activity consists of layout work, check if you can reduce relayouts.
If you need to do heavy JavaScript processing in response to user input, consider updating the UI before starting the CPU task. For example you:
- show a spinner and then do the work in a
setTimeoutcallback - do CPU-intensive work on a separate thread using a web worker
Reduce the presentation delay
The amount of presentation delay will depend on the complexity of the page and how much of the page is updating.
If rendering the page contents is slow, consider only showing important "above the fold" content first to deliver the next frame more quickly.
How is Interaction to Next Paint different from First Input Delay?
There are two differences between FID and INP: FID only measures the initial processing delay while INP measures the full amount of time between user input and the UI update. FID als only counts the first user interaction on a page, while INP looks at (roughly) the worst delay.
First Input Delay measures how long it takes for the browser to start processing user input. The actual time spent responding to the event or updating the UI isn't included.
As the name suggests, FID only considers the first time the user interacts with the page. Especially for pages that stay open for a long time, like single-page apps, this first interaction might not be representative of the overall user experience.
Interaction to Next Paint generally measures the worst input delay on the page. However, if there are many user experiences outliers will be ignored, and Google will measure the 98th percentile of interaction delay. So if the INP on a page is 250 milliseconds, 2% of user interactions had a latency greater than 250 milliseconds.
Is Interaction to Next Paint a Core Web Vitals metric?
INP will become a one of Google's Core Web Vitals metrics in March 2024. At that point it will replace First Input Delay.
Becoming a Core Web Vitals metric means that poor Interaction to Next Paint can impact your Google rankings.
Why is INP a field metric?
The Interaction to Next Paint metric requires user input to measure, and so is generally available in field data collected from real users.
Google collects real user data on INP as part of the Chrome User Experience Report (CrUX).
You could script a user interaction in a lab environment to collect lab data for INP. Keep in mind that each page interaction can have different performance characteristics, depending on what UI element the user interact with and when that interaction happens.
Does INP measure the slowest response on a page?
When a user visits a page they may click on multiple different UI elements. If they are filling out a form they will press many keys on their keyboard. How does INP account for that?
INP will report the slowest 2% of UI responses. Usually that means the worst delay will be reported, but if a page receives a lot of interactions only one of the slowest will be reported.
For example, if a page takes 50 milliseconds to respond to 100 interactions, and then there is one interaction with a 300 millisecond delay then INP will be reported as 50 milliseconds.
However, if there are three 300-millisecond delays then the 98th percentile will be 300 milliseconds, and this will be reported as the INP.
What user interactions does INP consider?
The following interactions are counted for INP:
- Mouse clicks
- Taps (on a touch screen)
- Key presses
The following interactions do not count:
- Hovering
- Scrolling
Changes to the INP definition
Google continuously refines how their Core Web Vitals metrics are defined. If you see unexplained changes to your metrics this may be due to a change in how INP is measured. Check out the INP changelog to see what changes have been made in different Chrome versions.
How to measure Interaction to Next Paint
You can use a number of tools to measure Interaction to Next Paint, for example:
- The DebugBear website speed test
- Google PageSpeed Insights
- Our Site Speed Chrome extension
- The Web Vitals library
Measure Interaction to Next Paint with DebugBear
The free website speed test by DebugBear can show you what Interaction to Next Paint is like for real users on your website.
Simply enter your URL, run the test, and open the Web Vitals tab. There you can find Interaction to Next Paint under the Additional Web Vitals heading.
In addition to looking at the CrUX data for the last 28 days you can also see a history of how INP has changed over the last 25 weeks.
Use the URL and Origin toggle near the top of the page to switch between data for the specific test URL and the whole website.
Learn more about monitoring Core Web Vitals with DebugBear.
Interaction to Next Paint in PageSpeed Insights
The real user section on Google PageSpeed Insights shows the INP metric indicating how quickly the page responds to user interactions.
The metrics shows the 75th percentile. For example, if the INP is 273 milliseconds that means that for the 25% of visitors with the slowest INP the worst delay between input and the next UI update that they experienced was 273 milliseconds.
View INP with the Site Speed Chrome extension
You can install the Site Speed Chrome Extension to view Core Web Vitals and INP for the website that's currently open.
This value will only be available once you've interacted with the page, for example by clicking on it or typing in a text field.
Measure INP with the web-vitals library
If you want to measure INP programmatically with JavaScript you can use the web-vitals library. This allows you obtain measurements from real users and send them back to your analytics provider.
You can load the library with a script tag like this:
<script src="https://unpkg.com/web-vitals@3/dist/web-vitals.iife.js">
You can then use the onINP method on the webVitals object to see when the Interaction to Next Paint value changes.
webVitals.getINP(function(info) {
console.log(info)
}, {reportAllChanges: true});
The value of the INP metric can change through the lifetime of the page as the user continues interacting with it. reportAllChanges ensures that even preliminary values are reported.
In addition to reporting the INP value the web-vitals library also reports a list of entries. These are the individual user interactions that have contributed to the INP score.
{
"name": "pointerdown",
"entryType": "first-input",
"startTime": 20168.80000001192,
"duration": 8,
"processingStart": 20176.30000001192,
"processingEnd": 20176.5,
"cancelable": true,
"target": "(DOM Element Object)"
}
The target tells you what page element the user interacted with.
The startTime is the timestamp in milliseconds when the user interaction occurred. processingStart indicates when the event handler started to run. processingEnd is when the event has been processed.
Monitoring Interaction to Next Paint
Start a free 14-day trial of DebugBear to monitor INP and other Core Web Vitals metrics. Our provides both real-user data from Google and detailed lab reports to help you optimize your website.
