[Resolved] Performance of product gallery in Woocommerce

[Matthew]

Hello,

I’m trying to optimize my woocommerce shop after noticing it has a 25 web vitals score. I ran it through gtmetrix and it’s a bit better: https://shorturl.at/dgkX0

I disabled some nonessential plugins like the “WP Show Posts” which I can now see has been replaced by GenerateBlocks. And I noticed a few of my shop sidebar widgets are now marked as “Legacy”.

So I’m wondering, is there any performance-related updates or posts that I’m unaware of that I should be applying to the “Merch” skin from the site library? Or alternatively, is there a core vitals test recommended theme from the generatepress site library that may increase my performance and I should change to?

I know a lot of my performance bloat is probably related to nontheme factors, but every little optimization seems to add up. The image gallery for individual product pages seems particularly troublesome, as the images can’t be lazy loaded it seems (though I’ve seen specialized woo themes that do optimize this) so any enhancements there could help.

Thank you.

[Fernando]

Hi Matthes,

Can you provide the link to the specific page in question?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Matthew]

Sure Fernando, sorry the shorturl should have worked. I’ve created a new one here: https://cutt.ly/pB1lzRL

[Fernando]

Hi Matthew,

I believe you’re using Perfmatters. Can you try their recommendation here: https://perfmatters.io/docs/defer-javascript-wordpress/

Then, for the images, it would be great for site performance as well if you can change their format to next-gen format. An example would be webp.

You can also try using a CDN as well. Using a CDN should ideally help improve to loading time of your site’s resources. One popularly used is Cloudflare.

[Matthew]

Thanks Fernando.

I’m currently already deferring javascript through WP Rocket, yesterday I installed PerfMatter for a few extra enhancements like Woocommerce conditional loading of assets and card defrag etc.

The only thing I can’t seem to enable is Wp Rockets Delay Js setting as some iPhone users struggle adding items to the cart. I thought this might be an issue with GeneratePress, but it seems to be common with wp rocket and other themes also: https://github.com/wp-media/wp-rocket/issues/3142

I’m in the process of waiting for ShortPixel to get back to me on how to create WebP versions of my current media library without optimizing the images themselves as I’ve already done this manually prior to uploading.

My web host is Kinsta which runs on the Cloudflare CDN already.

As I seem to have an older version of the Merch site from your Site library, is there any way to update any changes you guys have pushed out relating to this imported site? Or is a there a tutorial of what changes/settings I need to be enabling? I noticed I had an old Typography module that apparently has been deprecated and I had to enable a new setting in the Customizer > page to fix it.

Thanks

[David]

Hi there,

So I’m wondering, is there any performance-related updates or posts that I’m unaware of that I should be applying to the “Merch” skin from the site library?

The only change made to the Merch Site was switching the GP Dynamic Typography on.

Or alternatively, is there a core vitals test recommended theme from the generatepress site library that may increase my performance and I should change to?

When we view what the Theme is responsible for, there is little difference in performance across any of the sites.

To get a better understanding of what your site is doing, unless you can use the browser developer tools, i would recommend testing on webpagetest.org. It will give you a much more detailed report on what is loading and what the issues are.

I ran a test on your latest product ( Single product page ) seen here:

https://www.webpagetest.org/result/221021_AiDcPC_AAZ/1/details/#waterfall_view_step1

Major issue in summary:

1. The page made 275 resource requests. In comparison the demo page single product on the original Merch site makes 50.
2. Those 275 requests are made across 29 different network connections – ie. a lot of resources loaded from 3rd party servers.
3. Around 125 of those resources are Javascript files.
4. the initial 20 or so requests are render blocking – although in this case that is less of an issue.

The fundamental issue is the browser is having to a) make lots of different network connections b) download a huge amount of resources and c) has to run a tonne of javascript.

If you check the Waterfall report, at the end you will see the line that says Long Tasks, those red blocks show that the browser is too busy running Javascript to do anything else like display the LCP element.

Your biggest challenge i would say is reducing the amount of Javascript on the page.
A lot of which coming from 3rd party servers, those need to be deferred so they don’t tie up the main thread and block the LCP from being rendered.

In addition i did spot some JS files like these:

/wp-includes/js/dist/block-editor.min.js?ver=1aaefec40aaf345b5e6e969304e78e07
/wp-includes/js/dist/block-serialization-default-parser.min.js?ver=8ee151736a1e51db2bafbb61ddd60634
/wp-includes/js/dist/blocks.min.js?ver=658a51e7220626e26a92a46af5c2e489

That is a just a few of them, and whats peculiar is, those are genarally seen loading in the Admin / Editor screens. They are not front end scripts. As they all have this weird query string eg. ?ver=658a51e7220626e26a92a46af5c2e489 it looks like they are cached files.

Whichever plugin you’re using for caching i would suggest you ask them to take a look to make sure they are not loading backend / editor scripts on the frontend.

[Matthew]

Thank you David for clarifying the updates to the Merch skin, and the actionable advice on what may be affecting my load times, I appreciate it and will look further into working on those performance bottlenecks you’ve pointed out :).

[David]

You’re welcome

[Author]

Posts