Interaction to Next Paint
Interaction to Next Paint (INP) is a web performance metric that measures responsiveness – how quickly a website responds to user interaction.
INP currently is an experimental metric developed by Google, and could become one of the Core Web Vitals in the future.
What is Interaction to Next Paint?
INP measures how much time elapses between user input and the next UI update. This delay consists of three components:
- Input Delay: any background tasks on the page that prevent the event handler from running
- Presentation Delay: Time spent recalculating the page layout and painting the page elements
This diagram shows an example timeline of different CPU tasks, and how they add up to INP activity.
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.
How to optimize Interaction to Next Paint
To optimize the processing and presentation delay, first identify common user interactions on your page. Then try them out while collecting a Performance recording in Chrome. This will allow you to identify interactions that result in a large amount of CPU activity.
How you then optimize that CPU activity will depend heavily on your app. In a React app, you might be able to avoid unnecessary rerenders of your components. If a lot of CPU activity consists of layout work, check if you can reduce relayouts.
How is INP different from First Input Delay?
There are two differences between FID and INP: FID only measures the initial processing delay and it only counts the first user interaction on the page.
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.
You could script a user interaction in a lab environment. 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.
How to measure INP
INP is an experimental metric, and not all tools support it yet.
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.
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.