Table of Contents
Overview
Interaction to Next Paint (INP) is an important, user-centric metric for measuring interactivity and responsiveness of a page. It helps quantify the longest time most users wait for feedback to their page interactions. A low INP score helps ensure that the page is quickly responding to user interaction. INP is a measure of the longest latency from the time of user interaction, defined as a click, tap, or key press, to the next time the page renders and repaints the screen during the entire lifespan of a page. Note that scrolling and hovering are not included as interactions in the calculation of this metric, but clicking and holding to drag would be.
Calculation
To calculate INP, the browser notes every time a user interacts with the page via a tap, click, or key press. Once user input is received, the browser measures the amount of time between the interaction and the next time the browser is able to paint the page and show the results of the interaction to the user. The INP value is the longest delay between a user interaction and the next resulting paint. If there are 50 or more interactions, the INP value is the 98th percentile of the slowest interactions on the page.
Blue Triangle INP
As with all metrics collected by Blue Triangle’s Real User Monitoring (RUM), we strive to keep up with and lead the implementation of new performance and end user experience metrics. Because INP is particularly sensitive to any interaction throughout the entire lifespan of the page, we have updated when data returns to us based on visibility events. When the visibility of the page changes to “hidden,” we return page-level data using the “sendBeacon()” method.
In the case of single-page applications where multiple route changes or virtual page turns may occur within a given full page load, we use the same method to return data but base the method around the occurrence of route changes, virtual page turns, or the visibility event that occurs at the end of a full page load’s lifespan.
This methodology is supported across all modern browsers.
How INP is Collected in Blue Triangle's RUM
INP is a value that is collected from the Event Timing API via the “interactionId” property. To access the required data, our tag instantiates a new PerformanceObserver with the type “event”.
Example:
new PerformanceObserver(function(entryList, po) {
entryList.getEntries().forEach(self.updateINP);
}
);
po.observe({
type: 'event',
buffered: true,
durationThreshold: 40
});
It is important to understand that the INP is not a variable that can be freely accessed via API call like the NavigationTimings API. INP can only be recorded whenever a user interaction instantiates a PerformanceObserver for INP. As time moves forward on the page, all interactions are observed with only the longest (or the 98th percentile in cases of 50 or more interactions) being returned as the INP for the page.
Blue Triangle differs from Google in that Google reports a single INP value per full page load URL, regardless of whether route changes or virtual page turns occur within the full page load. To provide additional nuance and information about what INP would be for every part of a customer journey, Blue Triangle reports a discrete INP per route change or virtual turn. This not only provides more insight into what parts of a site have longer INP times, but also provides valuable, actionable data that allows for easier analysis of long INP in SPA-type site architecture.
To make collection of INP on virtual page turns possible, full page loads within SPAs will report the INP associated with the time up until the first virtual page turn captured by the Blue Triangle tag.
INP data is supported in modern Chromium-based browsers, including Google Chrome, Microsoft Edge, and Opera.
Glossary
Interaction to Next Paint (INP): user-centric metric for measuring interactivity and responsiveness; a measure of the longest latency from the time of user interaction to the next time the page renders and repaints the screen during the entire lifespan of a page.
Sources
https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon
https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEventTiming
*https://github.com/GoogleChrome/web-vitals
https://github.com/GoogleChrome/web-vitals/blob/main/src/onINP.ts#L202
Comments
0 comments
Please sign in to leave a comment.