Table of Contents
What is INP?
Interaction to Next Paint (INP) assess overall page responsiveness by measuring the latency between a user interaction, like a tap, click, or keyboard input, and the visual response from the page. A low INP score means a page was able to respond quickly to almost all user interactions.
Visual feedback from a page following an interaction reassures the user that the page is able to process the request made. For example, you are shopping online and add an item to your cart. You immediately see a bubble pop up confirming that the item is indeed in the cart, and asking if you would like to checkout. This would be great user experience. Poor experience arises when the site becomes unresponsive following a user interaction like this one. You add an item to the cart but there is no visual confirmation from the site, so you continue to click add to cart. Eventually the site responds and you see that you've added eight items, not just one, to the cart and you've suddenly unintentionally clicked go to checkout. This can be a very frustrating experience.
How is INP Calculated?
The goal of INP is to make sure that the time between when a user interacts with the page and the visual response from the page is as short as possible.
INP uses the Event Timing API to measure the time gap between each user interaction and the visual site response, throughout the entire time the user is on the site until they leave the page. The value then assigned to INP is the longest interaction that is observed (sans any outliers) for that session.
What Constitutes an Interaction?
Only these three types of interactions are considered when measuring INP:
- Clicking with a mouse
- Tapping on a device with a touch screen
- Pressing a key on a keyboard (physical or digital)
JavaScript is usually the primary driver of interactivity, but objects like checkboxes and radio buttons that are powered by CSS can also be interactive.
These interactions may also have multiple parts, like pointerup and pointerdown events for tap interactions, and in this case the part with the longest duration is used as the latency value for the interaction.
When is INP Not Being Collected?
Given the design of the metric, there are cases where it's not possible to measure INP. This is true for both Google and other analytics providers like Blue Triangle. Here's a list of those situations:
- If the browser is not Chrome.
- If the browser is not Chrome v77+.
- A page loaded but no interaction was made.
- The page loaded and the user interacted with the page but not with a tap, click, or keyboard input.
For more information on how to optimize your sites INP, check out this article from web.dev.
How is INP Different from FID?
First Input Delay (FID) only accounts for the first interaction a user has on a site, while INP accounts for all interactions a user has throughout the entire time they are on a site. FID is also a load responsiveness metric, while INP focuses on what happens after the page is loaded. Overall, INP is a more comprehensive metric than FID, as it measures beyond the first impression a user might have on a site.
INP will be replacing FID as a Core Web Vital in 2024. For more information on how INP differs from FID, visit this article.
How Blue Triangle Captures INP
The Blue Triangle tag will fire and capture INP under the following conditions, only once per page:
- Navigating to a new page
- Opening/navigating to a new tab
- Closing a tab
- Minimizing the browser window
- Closing the browser window
- Once five minutes have gone by in a session and no other interactions are made