How many times have you ever opened a website, clicked on a feature, and experienced a frustratingly slow load time, causing you to leave? In May 2022, Chrome introduced Interaction to Next Paint (INP) to measure the amount of time it takes for a website to respond to a user’s needs.
Although some interactions are more complex, the site should provide visual feedback within the next frame to signal progress. For example, when you want to log in to your account, there is a natural delay, but the site should indicate that it’s searching for your account, assuring you that it will appear in a few seconds. By delaying the visual feedback, users might think that something is broken or the site is not working properly. INP helps measure this part of a user’s experience.
What is INP?
Interaction to Next Paint is a new core web vital metric that measures the interaction’s delay through the lifespan of a user’s visit to a page. The final INP score represents the longest latency that occurs by mouse clicks, tapping and keyboard interactions. These are the direct actions a user takes to navigate and interact with a website.
How does INP work?
As mentioned, INP focuses on how quickly a website responds to user’s action performed on the page.
Here’s how INP works:
- A user interacts with the page by clicking on one of its buttons.
- The browser sends a request to the server for the next content.
- The server sends the next content to the browser.
- The browser shows the new content on the page.
- It also measures the time it took for the content to be shown.
A low INP score shows how responsive the page is, while a high score reflects a significant amount of latency.
As you noticed, INP is a critical measurement for a website. Here are the reasons why:
- SEO: All the web core vitals play an important role in defining the page experience, directly influencing a site’s ranking in search results.
- User experience: INP will help the user have a smoother experience while searching for their needs.
- Reduce the bounce rate: Imagine the frustration of waiting for a button to load when another website offers the same feature with quicker loading times. They will most likely leave the page if they see too much delay, which can negatively impact your site’s performance.
What was used as a web core vital before INP?
Interaction to Next Paint (INP) replaced First Input Delay (FID) as a core web vital. Page interactivity is better understood through INP. Unlike FID, which only measures the time it takes for the browser to respond to the user’s first interaction, INP measures interactivity throughout a user’s entire lifespan on a page.
What are the differences?
Here’s an example of the difference between FID and INP:
You scroll through a page easily and without any problem. You see an image carousel. You click on it and it loads quickly. You want to fill out a form on the website, but this time, whenever you type, there is a half-second delay before your words appear on the screen.
In this case, FID would come back with a positive result. Since you could scroll and click on the pictures without any issues, it might seem like the page is performing well.
However, INP considers the delay encountered while typing. It checks the longest delay that can be experienced on a certain website, highlighting the impact of this response on the user’s overall experience.
What are the similarities?
The interaction time of users is measured by both INP and FID, and they both aim to improve user experience. Also, they both identify delays in user interaction and the responsiveness of that interaction. An INP score and an FID score can be used together to assess a page’s responsiveness. FID provides insight into the response delay of a page immediately after loading, while INP offers a broader perspective on response delays.
What is considered a good INP value?
According to Google, there is an INP threshold that you can check in the table below:
| Threshold value(millisecond) | description |
| 200 | Good respond |
| 200-500 | moderate |
| Above 500 | poor |
As you can see, a good INP value is around 200 milliseconds or less.
How is INP measured?
Google measures INP from browsers anonymously by the single longest interactions that happen when a user visits the page.
The latency between sending the user’s request and receiving the response is divided into 3 parts:
Input delay: It refers to the time interval between the user’s interaction with the page and the start of the execution of related actions or events. This delay includes the following reasons:
- technical delays due to input devices such as mouse
- processing delays in the system
Processing time: When user input is received, the system must process it so that it can determine the appropriate response or action. Processing time refers to the amount of time a server needs to review input data, perform necessary calculations and actions, and provide the desired result or response.
Presentation delay: After the system produces the output or response, there is usually a slight delay before it is presented to the user. This latency includes the time it takes for the system to update the display and provide output to the user interface or output device.
INP measures the time spent on the input delay till the presentation delay.
When the user leaves the site, the measurements are sent to the Chrome User Experience Report (CrUX), which is a collection of real-world performance data from Chrome users.
You can measure a website’s INP value using different field tools, such as:
- Page speed insights: Offers an interface to view INP
- CrUX dashboard: Provides more context of INP score
- Lighthouse tool: Useful for debugging INP
- Core web vitals visualizer: Helps visualize INP
These types of features can provide an insight into how your page is performing and how to optimize latencies.
If a website has fewer than 50 total interactions, INP considers the interaction with the absolute worst delay; if it has over 50 interactions, it ignores the longest interactions per 50 interactions.
What if no INP score was reported?
It is possible for a page that reports back no INP value. A website can be loaded but the user doesn’t click on any bottom or tap. Another reason can be because the user had no interaction with the website and just scrolled through the page.
How to improve interaction to next paint?
Optimizing interaction to next paint is the key to enhancing user experience and reducing delays. Here are some tips on how to optimize INP:
Reduce input delay
- Reduce background CPU activity, such as unnecessary JavaScript execution
- Use total blocking time data to identify background activities
- Reduce impacts of third-party code
Optimize processing time
- Optimize parts that the browser spends most of its time on them
- Reduce unnecessary amount of CPU activity used on layouts
Reduce presentation delay
Simplify page updates by showing important contexts first
General best practices
- Monitor your performance regularly
- Keep track of changes in core web vitals
Final thoughts
Interaction to next paint is a key metric to evaluate the responsiveness of a website to a user’s clicks. It offers a comprehensive view of how quickly a page shows a response to interactions.
As we discussed there are ways to measure INP and improve it. A well-optimized site is more likely to make the user interact and stay more on the page.
