How to Fix Interaction To Next Paint (INP) Issue in Woocommerce sites

Interaction to Next Paint (INP) is a web performance metric that measures how quickly a website responds to user interactions. Specifically, it measures the time it takes for a user to see a visual update on the page after they have interacted with it. Interaction to next paint this Matrix will replace the FID metrics which is first input delay, but INP metric is more advanced metrics and provide better understanding how you can provide a smooth experience for your users this is going to be the last video in core web virtual series for now as you know Google chain thinks time to time so if they change something

INP metrics aims to represent a page overall responsiveness by measuring all click tab bone interactions made with the page.

Now this big question, what is the relation between FID and INP how they’re similar and how they’re different

So, FID measures the first interaction by the user on your page where INP measure all the interaction on the website first second third fourth even all even after loading the website completely if user go to other pages also so, INP calculate all those interactions and take the biggest interaction which is taking the most of the time so based on the time all those interactions are taking antimatter’s calculator scores.

INP is a pending Core Web Vital metric that will replace First Input Delay (FID) in March 2024. FID is a measure of how long it takes for a page to become interactive after it has loaded. However, FID only measures the first interaction, while INP measures all interactions throughout the lifespan of a page.

A good INP value is 200 milliseconds or less. If the INP value is higher than 200 milliseconds, it can indicate that the website is not responding quickly enough to user interactions. This can lead to a poor user experience and can also impact your site’s SEO.

Interaction to Next Paint (INP) Issue on WooCommerce Product pages

INP measure all the interaction on the page so it was really good step by Google so that you can just know how you can make your user experience better. Each user interacted events are involved calculating the inp scores so clicking with the mouse tapping on device touch screen pressing a key on either a physical or on screen keyboard and one more thing I want to mention hoverboarding and scrolling doesn’t contribute to the INP score and how to improve this you’ll need to focus on the when the website load first and even after what happens when the page is loaded completely. Same goes on woocommerce product pages.

As you can see in above image there are 3 url’s which have INP issues and those are Woocommerce pages only. As we went through finding the root cause of this issue we tested this with different devices and browsers.

If you have this in your search console here is what you should do to fix it.

Fix 1

1. Use a caching plugin. A caching plugin can help to improve the performance of your WordPress site by storing static versions of pages and posts. This can help to reduce the amount of time it takes for the page to load, which can improve the INP score.
2. Minify and combine your CSS and JavaScript files. Minifying and combining your CSS and JavaScript files can help to reduce the size of these files, which can also improve the INP score.
3. Avoid using too many plugins. Too many plugins can slow down your WordPress site, which can impact the INP score. If you’re not using a plugin, disable it.
4. Optimize your images. Large images can slow down your WordPress site, which can impact the INP score. Optimize your images by reducing their file size without sacrificing quality.
5. Use a CDN. A CDN can help to improve the performance of your WordPress site by delivering static assets, such as images and CSS files, from servers that are closer to your visitors. This can help to reduce the amount of time it takes for the page to load, which can improve the INP score.

If above wont solve your issue, here is exactly whats causing this on your woocommerce site

Fix 2

1. Too many Variations in a single product: Sometimes we have some product range which are of a single nature but differ in color, quantity etc. In such cases if you have many variations to choose from make sure all the images you are using in each variation have reduced image sizes, you can reduce this easily free from many sites like  Compress JPEG Images Online
2. Currency switchers are active : If you deal worldwide its important to use a currency switcher for users from different countries, if this is the case you need to make sure the plugin is always updated and try to make it auto swich currency based on geo location of the user.
3. Other plugins are active : Make sure plugins you are using are actually useful for woocommerce pages, if they are not meant for product pages, you should turn them on individual woocommerce pages. There are different plugins available to turn off unused CSS and JS page-wise.
4. You are using Video on product page: Your own server hosted videos uses different JS to play. These JS loads slow are counted in INP, if they take time after click or makes your page load slow, you should upload them to third party sites like Youtube and use them on site.
5. Add to cart loads on the page : If you have Ajex add to cart feature for good user experience make sure when a user clicks add to cart it should load within 1-2 secs, if you see this taking more time, try removing this feature and take the user to cart page once they click add to cart.

There are many more reasons but above are the main reasons for this issue.

Helpful Resources to check Interaction To Next Paint (INP) Issue on site

• Google Lighthouse: Lighthouse is a free tool from Google that can help you to audit the performance of your WordPress site. Lighthouse will give you a score for each of the Core Web Vitals metrics, including INP.
• WebPageTest: WebPageTest is another free tool that can help you to audit the performance of your WordPress site. WebPageTest will give you a score for each of the Core Web Vitals metrics, including INP, and it will also provide you with a detailed report of the performance of your site.

By following these tips and using these tools, you can improve the INP score of your WordPress site and provide a better user experience for your visitors

This feature of Search Console is still not fully impletemented yet and is still in testing stage. Once it will be fully impletemented by Google we might have more changes to do to fix this. But as of now above fixes can be helpful.