GTmetrix Performance Blog

News, updates and guides on GTmetrix and general web performance

Interaction to Next Paint (INP) Explained

We explain what Interaction to Next Paint (INP) is, how it impacts performance, and why GTmetrix doesn’t track it (yet).


 

Overview

Interaction to Next Paint (INP) is Google’s new “responsiveness” field metric that was first announced as an experimental metric in 2022.

It subsequently evolved to be a “pending” Web Vital in 2023, and is now a stable/live Web Vital metric in PSI/Search Console as of March 12, 2024.

We have seen a lot of discussion regarding INP, especially with many users seeing this new performance metric on Google’s Search Console and PageSpeed Insights (field data section).

In this article, we explain what INP is, why it’s not available in the GTmetrix Report yet, and what you can do about it.

 


 

What is INP and How is it Measured?

INP was developed to measure how quickly your page visually responds to user input overall.

As the name implies, INP was developed to measure how quickly your page visually responds to user input, or how much delay there is between a user input and the final outcome of 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:
 


An example of poor vs good responsiveness. Source: Google

 
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.
 

Example

Let’s say your visitor clicks on an Add to Cart button on your website.
 

INP for this example interaction would be 350ms.

 

Here’s what may happen from the browser’s perspective for this interaction:

  1. The visitor’s “Add to cart” click is registered.
     
  2. Work starts on processing the interaction and background tasks are performed:
    • This may involve things like querying the product database, updating the user session with added product data, template logic processing, etc.
    • Operations may occur on the main-thread or via the backend.
       
  3. When the product is successfully added to the cart, a confirmation is displayed.
    • In this case, the cart icon incremented in number 1, but it may be a “Product added to cart!” notice or a page reload all together.

 
The duration (aka interaction latency) between the browser registering the visitor’s click and displaying the cart increment is the INP for this interaction.
 

Since Chrome keeps track of the 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)

 
Let’s say, after adding the initial product to cart, the user then added another product to the cart, and the browser took 575ms to respond visually, then 575ms would likely be reported as the INP since it represents the slowest user interaction.

 
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.).
 


 

INP Thresholds, Details, and Caveats

The thresholds for what is considered a good INP is as follows:
 

Google considers an INP under 200 ms to be good.

 

Note that 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 users’ 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 30 days)

 
Refer to Google’s INP documentation to learn more about how INP is measured.

 


 

Why is INP Replacing FID?

To put it simply, FID can only measure how interactive your page is for the first input – it did not account for all subsequent interactions.

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.”

The web performance industry is constantly evolving and coming up with better metrics (e.g., replacing PageSpeed/YSlow with Lighthouse metrics) to keep up with changing user behaviour on the internet.

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

Due to this and other perceived/known limitations with FID, INP was introduced to replace FID.

Some general limitations of FID:

  • Only measures the delay before processing starts
    • Not the total time it takes to respond to user input.
       
  • Does not include the time spent running those event handlers.
     
  • Does not account for any work done after by the browser to update the screen.

 


 

Why is INP Not Available in the GTmetrix Report Yet?

Put simply, it’s not possible to include INP in the GTmetrix Report at this time as we do not have CrUX integration in GTmetrix.

However, it is something we are looking into for the future.

It is also not possible to measure INP in the lab with our current configuration as we cannot simulate user inputs/flows.
 


 

What Can I do since INP is not Available in the GTmetrix Report?

Until we can integrate INP into the GTmetrix Report, here are some options you can consider:

  • Use TBT as a proxy metric.
  • Use tools that provide field data
    • E.g., PageSpeed Insights, Google Search Console, WebPageTest, etc.
    • But keep in mind – field data can tell you what your INP timing is, but not what is specifically slowing it down.
       
  • Measure INP in the lab with INP Debugger tools.
    • E.g., Debugbear and Chrome DevTools, etc.
    • Note that these tools aim to simulate user interactions with various page elements and report the INP for each interaction.
    • However, this simulation may not always be accurate or capture all user interaction scenarios you want to test.

The focus on INP is a new change from Google that aims to help site owners provide even better user experiences to visitors.

While your site’s Web Vitals assessment may have taken a hit due to the new metric, there is no need to panic as Google will not immediately downgrade your site’s ranking due to a poor INP.

Our message has always been the same: focus on providing a better page experience to your visitors for better engagement; don’t just do it for SEO!

 


 

Summary

Google is replacing the FID field metric with another field metric called INP. In this article, we’ve covered what the goal of INP is and how it is measured.

While GTmetrix doesn’t report field data at this time, we are looking into including field metrics in the future, with INP as part of the analysis if and when that happens.

Until then, there are some options available to you, which we’ve listed above.

Feel free to contact the GTmetrix team if you have any questions or concerns.

 


 

Test with different countries, speeds and options

Basic GTmetrix Splash

Get access to more Test Locations, Analysis Options and Connection Speeds!

Sign up for a Basic GTmetrix account and see how your site performs in more scenarios – It’s FREE!


Get Started for FREE

Get Mobile Testing, Premium Locations, and more

Basic GTmetrix Splash

Get more On-Demand Tests, Monitored Slots and Premium Test Locations along with Hourly testing with a GTmetrix PRO plan.

Upgrade to GTmetrix PRO and see how your site performs in all scenarios.


Upgrade now

Cookie Policy

By clicking "Allow All" you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View cookie details

Deny Allow All
×