What is the Interaction to Next Paint?
Interaction to Next Paint is a new Core Web Vitals metric per March 2024 that represents a page's overall interaction latency by identifying one of the single longest interactions that occur when a user visits the page. Interaction to Next Paint is the interaction with the longest latency for pages with less than 50 interactions. Interaction to Next Paint is usually the 98th percentile of interaction latency for pages with a lot of interactions.
A set of related input events that fire during the same logical user gesture is referred to as an interaction.
In terms of Interaction to Next Paint, only these specific types of interactions are taken into account:
- Clicking with a mouse.
- Tapping on a device with a touchscreen.
- Pressing a key on either a physical or onscreen keyboard.
Hovering and scrolling are not considered as an interaction.
Video by Google web.dev
How is the INP calculated?
Interaction to Next Paint will be measured as the single longest interaction latency on a page if there are less than 50 interactions total. Interaction to Next Paint is calculated as the 98th percentile of interaction latency if there are more interactions.
The time between when a user interacts with a page (for example, by tapping, clicking, or pressing a key) and when the next frame appears is known as interaction latency (meaning the user sees something different on their screen and gets the feedback that their interaction has triggered the change). The following phases are included in this period:
- Input Delay: If your input delay is high, then other tasks were still running when users interacted with your webpage.
- Processing Time: A long processing time means that your event handler for the current action was slow due to your code.
- Presentation Delay: When the presentation delay is high, then you have a render delay issue.
Source Google
Breaking down the INP with field data
With RUMvision, you can easily see which of the above three things contribute to a high Interaction to Next Paint value. When you know this, you can debug much easier and therefore work faster toward a solution and better Core Web Vitals.
With this insights you'll be able to debug the Interaction to Next Paint and optimize your Core Web Vitals along with it:
- Pinpoint web performance issues on your website or webshop;
- Reproduce them using by looking at characteristics;
- Create a fix and annotate it in RUMvision;
- And see numbers improve right away, without Google's delay.
What is a good Interaction to Next Paint value?
Assessing responsiveness metrics like Interaction to Next Paint can be a challenge. While it's crucial to promote development strategies that prioritize optimal responsiveness, it's equally important to take into account the wide range of device capabilities people use, which can set practical development goals.
To ensure optimal user experience in terms of responsiveness, it's advisable to use the 75th percentile of page load records in real-world conditions This is according to Google's Core Web Vitals thresholds. When you're using RUMvision you're using the 80th percentile by default.
- An INP of 200 milliseconds or less indicates that your page has a good INP value
- An INP exceeding 200 milliseconds but not more than 500 milliseconds suggests that the responsiveness of your page could be improved.
- An INP over 500 milliseconds signifies that the responsiveness of your page is bad and needs improvement to pass for the Core Web Vitals assessment.
INP in search console
Google Search Console's Interaction to Next Paint (INP) warns to optimize your site's Core Web Vitals and enhance your overall SEO strategy. Read more in our article INP in search console.
Why does the FID get replaced by the INP?
FID may not be the best choice. At present, nearly 95% of about 17 million origins meet the FID benchmark and are easily passing the Core Web Vitals, yet there is a significant percentage beyond the remaining 5% that employ numerous Third Parties and JavaScript in general. This suggests that merely tracking the initial interaction - as FID does - doesn't provide a comprehensive understanding of JavaScript's overall impact. Consequently, it underscores the necessity to monitor delays across various interactions during a page's lifespan.
More device memory = Better INP
When you have a webshop you get a lot of different visitors. Everyone comes in under different circumstances. This could be their Internet speed, location, but also their device memory.
A higher number of GBs of device memory will allow tasks such as Javascript to be processed more easily. So if you have a lot of visitors on, say, an 8GB phone then you will more easily pass the Core Web Vitals and the Interaction to Next Paint.
The image below shows how user conditions impact the Interaction to Next Paint (on the right of the visitor footprint). You can see that user's on a device with 8GB device memory have a faster Interaction to Next Paint than those on 2GB and 4GB.
How to measure the Interaction to Next Paint?
To measure the Interaction to Next Pain, you can use lab and field tools. A field tool represents, as in the visitor footprint, how all your users experience the Interaction to Next Paint. With a lab tool you test in your own local environment, so this is most likely not representative.
Assess your INP with the following tools
- Google Pagespeed Insights — PageSpeed Insights is useful in that it tells you whether there is a problem at all and how close (or far) you are from "good" performance, despite the fact that the insights provided here are limited and probably not enough to troubleshoot INP issues.
- Chrome User Experience Report — For simpler analysis and decision-making, you can gather actual user INP data for your pages and incorporate it into a Looker Studio dashboard.
- Real user monitoring — To get a complete picture of your Core Web Vitals and other page speed metrics you could use a RUM tool.
- Google Lighthouse — If you want to test the responsiveness of specific elements, this technique is especially helpful.
Optimize Interaction to Next Paint
Now that the Interaction to Next Paint will become a Core Web Vital you want to work even faster to maintain the SEO benefits and also understand that a good INP contributes to a good user experience. Unlike the Largest Contentful Paint, the Interaction to Next Paint is a bit more difficult to optimize because you have to get a very good understanding first.
Make sure to read our experts guide on optimizing interaction to next paint.
Reduce JavaScript
JavaScript is your most expensive asset, to quote Addy Osmani. A JavaScript file of the same size will download in the same amount of time as, say, an image or stylesheet. The issue arises from the amount of post-download processing required before JavaScript can be fully executed. With this in mind you might want to take a look at your 3rd party JavaScript that's used or been used for i.e. marketing purposes. Sometimes you'll find pieces of JavaScript that isn't used anymore and that could be removed from the resources.
Identify and reduce input delay
The input delay is the first thing a user does when he or she connects with a page. Depending on what else is going on on the page, input lags can be long. This could be because of activity on the main thread, such as scripts loading, parsing, and compiling, fetch handling, timer functions, or even other interactions that happen quickly and overlap.
Minimize the DOM size
When a webpage has a small Document Object Model (DOM), the process of rendering is usually quick. But as the DOM grows, so does the time it takes to render. Even though there isn't a direct link between rendering time and DOM size, it's clear that bigger DOMs require more work to render than smaller ones. There are two main situations where a large DOM could cause problems:
INP impact on SEO
Among other factors, the design of your site may have an impact on how the switch to INP ultimately affects your search engine rankings. In the section after this one where I discuss some of those elements, experts generally say that Google continues to give more weight to signals relating to content quality and relevance than to signals relating to user experience.
INP is aiming to improve the web by surfacing frozen, glitchy, poor experiences. So, although you have until March 2024 before INP becomes a Core Web Vital, your users are experiencing these sub-optimal issues right NOW, so it is something you should look at.
Interaction to Next Paint issues
Field data obtained from a Real User Monitoring (RUM) provider will not only deliver the Interaction to Next Paint value of a page, but also contextual data pinpointing the exact interaction that contributed to the INP value. This includes details such as whether the interaction took place during or after the page loaded, the nature of the interaction (click, keypress, or tap), among other insightful details.
On the screenshot below you can see which specific element is responsible for a slow interaction. The screenshot below that one shows what Interaction to Next Paint phases are responsible for the high INP value. With this information you have a head start on optimizing your INP.
Conclusion
To conclude, optimizing the responsiveness of your website or webshop is critical for user satisfaction and engagement. Interaction to Next Paint, as a Core Web Vitals metric, is a comprehensive measure of interaction latency, considering all the user interactions such as clicks, taps, and keypresses.
The best way to diagnose and address issues related to Interaction to Next Paint is by leveraging field data from a Real User Monitoring (RUM) provider, which gives valuable insights into the exact interactions causing high Interaction to Next Paint values. If a RUM provider isn't available, Chrome User Experience Report (CrUX) via PageSpeed Insights can be utilized, although it doesn't provide as detailed context.
