Interaction to Next Paint

Interaction to Next Paint (INP) is the newly introduced Core Web Vitals metric for assessing a website’s interactive responsiveness. In May 2022, Google introduced INP as the new metric to address the limitations of the Core Web Vitals metric, First Input Delay (FID), which measured the responsiveness of web pages. By March 2024, after nearly two years of testing, INP was officially added as a stable Core Web Vital metric for assessing web page responsiveness, replacing FID.

This article examines INP in detail, answering why it replaced FID and strategies for optimizing INP to get a better score and improve your website SEO.

Summary of key Interaction to Next Paint (INP) concepts

Below is a summary of the key concepts that are covered in this article:

What is Interaction to Next Paint (INP)?

Interaction to Next Paint (INP) is a Core Web Vitals metric measuring a web page’s responsiveness to user interactions. Specifically, it assesses the time between a user interaction and when the website returns feedback. The following are the core user interaction types INP considers:

• Clicking a mouse button.
• Pressing a key on a physical or on-screen keyboard.
• Tapping on a touchscreen device.

Each interaction consists of a set of events. For instance, “keypress” interactions on a keyboard include multiple events, such as keydown, keypress, and keyup. The single longest event within that interaction determines the total latency. The event delay consists of the following components:

• Input delay – the time between when the user initiates the interaction on the page and when the associated actions or event callbacks are executed.
• Processing time – the time required for the systems to process input data and perform relevant operations on it.
• Presentation delay – the time between executing event handlers and the browser presenting a response to the user.

Why did Google replace FID with INP?

First Input Delay (FID)  measures the time it takes for the browser to start processing an interaction (click, tap, or keypress) initiated by a user. While it is a good metric for addressing the user experience, it does not capture the entire responsiveness of the page as it relates to user interactions.

To address this shortcoming, the Google Chrome Speed Metric team considered the creation of a new metric that captures the following:

1. The responsiveness of all user interactions, not just the first one
2. The full duration of each event in the interaction (not just the delay).
3. Group events from the same user interaction and define their latency by the longest duration of any events in the interaction.
4. Generate an overall score for all interactions on a web page throughout its entire lifecycle.

The outcome of this review process is Interaction to Next Paint, a more holistic user-centered metric that assesses the latency of all click, tap, and keyboard activities that take place throughout a user visit to a website. It determines how responsive a web page is to overall user interactions. 

We have summarized the differences below.

How to measure Interaction to Next Paint

Gathering field data from Real User Monitoring (RUM) is the ideal way to measure INP because it captures real user browsing experiences. Real user monitoring tracks live user actions unobtrusively, observing both people and systems in the background. It offers contextual data, emphasizing particular interactions responsible for INP values and providing information on problems that testing might overlook. You can also examine how your website functions on various devices and internet speeds with RUM data.

Below are some tools that leverage the Chrome User Experience (CrUX) report to get INP value from a detailed real user experience perspective.

WebPageTest

The following example guide will show you how to measure INP with WebPageTest:

1. Navigate to https://webpagetest.org/
2. To get the INP, select the web vitals test type from advanced testing.
3. Enter the web page URL you want to test. (for this example, this URL was used)
4. Select the test configuration you want. (which can either be Mobile or Device)
5. Start the test and wait a few seconds for the final results.
6. In the View options, change to the Performance Summary view. You will find INP under the Real-World Usage Metric lined up with other Core Web Vitals metrics.

PageSpeed Insights

To measure INP using the PageSpeed Insights tool, enter the website URL and click the Analyze button. You can also navigate across different device types to view the results.

However, while tools leveraging CrUX can provide INP values and help identify interaction issues, they cannot pinpoint the exact source of the problem. This is where a RUM solution like Catchpoint Real User Monitoring becomes important. It offers full visibility into the responsiveness of web pages and details about individual user interactions, enabling you to attribute INP values to specific interactions and identify areas needing optimization.

What is a good INP score?

A good Interaction to Next Paint score ensures a responsive and enjoyable user experience. According to Google, a score of 200 milliseconds or less is considered good. Measuring the 75th percentile of page loads across mobile and desktop devices is recommended to ensure most users have a positive experience.

An INP score between 200 and 500 milliseconds is categorized as “Needs Improvement,” while a score above 500 milliseconds is considered “Poor.” As INP worsens from the Good to Poor thresholds, it can gradually impact your site’s SEO ranking and overall user satisfaction.

The business impact of  INP: A case study

RedBus is an online bus ticketing platform based in India, with operations in other countries like Indonesia, Malaysia, Singapore, Peru, and Columbia. A case study done by Google claims that RedBus experienced a 7% increase in sales by optimizing its website’s INP.

RedBus set out to improve the INP of their website to achieve the following:

1. Address interaction latency regardless of the internet speed and device capabilities.
2. Make interactions as quick as possible.
3. Ensure API responses are lightweight for fast data transfer to the front end.

The company found out that the date change interaction on the search page was slow. Likewise, the user scrolling through the fares triggers an event listener that schedules several tasks and reduces interaction latency. Both issues were leading to a poor INP on the search page.

The company took some steps to mitigate these issues on the search page. They debounced the scroll event handler to reduce the number of fires triggered by event listeners. Additionally, they fetched new batches of results on the second-to-the-last card to trigger lazy loading much earlier and reduced fetches from 30 to 10 results per network. This resulted in a significant reduction in the INP ranges from 870 – 900 to 350 – 370.

Despite the improvement, there were still issues with the interactions on the search, which were primarily triggered by the change event in the input fields on the page. 

To optimize this situation, RedBus kept track of input component states locally, syncing them only in response to blur event fires from inputs. This greatly reduced the amount of re-rendering on the user interface. The page’s INP improved by 72%, giving users a more seamless experience, and the business experienced an overall 7% increase in sales.

How to optimize INP

You can implement the following strategies to boost your INP score.

Minimize long input delay

Input delay is the time between when the user first initiates an interaction and when the corresponding event callbacks start to execute. Although this is the first stage of the interaction-to-response process, you want to ensure that it happens as fast as possible.

Some of the strategies you can put in place to address long input delays include:

Avoid recurring timers

Javascript timer functions like setTimeout, and setInterval are not necessarily bad in themselves. If you need to use them, ensure they are not recurring and minimize the processes running in them as much as possible so they don’t get in the way of interactions.

Debounce input handlers

You can debounce input handlers to limit the amount of event callbacks that get executed within a given period. This avoids interaction overlapping especially when users are making multiple interactions within a short time,

Break up long tasks

Long tasks blocking the main thread during interactions impact the input delay. Ensure the work going on in the tasks is as little as possible, so the main thread is light, and interactions happen faster.

Optimize event callbacks

You have to ensure that the event callbacks triggered in response to a user interaction are executed quickly. The event callback should be doing as little work as possible. The way to achieve this is by yielding the main thread, so that it temporarily pauses a task’s execution and lets other tasks run.

Additionally, you can break up event callback work into separate tasks to avoid long tasks blocking the main thread. The setTimeout function is one way to do this, as it runs the callback in a new task.

Prioritize rendering work so event callbacks run only the essential logic for the next frame’s visual updates, deferring other tasks. This keeps callbacks light and improves rendering time.

Reduce presentation delay

Presentation delay is the period between when the event callbacks finish executing and when the browser paints the next frame. To avoid frame delay ensure that the DOM size is minimized as much as possible. Large DOM sizes typically take more time to render and can slow down presentation. You can also lazily render HTML using the CSS content-visibility property. Doing this will yield a lower rendering time and improve INP.

Summary

Interaction to Next Paint is the latest addition to the Core Web Vitals, replacing First Input Delay. Unlike FID, which only measures the delay of the first input, INP provides a comprehensive assessment of the entire user experience by evaluating the responsiveness of all interactions throughout a user’s visit to a page.

This shift makes INP unique and a more reliable metric for understanding and optimizing web performance. Web developers can continuously monitor and iterate INP optimization to better identify improvement areas, ultimately enhancing their overall performance and SEO ranking.

FAQs