Google's Pagespeed structure, which we have been accustomed to for years, is built around ensuring that websites load and serve quickly. By producing measurable parameters and leveraging the anonymous data collected from Chrome's market share, Google uses these metrics as SEO indicators. With the introduction of Interaction to Next Paint (INP) in 2022, the focus has shifted from merely page load speed to a broader web performance perspective. INP not only measures how quickly a page loads but also how fast user interactions on the page are processed. Essentially, it turns the site navigation experience into a Pagespeed metric.
On Kerem's blog, the term "General Interaction Delay" is suggested as a good fit for this concept, which Google also explains well in its own video. However, to fully understand this metric, we'll delve deeper into the subject in the following sections.
What is the Explanation of INP Duration?
The duration of INP includes:
- The time between the user's interaction with the page and the execution of the event handler.
- The script's execution time.
- The time from the execution of the code to the display of the output to the user.
These processes typically occur within milliseconds, but on mobile devices, especially older Android phones with low CPU power, such delays (latency) can often be noticeable. It's worth noting that INP data, like other Lighthouse data, is collected anonymously and evaluated based on the 75th percentile. Therefore, the goal is to create applications that perform well on average devices rather than only on high-end devices.
Real-Life Examples of INP Duration
Here are some real-life examples from the internet pages we visit daily to explain this concept:
Entering Address on an E-commerce Site
When you are shopping on an e-commerce site and entering the address for shipment, you first select the province. Then, when you click the select box to choose the district, you wait for a while for the Ajax result to load, and after a certain time, the district information is loaded. This is a good example of INP. Improving the user experience in this example could involve adding a "loading indicator" to inform the user of the Ajax process.
Sorting Selection
When using filters on product listing pages, if the filtered products are not managed properly after clicking a checkbox, it will increase INP. Using less complex JS and considering user experience during filter operations can help keep the INP value as high as possible.
Product Photo Galleries
The time users wait for the photo gallery to load after clicking on a product photo on product detail pages can potentially affect INP.
Reservation Button
The interaction delay between clicking the "Make a Reservation" button and the next page is an example of INP.
Add to Cart Button
The milliseconds of delay when clicking the "Add to Cart" button and wondering if the item was added to the cart or not perfectly defines INP.
As seen in these examples, INP traps are present in scenarios affecting both SEO and direct conversion rates.
How to Improve INP?
- Use Up-to-Date JS Frontend Libraries: Improving performance by using modern JS frontend libraries like Vue, React, and Angular is beneficial as they offer performance and reusability advantages.
- Minimize Complexity of JS Libraries: Using less complex JS libraries is advisable. Personally, I recommend avoiding jQuery as much as possible.
Acceptable INP Metric Levels
The threshold values for good, medium, and poor INP levels are 200 milliseconds and 500 milliseconds. Keeping the INP under these thresholds is crucial for maintaining a good user experience and overall web performance.
