What is Interaction To Next Paint (INP)? How is it Measured?

As days go by and technology advances, distinguishing a healthy website from others becomes increasingly challenging. In the past, merely opening our site was considered a sign of health, but with the advent of mobile devices, ensuring a website is designed to fit all screens has become one of our major health criteria. Today, to ensure the health of our website, we need to align it with numerous metrics. In this context, we will discuss the latest metric, Interaction To Next Paint (INP). Google introduced this metric in March 2024, replacing the First Input Delay (FID) metric.

What is Interaction To Next Paint (INP)?

Interaction To Next Paint can be defined as measuring the time it takes for a website to respond to user actions.

So, what are these responses?

In today’s world, we all spend time on social media applications. Imagine a scenario on Instagram where you liked a photo. When you double-tap the screen, the application responds, and you understand that you have liked the photo. But what if the application responded three seconds after you double-tapped the screen? In this case, we would think there was an error, and we might restart the application or press the like button several times. In short, this would result in a very poor user experience. This is precisely what Interaction To Next Paint measures. The faster we show a result to a user action, the better INP experience we provide.

How is INP Measured?

Continuing with our Instagram scenario example, INP measures the time elapsed between the moment a user initiates the like action and the moment the application displays the like result. This elapsed time represents your INP score. In a more general sense, it is the time between when a user initiates an action and when they see the result of that action.

How Can I Learn My Site’s INP Score?

You can instantly measure your site’s INP score using the Google PageSpeed tool at https://pagespeed.web.dev. As Observer, we, on your behalf, measure your website’s Google PageSpeed score every day and provide you with a detailed report.

What Should Be a Good INP Score?

According to Google’s data:

• If your site’s INP score is 200ms and below, it indicates a good INP score for your site.
• If your site’s INP score is between 200ms and 500ms, it suggests that your site’s INP score is at an improvable level.
• If it is 500ms and above, it indicates that your site’s INP score provides a poor user experience.

How to Optimize INP?

Let’s consider a different scenario this time. Suppose you have an e-commerce site, where users add a product to their cart by pressing the ‘Add to Cart’ button when they like a product. When they press the button, your application sends a cart addition request to the backend, and the backend processes the cart addition operations, informing the front-end application about the result. The front-end application then displays a message like ‘added to the cart’ if the operation is successful or ‘an error occurred’ if it fails. Although everything may seem normal so far, this is actually a potential INP problem. The issue arises when the user has to wait for the results of the operations happening in the background the moment they press the ‘Add to Cart’ button. While waiting, the user may think there is an error and repeatedly press the ‘Add to Cart’ button, adding the product to the cart multiple times. To avoid giving the user this impression, we should show a prompt indicating that we are processing their request without delay the moment they press the button. This could be, for example, a loading animation. We can then proceed with the operations in the background. In summary, if we design our interfaces to respond to each user action without waiting for the user, we will have an optimized site in terms of INP.