Interaction to Next Paint
There's no single metric that captures all aspects of a website's performance, so a varied of metrics are used. This article takes a look at Google's new Interaction to Next Paint (INP) metric.
What is Interaction to Next Paint?
Interaction to Next Paint (INP) is a web performance metric that measures responsiveness – how quickly a website responds to user interactions like clicks or key presses.
INP currently is an experimental metric developed by Google, and could become one of the Core Web Vitals in the future.
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
- 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.
While Interaction to Next Paint isn't currently one of the Core Web Vitals metrics, it may become a Google ranking factor in the future.
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.
- show a spinner and then do the work in a
- 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.
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:
How to measure Interaction to Next Paint
INP is an experimental metric, and not all tools support it yet.
What is 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.
Interaction to Next Paint in DebugBear
DebugBear shows URL-level INP values from CrUX in the Web Vitals tab of your test results.
Learn more about monitoring Core Web Vitals with DebugBear.
View INP with a Chrome Extension
You can install the Site Speed Chrome Extension to view Core Web Vitals and INP for the website that's currently open.
Origin-level INP in Treo
Interaction to Next Paint is included in Google's CrUX dataset, containing field data collected from Chrome users. Treo Sitespeed can show you what delays users are experiencing on your website.