WIP: WooCommerce Product Gallery causes CLS

Mobile:

Desktop

I am experiencing very slow pagespeed performance results for mobile on my woocommerce single product pages.

Image in largest contentful paint: 117kb 1000 X 1000 webp format

All the other pages on my website seem fine.

Hi kirkfall,
Thanks so much for your report!

I have tested your product page several times in a row with lighthouse (mobile) and get much higher values than you - on average 55, which is not good, but much better than in your screenshot.

As far as I can see you have a lot of third party scripts active, which according to the lighthouse results are most likely responsible for the poor performance. You should first disable/remove all scripts, test again and then go through each of the points mentioned and see what you can improve. Lighthouse will give you some hints.

Alternatively, you could try an optimization or caching plugin, which may give you slightly better results. However, since the performance usually depends enormously on the server, I find it very difficult to see a general bug here.

Best regards,
timmse

Hi timmse, thank you for looking into this.

My issue is with large layout shift and large contentful paint elements. I tried third party templates and remaking my product pages from scratch and still encounter the same issues of layout shifts and large contentful paint elements. Periodically, pagespeed reports these issues don’t exist and I get a ~70 mobile score

I ran this third party template though pagespeed and it received similar issues:

I do not experience these issues on any other page.

I just experimented a bit: seems like the Product Gallery is responsible for the CLS. I have added the problem to the bug tracker. We currently already have a task for the product gallery anyway; in the best case, we solve both issues in parallel.

3 Likes

Is there an ETA for when this will be fixed?

No, unfortunately not. I’ll update this thread as soon as it’s fixed.

1 Like