by admin |

• E-commerce
• News
• SEO

November 8, 2023

Google’s New Metric: How to Optimize Your Magento Webshop for INP

In today’s competitive world of e-commerce, staying ahead of the curve means continually adapting to new metrics and standards. One such metric that’s generating quite a buzz is Interaction to Next Paint (INP). Set to replace First Input Delay (FID) in Google’s Core Web Vitals, INP is becoming one of the crucial factors for website ranking and user experience. So, let’s go into the topic of INP, why it’s vital for your every website, but also to your Magento webshop, and how you can optimise it to enhance your website’s performance.

What is INP?

Interaction to Next Paint (INP) is a pivotal component of Google’s Core Web Vitals and is scheduled to become a ranking factor starting in March 2024. By providing visual feedback, it measures how fast a web page responds to user interactions, such as clicks, taps, or keyboard inputs. This feedback might include updating the shopping cart icon, changing a product’s colour, or displaying a menu dropdown. Unlike other metrics like Largest Contentful Paint (LCP) and FID, INP focuses on the interactions that occur on the page after the initial load.

INP measures the exact time it takes for the page to respond visually after user interaction, such as when a user clicks a button or selects an option.

 

Why is INP Important for User Experience?

According to Chrome usage data, a staggering 90% of a user’s time on a web page is spent after it loads. This statistic emphasises the significance of not only ensuring your web page loads quickly but also that it responds swiftly to user interactions.

A lower INP score indicates a more responsive website, where users quickly receive visual feedback that their interaction has been successful. This could be as vital as seeing the shopping cart icon update to indicate that the product they selected has been added to the cart.

Conversely, a web page with a high INP score might leave the user wondering whether their interaction, such as clicking or tapping, had any effect. A delay in displaying the results of their action might compel the user to click the button again, unintentionally adding the item to the cart for a second time. Slow INPs can be highly frustrating for your shoppers. They may perceive your site as needing fixing, leading to a decrease in trust and, consequently, sales.

 

How is INP Measured?

INP measures the latency of a page’s response to user interactions, including mouse clicks, touchscreen taps, or keyboard key presses. In this context, latency refers to the time it takes for the page to display visual feedback after the user’s interaction.

For instance, consider a user clicking on a colour swatch on a product page, resulting in the product changing colour. The time taken for this change to be displayed measured as part of the page’s INP.

To achieve a good INP score, the INP for a page must remain below 200 milliseconds. An INP score above 200 ms but below or at 500 ms indicates that your page’s responsiveness requires improvement. An INP exceeding 500 ms is a sign of poor responsiveness.

The INP result is a single value for a page, reflecting that all or nearly all interactions were below this value. However, if there isn’t enough data for an individual page or URL on your site, the aggregate INP data for all pages of the origin domain will be shown. For instance, if a specific product page doesn’t have an INP, the INP for your entire field will be displayed.

As INP is measured by real Chrome users who visit your site, it’s a metric that provides you with a reliable indication of how responsive your site is.

 

How to View Your INP

While INP may not yet be used as a ranking factor, it is still being reported. This allows you to address any INP-related issues before it becomes a ranking factor in March 2024.

There are several ways to view the INP rating of your site and its pages:

• Google PageSpeed Insights: By entering the URL of a page into Google PageSpeed Insights, you can obtain insights into your INP rating and other performance metrics.
• Google Search Console: If you’ve added your site to Google Search Console, you can check your site’s INP status in the Core Web Vitals section.
• Web Vitals Chrome Extension: Installing the Web Vitals Chrome extension allows you to measure INP by visiting a page and performing interactions.

Using the Chrome extension is particularly useful if there is more data to obtain results from other sources or if you’d like to personally test interactions on your webshop.

 

What Causes INP Issues?

Understanding what might be causing issues with your INP is crucial before diving into how to improve it. Several factors can contribute to poor INP ratings, including:

• Hosting: Underpowered or low-quality hosting can significantly impact performance.
• Themes and Design: Only optimised themes or site designs can positively affect INP ratings.
• Extensions: Bloated or misconfigured extensions can slow down your site and result in poor INP scores.
• JavaScript Overload: Excessive use of JavaScript, especially in unnecessary areas, can majorly contribute to INP issues.
• Unused Tags: Tags no longer needed, such as those from third-party services, can affect INP negatively.

 

How to Improve INP

To note here, for this, you might need to contact your development agency, and if you need help from a trusted partner with that or with something else, you can contact us here. Now that we’ve identified potential previous problems that could cause poor INP ratings let’s explore how you can enhance your webshop’s INP score:

• Reduce Input Delay: To mitigate input delay, avoid recurring timers, such as setTimeout and setInterval, which can interfere with user interactions.
• Avoid Long Tasks: Long tasks can block the main thread, preventing the browser from executing interaction events. To enhance responsiveness, break up long assignments into smaller, manageable chunks.
• Address Interaction Overlap: Interaction overlap can occur when a user makes multiple interactions before the initial interaction can render the next frame. Debounce inputs and use mechanisms like AbortController to cancel fetch requests to avoid overloading the main thread.
• Optimise Event Callbacks: Evaluate the necessity of event callbacks and delay their execution if they are not essential. Removing unnecessary callback functions can also improve INP.
• Defer Non-Rendering Work: Defer tasks unrelated to user interface changes to prevent delays in rendering the next frame.

Minimise Presentation Delay

To minimise presentation delay and optimise your INP score, consider these practices:

• Reduce DOM Size: A large DOM size can lead to poor INP scores. Aim to reduce DOM depth, keeping it under 1,400 nodes. This can be achieved by avoiding poorly coded plugins and themes, minimising JavaScript-based DOM nodes, and more.
• Avoid Excessive Work in requestAnimationFrame Callbacks: RequestAnimationFrame callbacks can affect the rendering of the next frame. Limit the work done in these callbacks to improve INP.
• Defer off-screen animations: Off-screen animations on the initial load don’t need to be executed immediately. Defer them until they come into view, reducing INP delays.
• Optimise Image Loading: Images not visible initially should be loaded lazily to prevent delays in rendering the next frame.
• Use Efficient CSS: Complex and inefficient CSS can impact the rendering process. Optimise your CSS to reduce rendering delays.

 

Conclusion

Optimising your Magento webshop for Interaction to Next Paint (INP) is essential for staying competitive in the e-commerce landscape. With Google set to make INP a core ranking factor from March 2024, European merchants must enhance this metric to improve their webshop’s performance, user experience, and conversion rates.

INP ensures users receive quick visual feedback, and by optimising your INP score, you can create a more responsive, efficient, and enjoyable shopping experience for your customers, who would buy now and return later for a new purchase. And that is the ultimate goal, isn’t it?