Lighthouse: Interaction to Next Paint

Overview

Interaction to Next Paint (INP) is Google's new responsiveness field metric, first introduced in 2022.

After initially being an experimental metric, it subsequently evolved to be a stable/live Web Vital in 2023 and replaced First Input Delay (FID) in Google's Web Vitals set.

INP is a field-only metric and was developed to measure how quickly your page "visually responds" to user input overall.

While most other timings focus on the initial page load, INP looks at how responsive your page is after the initial page load.

A low INP timing indicates that your page is quick to visually respond to user interactions.

What does Interaction to Next Paint measure?

According to Google: "INP observes the latency of all interactions a user has made with the page, and reports a single value which all (or nearly all) interactions were beneath. A low INP means the page was consistently able to respond quickly to all - or the vast majority - of user interactions."

Google's Chrome usage data suggests that 90% of a visitor's page is spent after the page loads.

INP measures how much delay there is between a user input and the final outcome of all interactions, not just the first interaction.

Let's take a look at an example of poor vs good responsiveness on mobile. In both cases, the visitor taps on the green colour option for a product:

The experience on the left is a poor response because nothing appears to happen until the preview suddenly changes to the green shirt.

The experience on the right is a good response, as it immediately displays loading dots indicating that the page is doing something. When the preview is ready, it then appears into view.

The goal of INP is to ensure that your page "paints" the next frame as soon as possible after the visitor initiates a typical interaction (e.g., adding product to cart, opening a navigation menu, pressing play button on a video, etc.).

How is INP calculated?

When a visitor accesses your site and starts interacting with it (e.g., button clicks, screen taps, keyboard scrolls, etc.), Chrome starts recording how long your page took to "visually" respond to each interaction.

Chrome keeps track of this duration for all such user interactions until the visitor leaves the page - The slowest interaction is typically reported as the INP value (Durations under 40 ms are generally ignored).

Here are some typical interactions that a user might do during a visit. Adding a Related Product to the cart would be the INP as it took the longest (575ms)

For example, if a user has added an initial product to cart (an interaction that took 350ms), and then the user added another product to the cart, but the browser now took 575ms to respond visually, then 575ms would likely be reported as the INP since it represents the slowest user interaction.

INP Caveats

Google Chrome only considers the following interaction types for measuring INP:

• Mouse clicks
• Screen taps (for touchscreen devices)
• Keyboard presses (both physical and onscreen)

Note that scrolling with the mouse is not considered an interaction, but scrolling with the keyboard involves a keystroke, which can trigger other events that INP does measure.

Overall, INP aims to reflect how quickly your website responded to user interactions throughout your visitors' visits, but it has some caveats to keep in mind:

• It only provides a single timing - the slowest interaction on your page
• It doesn't tell you specifically what the slowest interaction on your page was
• It is a field metric that will take time to update (up to 28 days)

Why did INP replace FID in the Web Vitals set?

Previously, FID was the Web Vital that was measured by Google and included in the Chrome User Experience Report (CrUX) dataset.

However, since March 2024, INP has replaced FID as the stable/live Web Vital, joining Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS)

According to Google: "While FID may be a good starting point for measuring a portion of the user experience, it does not capture the full story and INP is meant to better represent how responsive your page is."

INP replaced FID due to the following limitations:

• FID only measured the delay before processing started.
  • Not the total time it takes to respond to user input.
• FID did not include the time spent running those event handlers.
• FID did not account for any work done after by the browser to update the screen.

Interaction to Next Paint's effect on your Performance Score

INP is a field-only metric that cannot be measured in the lab by GTmetrix, but is available in the CrUX tab of the GTmetrix Report.

Consequently, it does not contribute towards your Performance Score.

However, Total Blocking Time (TBT) is used as a proxy for INP in lab conditions and accounts for 30% of your total Performance Score, making it the most important metric to optimize.

Thresholds for Interaction to Next Paint

Keep in mind that INP is a field-only metric so Google uses three thresholds to categorize how well your page performed on this metric.

Google's thresholds for INP scores are, as follows:

• Good = INP between 0 and 200ms.
• Needs improvement = INP between 200ms and 500ms.
• Poor = INP of 500ms or higher .

How to improve Interaction to Next Paint?

As mentioned previously, it is not possible to measure INP in the lab in GTmetrix, but you can view your page's INP value in the CrUX tab.

In the GTmetrix Report, TBT is used as the lab proxy for INP as there is a high degree of correlation being reported between INP and TBT (even more so than FID).

Typically, issues that increase interaction latency are long-tasks on the main thread, excessive DOM size, and any other browser task that affects client-side rendering, all of which are closely correlated with TBT.

In other words, fixing your TBT can be a gateway to fixing your INP timings.

Some of these optimizations include:

• 1) Reducing JavaScript execution time
• 2) Minimizing main-thread work
• 3) Reducing unused JavaScript
• 4) Avoiding an excessive DOM size
• 5) Avoiding non-composited animations