Interaction To Next Paint (INP): What Is It and How Do You Measure It?
In March 2024, the latest Google algorithm update introduced INP (Interaction to Next Paint), which came to replace the FID (First Input Delay) in the Core Web Vital (CWV) metric triad. This is a significant change to how Google measures user experience, as it allows for a more thorough analysis on the usability of a site, critical of course for User Experience (UX). This is great news for regular users but what does this mean for your site? In this article, we aim to cover all the questions you may have.
- What is INP?
- What is the difference between INP and FID?
- What does the change mean for your website?
- What is a good INP score?
- How to measure INP
- How to report on INP
- Identifying issues with INP
- Conclusion
What is INP
Understanding INP is essential for enhancing the user experience and optimising your website’s performance. INP essentially measures the elapsed time between when a visitor interacts with a specific element on a webpage and the moment the website updates to reflect that interaction. This could be visual changes like an accordion expanding, a dropdown menu appearing, or a slideshow transitioning to the next image.
Now, let’s delve deeper into the three main components that make up INP:
o Input Delay: This component represents any initial delay that occurs before the webpage can start processing the visitor’s interaction. This delay might be caused by background tasks or scripts that need to be completed before the user’s action can be executed.
o Processing Time: Once the webpage begins processing the user’s interaction, this component comes into play. It involves the time taken to execute the event handlers responsible for managing the user’s action.
o Presentation Delay: After processing the user’s interaction, the website needs to render or paint the changes to visually reflect the interaction. This component captures the time taken to display the updated content or visual elements resulting from the user’s action.
What is the difference between INP and FID?
While FID focuses solely on measuring the delay of the first user interaction and its processing time, INP provides a comprehensive view by capturing delays from all interactions on a single page and reporting the longest delay observed.
It’s important to note that an INP score isn’t finalised until the user exits the page, whether by navigating to another page, minimising the browser window, or switching to a different tab. This holistic approach allows Google to gather a more accurate and comprehensive understanding of a webpage’s performance and user experience.
Why did Google swap FID with INP?
When Google rolls out algorithm updates, it often puts itself in the user’s shoes to understand the motivations behind specific actions. With FID focusing only on the initial interaction delay and INP capturing delays from all interactions, Google aims to paint a clearer picture of how different interactions impact a webpage’s performance.
For example, a simple visual accordion feature might process user interactions quickly, resulting in a shorter delay. On the other hand, a more complex slideshow interaction with heavy JavaScript and/or CSS could lead to longer processing times. By collecting data on all interactions, Google can gain insights into how various elements and features on a page perform and contribute to the overall user experience.
What does the change mean for your website?
It is important to remember that the goal of optimisation should not be solely to appease search engines but to genuinely improve the user experience. Multiple interactions on a page may contribute to poor performance, not just the one highlighted by INP. Therefore, it’s essential to identify and address all potential bottlenecks and areas for enhancement to create a smoother, more responsive, and enjoyable browsing experience for your users.
This will not only safeguard your site from algorithmic devaluations but will also contribute to better UX and ultimately conversions.
What is a good INP score?
As with all CWV metrics, web.dev provides scoring benchmarks, to help with assessing a website’s interactivity. For INP, it goes as follows:
Visualisation from web.dev
Good INP Score: An INP score under 200 ms (milliseconds) is considered excellent and indicates that your website is performing well in terms of interaction responsiveness.
Needs Improvement: An INP score between 200 ms and 500 ms suggests that there is room for optimisation and enhancements to improve the user experience.
Poor INP Score: An INP score exceeding 500 ms is considered poor and indicates significant delays in processing user interactions, which can negatively impact user experience and satisfaction.
How to measure INP
There are various tools to help you measure INP and the choice will depend on the size of your website and number of pages/templates affected:
Pagespeed Insights (PSI): PSI is the most obvious place to look for CWV measurements. Simply inspecting a page within the user interface (UI) will return field data, which now includes INP (note that FID is still there, with a note that it has been replaced by INP in CWV).
Visualisation from PageSpeed Insights
Assuming you want to check multiple pages or templates, you may want to utilise the API (i.e., using Screaming Frog). For that, you will need a Pagespeed Insights key to authorise.
Please note that, since PSI relies on field data, there might not be any data for certain pages (not enough user visits in the last 28-day collection period). For this reason, you may want to try the next method for measuring.
Web-Vitals Library (recommended): At Semetrical, we prefer using the Web Vitals library, available on GitHub, as it allows you to automatically collect INP data and seamlessly integrate with Google Analytics 4 (GA4). As the name of the library suggests, it is not limited to INP but measures all CWV associated metrics.
Implementing the Web-Vitals Library solution:
The best way of incorporating the Web-Vitals Library onto your site is via the Google Tag Manager (GTM). This setup ensures that the data gathered is sent directly to your GA4 account or any other data collection tool compatible with GTM. By automating the data collection process, we can capture interactions from all visitors across all pages where GTM is deployed, providing us with a comprehensive and detailed dataset.
This ultimately enables us to identify pages or templates with higher INP scores and determine which specific elements or interactions are causing delays. Using this data, we can then begin to troubleshoot.
How to report on INP
Google Search Console: You can review CWV performance over time using the Core Web Vitals report inside the Google Search Console UI. Of course this comes with certain limitations, as it will not provide the level of detail required to locate exactly where problems occur. Nevertheless, it’s a great place to check general trends in the CWV area.
PageSpeed Insights: Assuming you are using the PSI API to measure CWV, you can export the data and then use Google Sheets or BigQuery in case you would like to build a database to track performance over time. From there, you can easily visualise your data using solutions like Looker Studio.
Looker Studio: Whether you have the data in GA, Google Sheets, or cloud storage, Looker Studio (previously known as Data Studio) has a wide range of free connectors that will allow you to visualise the data in various ways.
What if no INP value is reported?
If a page fails to report an INP value, it doesn’t necessarily mean there’s an issue with the page’s performance. There are several reasons why an INP value might not be reported:
No User Interaction: The page may have loaded successfully, but if the user doesn’t interact with any elements on the page, there won’t be any INP value to report. This could occur if the user simply lands on the page and doesn’t engage with any interactive elements.
Unmeasured Interactions: Some user interactions, such as scrolling or hovering over elements, may not be captured, or measured by the INP metric. In these cases, even if the user interacts with the page, no INP value would be reported.
Bot Traffic: If the page is accessed by a bot, such as a search crawler or headless browser, that hasn’t been programmed to interact with the page, it won’t trigger any INP measurements. Bots typically don’t simulate user interactions in the same way that human visitors do, so they may not generate INP values.
Identifying issues with INP
Now that you have all the metrics populating your report and you have an idea of what issues your website has, you can place each issue under the microscope, to locate the exact problem and ultimately proceed with optimisations and testing.
A great place to start would be the Developer Tools, where you can approach this in two ways:
Recorder:
On the Recorder tab, you can record different interactions with the site, which are then stored, so that you can measure regularly. You can replay the interaction with different network conditions, to ensure the fluidity of the interaction for different users. Once you have a recording in place, you can click on a specific interaction you recorded, and view the code responsible for the interaction.
You can then click on “Measure Performance”, which will take you to the Performance tab, where you can analyse your page’s runtime performance in detail.
Performance Insights:
Instead of making a start on the Recorder tab, you can directly use the Performance tab, you can find then spot the Interactions that took place, with all the necessary data for troubleshooting.
Clicking on the interaction will open the summary of the measurements for each of the components on INP as well as the total time:
Conclusion
Being one of the CWV metrics and as such, an official ranking factor, INP is something that you cannot overlook from an SEO perspective, especially when measurements are in the reds. Aside from the organic visibility perspective, however, which works towards bringing visitors to the site, it is important to not neglect the UX experience factor, which has a direct impact on conversions.
If you need support to improve your INP scores for your website, please get in touch with our experts!
