What is “Interaction to Next Paint”?
Google, with every update, aims to improve the user experience on websites, and last May, it introduced a new metric that will impact Core Web Vitals: Interaction to Next Paint (INP). The update in May 2023 stated that this metric will replace the First Input Delay (FID) metric for Core Web Vitals. We have compiled what we think you should know about this metric, for which I have recently received notifications via GSC!
Interaction to Next Paint (INP) is a metric that measures a website’s responsiveness to user interactions (clicks, touches, and keyboard commands) within the site. The ultimate goal of measuring this metric on a site is to reduce delays between each user interaction and the next possible frame after the start of that interaction. Starting from 2024, with Core Web Vitals, it seems that the INP metric will take the place of FID, bringing the Core Web Vitals perspective even closer to improving the user experience.
Which Interactions Are Measured in INP?
According to the latest update, the interactions that will influence INP are as follows:
- Clicking with the mouse
- Touching a touchscreen
- Using keyboard keys or a touchscreen keyboard.
Note: According to an updated article on June 28, 2023, navigating or scrolling within the site is not considered an INP metric. Although scrolling done with the keyboard is considered a keyboard interaction, it does not affect the INP score.
Let’s look at the example:
If we examine the experience flow shown in the image above, the time elapsed from approaching and clicking the detail button with mouse movement, until the response and image opens, can be considered as INP.
What Is the Optimized Score for INP?
The score will be measured by dividing the page load into segments, both for mobile and desktop, showing 75% of the page load in the segments. In terms of millisecond measurements:
Scores below 200 milliseconds indicate good interaction responsiveness.
Scores between 200 and 500 milliseconds indicate that improvement is needed in responsiveness.
Scores above 500 milliseconds indicate weak site performance.
What Is the Difference Between “Interaction to Next Paint” and “First Input Delay?”
When asking why these two metrics will swap in 2024, we can notice some significant differences. In general, the INP metric, by replacing FID, aims to improve the quality of interaction and subsequent steps in the user’s journey.
Indeed, the First Input Delay focuses on the quality of the first interaction and scores the quality of that interaction during the process. While INP measures the latency of the other file interacted after the first interaction, INP scores the quality of the first interaction.
How to Measure INP Data?
Since the INP metric is based on the user’s journey, measuring the natural user journey within the site will be much more valuable than simple measurements or tests. At this point:
Use the data from CrUX (Chrome User Experience Report) and CrUX in Pagespeed Insights to know the INP scores of your site and act accordingly.
Why Is the Interaction to Next Paint (INP) Score Important?
Since their launch, Core Web Vitals have been used to measure and improve the user experience. Over the years, Google continues to develop its insights into user experience, updating Core Web Vitals to align technological advancements with new user expectations.
The expectations of users themselves are progressing accordingly. Especially, speed continues to be one of the most important metrics in all aspects of the digital world. Therefore, it seems that INP will become a metric that ensures websites exhibit good responsiveness in all user interactions within Core Web Vitals.
For those who wish to meet users and bring them to the final stage of the marketing funnel after completing their on-page or off-page activities, ensuring a unique experience for the user from the beginning to the end of the journey is crucial. A good INP score indicates that the site exhibits good responsiveness throughout the user’s journey, leading to a positive increase in the number of satisfied users at the end of this journey.
How to Improve the Interaction to Next Paint (INP) Score?
Regarding how to improve the INP score, although Google’s most recent article does not provide specific instructions, it can be summarized under three headings:
- Minimize Loading Delays: Avoid blocking the loading process by minimizing elements that block loading. For example, remove unused code from JS files, reduce the size of large media, and minimize the DOM.
- Shorten Processing Time: CPU usage during processing can increase processing time. You can learn how to minimize CPU usage by checking your site. For example, if a JavaScript file requires a long processing time, you can create a processing order using the setTimeout command where needed.
- Minimize Presentation Delays: It is important to shorten the time it takes to make the site assets that will be displayed and interacted with the user ready for presentation. It may be important to be able to create a load sequence at this point. Also, the notion of small, site assets being talked about is valuable. For example, by simplifying HTML, CSS and Javascript elements; using the lazyload element and similar optimizations to reduce the DOM; contributing to the “below the fold – above the fold” system with elements such as content-visibility.
Day by day, the media surrounding active participants in the digital ecosystem envelop them 360 degrees. In order to keep these participants within their respective spaces, the media is expanding to offer a unique experience from the beginning to the end of user interaction. Google is one of these media and continues to evolve through its insights into user experience. Its intention is to provide all possible options to users, so that these options are the best and deliver the best results for them. Therefore, it seems that INP will ensure that sites exhibit good responsiveness in all user interactions within Core Web Vitals.”
Resources
Interaction to Next Paint (INP). (n.d.). web.dev. https://web.dev/inp/
“Measure and Optimize Interaction to Next Paint (INP) | DebugBear.” Measure and Optimize Interaction to Next Paint (INP) | DebugBear, 13 July 2023, www.debugbear.com/docs/metrics/interaction-to-next-paint.
“Improve Interaction to Next Paint (INP).” Improve Interaction to Next Paint (INP), www.corewebvitals.io/core-web-vitals/interaction-to-next-paint.
No comments yet.
Comment