Interaction to Next Paint (INP) is a pivotal metric in web performance, focusing on the responsiveness of a website to user interactions. As the digital landscape evolves, so does the need for more accurate and comprehensive metrics to assess user experience. INP is a testament to this evolution, providing a more holistic view of a web page's responsiveness throughout a user's visit.
Let's imagine you're playing a video game on your computer.
When you press a key on your keyboard or click your mouse, you expect something to happen in the game. Maybe your character jumps, shoots, or moves. The time it takes from when you press the key or click the mouse to when you see the action happen on your screen is what INP measures.
Let's say you're playing a racing game. Press the "right arrow" key to steer your car to the right. If the game is well-optimized, your car will instantly start moving to the right immediately. This would be a low INP, which is good because it means the game responds quickly to your actions.
But what if when you press the "right arrow" key, there's a noticeable delay before your car starts moving to the right? That delay can make the game feel slow or unresponsive, and it might even cause you to crash your car in the game because you cannot steer in time. This would be a high INP, which is not good because it means the game needs to respond more quickly to your actions.
Like in the video game, when browsing a website and you click on a button or a link, you expect something to happen almost instantly. If there's a delay, it can make the website feel slow or unresponsive, which can be frustrating.
Web developers aim for a low INP to provide a better user experience.
INP is a metric that gauges a page's overall responsiveness to user interactions by observing the latency of all click, tap, and keyboard interactions that occur throughout a user's visit to a page. The final INP value is the longest interaction observed, excluding outliers.
An interaction is a group of event handlers that fire during the same logical user gesture. For instance, "tap" interactions on a touchscreen device include multiple events, such as pointer-up, pointer-down, and click.
An interaction's latency consists of the longest duration of a group of event handlers that drives the interaction, from when the user begins the interaction to the moment the next frame is presented with visual feedback.
INP is crucial as it directly impacts the user experience. Good responsiveness means that a page responds quickly to interactions made with it. When a page responds to an interaction, the result is visual feedback presented by the browser in the next frame. This feedback informs the user if an action they initiated has been processed.
The goal of INP is to ensure the time from when a user initiates an interaction until the next frame is painted is as short as possible, for all or most interactions the user makes. A low INP means a page reliably responds to user input, enhancing the overall user experience.
As per Google,
Chrome usage data shows that 90% of a user's time on a page is spent after it loads. Thus, careful measurement of responsiveness throughout the page lifecycle is essential. This is what the INP metric assesses.
Google will include INP as one of the Core WeB Vitals from April 2024 onwards, replacing FID (First Input Delay). You can check your website INP score here and understand the trend in just one click
From a business perspective, INP can significantly influence user engagement, conversion rates, and overall customer satisfaction.
Interaction to Next Paint (INP) is crucial in e-commerce and web-first businesses. A low INP, indicating quick response to user interactions, enhances user experience, leading to higher conversion rates and customer retention.
It also positively impacts the site's SEO ranking, making it more visible to potential customers, and reinforces the brand's reputation for quality and reliability.
Conversely, a high INP can lead to a sluggish and frustrating user experience, potentially resulting in lower conversion rates, decreased customer loyalty, lower visibility in search results, and a tarnished brand reputation. Therefore, e-commerce businesses should strive to optimize INP to ensure a smooth and responsive shopping experience.
Measuring Interaction with Next Paint (INP) can be done both in the field (real-world user interactions) and in the lab (controlled testing environments). Here's how:
Field data provide insights into real user experiences and is typically collected from Real User Monitoring (RUM) tools. If your website qualifies for inclusion in the Chrome User Experience Report (CrUX), you can quickly get field data for INP via CrUX in PageSpeed Insights (and other Core Web Vitals).
At a minimum, you can get an origin-level picture of your website's INP, but in some cases, you can also get page-level data. However, while CrUX helps tell you that there is a problem at a high level, it often needs to provide more detail to help fully understand what the problem is. A RUM solution can help you drill down into more detail about the pages, users or user interactions experiencing slow interactions. Being able to attribute INP to individual interactions avoids guesswork and wasted effort.
Lab data is useful for debugging performance issues and can be collected in a controlled environment. This data can be collected using performance testing tools like Auditzy that allow you to simulate user interactions and measure the resulting INP.
You'll want to start testing in the lab once you have field data that suggests you have slow interactions. However, some strategies for reproducing slow interactions in the lab exist without field data. Such strategies include:
Remember, the goal of measuring INP is to identify slow interactions and work towards optimizing them, thereby improving the overall user experience on your website.
Optimizing INP involves identifying slow interactions in the field and using lab data to drill down and optimize them in various ways. Here are some steps to improve INP:
A good Interaction to Next Paint (INP) score is determined by the time it takes for a webpage to respond to a user's interaction. Here are the thresholds for INP scores:
These thresholds are designed to ensure you deliver user experiences with good responsiveness. The goal is to have an INP score as low as possible, indicating that the page reliably responds to user input.
There could be several reasons why no Interaction to Next Paint (INP) value is reported for your website:
If you believe there should be an INP value for your website, it might be worth contacting your web developer or a web performance expert to investigate further.
If you find yourself without field data, there are alternative methods to identify interactions that require improvement.
Total Blocking Time (TBT) is a metric that evaluates page responsiveness during loading. It strongly correlates with INP and can provide insights into potential interactions that could be profiled while the page loads.
Tools like Auditzycan be used to measure your page's TBT. If your TBT score needs improvement, interactions could be faster during the page load.
To identify slow interactions post-page load, you might need to rely on other data types, such as common user flows already in your website's analytics. For instance, if you operate an e-commerce website, a typical user flow might involve users' actions when adding items to an online shopping cart or navigating through an online checkout.
Regardless of whether you have field data, the next step involves replicating that interaction—because it's only when you can definitively identify a slow interaction that you can rectify it.
Interaction to Next Paint (INP) is a vital web performance metric that measures the responsiveness of a website to user interactions such as clicks, taps, and keyboard inputs.
INP Optimisation will help you increase the user satisfaction index of your website.