What is Interaction to Next Paint (INP)?

Interaction to Next Paint (INP) is an experimental metric that measures a web page’s responsiveness throughout all interactions on a page. A low INP ensures that the page will always be reliably responsive. INP is set to become a Core Web Vital in March 2024, replacing the First Input Delay (FID) metric.

An interaction happens when a visitor clicks or taps on a page, resulting in a change in presentation on the screen. INP measures the time between the click and the display. The latency of a single interaction consists of the most prolonged duration of any event that is part of the interaction, where the time is measured from the point at which the user interacted with the page until the next frame is presented after all associated event handlers have been executed.

Why is Google Replacing FID with INP?

First Input Delay (FID) measures the time it takes for the browser to process a user interaction, limited to clicks, key-down, mouse-down, and pointer-down. The time it takes for a user to click on a button and have the button respond is generally blocked by other scripts, so it was considered a good representation of webpage responsiveness and user experience.

However, FID only measured the delay, the time it takes before an interactive element becomes responsive. It did not measure the amount of time until the website could react to those interactions, making FID an incomplete measurement of responsiveness.

On the other hand, INP measures a page’s entire responsiveness, not just the delay. According to Google, “Chrome usage data shows that 90% of a user’s time on a page is spent after it loads. Thus, careful measurement of responsiveness throughout the page lifecycle is important. This is what the INP metric assesses.”

How is INP Measured?

INP is measured in milliseconds. An INP score under 200 milliseconds means that the page is fine. A score between 200 and 500 milliseconds implies that it’s the gray area where it’s not bad but needs improvement. INP scores above 500 milliseconds represent poor responsiveness.

The Interaction to Next Paint can only be measured with field tools. Google measures all real Chrome users’ interactions with a page and stores them in the Chrome User Experience Report (CrUX) dataset. The CrUX dataset is the official dataset for the Core Web Vitals. You can get the official INP metrics in PageSpeed Insights, the CrUX dashboard, and Google BigQuery.

What Does This Mean for Publishers and SEO?

Publishers, developers, and SEOs already working to speed up website performance should see positive scores with INP. The usual suspects of scripts taking a long time to load and become ready to function, taking too long to fetch a resource, and the time spent parsing the CSS and HTML to display the website appropriately all contribute to INP.

E-commerce shops may want to consider what functionalities are critical for users to start shopping on a page, what scripts are unnecessary, and what functionality shoppers won’t miss if removed.

INP is a more comprehensive measure of webpage responsiveness. It captures the delay before an interactive element becomes responsive and the time it takes for the website to react to those interactions. This makes it a more accurate representation of the user experience and a valuable metric for publishers, developers, and SEOs to optimize.

How to Improve INP?

Improving INP involves optimizing three key areas: input delay, processing time, and presentation delay.

1. Minimize the Input Delay:

Input delay is when the user interacts with the page and when event handlers execute. This delay can be long, depending on other activities on the page. To reduce input delay, keep the main thread as accessible as possible. This can be achieved by:

• Remove unused code through a process called tree shaking and code splitting.
• Load non-essential code during browser idle.
• Identify slow scripts that require a lot of resources and rewrite the code to make it more efficient.
• Ensure your page is ‘easy to render.’ Avoid large DOM sizes, too many or massive images, videos, CSS animations, etc.

2. Minimize the Processing Time:

Processing time is the total time it takes to execute code in associated event handlers. When a visitor acts like sending a form or adding a shopping item to a basket, do not wait for the server-side confirmation but provide immediate feedback.

3. Minimize Presentation Delay:

Presentation delay is when event handlers have finished executing and when the browser presents the next frame. When the page needs to be updated, the part of the page that needs to be updated will be re-rendered. The browser will then paint the new content and send it to the presentation part of the browser. Some (poorly coded) SPA environments will re-render too much content after the interaction. For example, when you update a counter, ensure you update only the counter and not the entire component.