Product images loading priority

Hi @cometto,

Thanks for sharing your site performance test with us.

Image loading takes a little more compared to other lighter elements on the page, this is just normal. You could use plugins like https://www.ads-software.com/plugins/preload-images/ to preload images and get a faster page loading experience.

You may find helpful this blog post written by one of the WooCommerce contributors which contains tips and recommendations to keeping product pages loading quickly:

https://woocommerce.com/posts/fast-high-quality-product-photos/

Let us know if you have more questions.

@rainfallnixfig

Hi Mirko,
1. As for the preload of images, my main optimizer – flyingpress – does this. Should I try to manually add a path to each main product image (I have 15 in total)?

I don’t think it helps – in flyingpress I have the preload critical images (above the fold) option active. See attached screenshot: https://ibb.co/tP9GX6b.

Let me know if it is worth adding the paths I wrote about in point 1, but I don’t think it helps.

2. I can’t eliminate render blocking … I’ve tried everything, including critical css generation – it always is.
It seems to me that the problem may be dictated by the flexslider animation? is it possible?

Why is the main picture in waterfall also loaded after loading thumbnails ?.

PS: I also used the options from css / js for optimization. Both of them are minified. + in case of JS and deferred everything + flyingpress has an interesting option “loads scripts on user interaction”. Manual, step by step – I turned on script activation for everything that was unnecessary:
`stickThis.js
jq-sticky-anything.min.js
frontend.js
variations.js
notices.js
add-to-cart.min.js
jquery.blockUI.min.js
jquery.cookie.min.js
js.cookie.min.js
underscore.min.js
wp-polyfill.min.js
wp-util.min.js
woocommerce.min.js
wp-content/plugins/customer-reviews-woocommerce
wp-content/plugins/g-business-reviews-rating
wp-content/plugins/woo-advanced-qty_3.0.3
variation.min.js
frontend.min.js
frontend-pro.min.js
element.js
translate
developers.google.com
photoswipe-ui-default.min.js
js.js
smartsuppcdn.com
smartsuppchat.com
smartsupp.com
googletagmanager.com
google-analytics.com
googleoptimize.com
adsbygoogle.js
xfbml.customerchat.js
fbevents.js
widget.manychat.com
cookie-law-info
grecaptcha.execute
static.hotjar.com
hs-scripts.com
embed.tawk.to
disqus.com/embed.js
client.crisp.chat
matomo.js
usefathom.com
code.tidio.co
metomic.io
js.driftt.com
cdn.onesignal.comutil.js’

Will be grateful for you opinion what you think. Will also check 2nd link you sent to me but i think most of these things are done.

Hi there,

As for the preload of images, my main optimizer – flyingpress – does this.

Thanks for letting us know you’re using the FlyingPress plugin to optimize and preload images. We do not support third-party plugins on these forums, so I recommend contacting the FlyingPress support team which may help you set the best settings for their plugin. You can open a support ticket here: https://flying-press.com/support/.

I can’t eliminate render blocking

If you still need help with this, we suggest hiring a developer or one of the customization experts listed at https://woocommerce.com/customizations/.

Kindly note that this particular forum is for questions that are directly related to the features and functionality of the free WooCommerce plugin. While we’re experts on our own products, third-party plugins are best supported by their own developers.

Thanks!