wp-media / wp-rocket

Performance optimization plugin for WordPress
https://wp-rocket.me
GNU General Public License v2.0
698 stars 217 forks source link

Enhancing the lazy-loading of images from the product page gallery #3695

Closed gevcen closed 3 months ago

gevcen commented 3 years ago

Is your feature request related to a problem? Please describe. Assume that you have a WooCommerce product that contains a very high number of variations (90 variations for instance, as in my case). Each of these variations will need to display a specific image, and therefore the gallery will contain the full number of images to correspond to each of these variations.

Describe the solution you'd like An image is worth thousands of words. As you can see below, the gallery displays on the screen only 4 images.

Since the gallery itself is within the viewport on both desktop and mobile, the entire gallery (and all of its images) are loaded on pageload. In other words, all the 90 images are downloaded on page load.

This is obviously irrelevant and inefficient for speed and performance reasons.

image

Describe alternatives you've considered We should download on pageload only the images from the gallery within the viewport that are effectively displayed. In this case, only 4 images should be downloaded instead of 90 images.

We should not download on pageload the images from the gallery within the viewport that are not yet displayed in the screen unless the user scrolls the gallery. Those images should be lazyloaded and downloaded only as the user scrolls them.

Additional context GTmetrix : https://gtmetrix.com/reports/www.gevcen.be/ki89QWe2/

Video capture : https://sgevcen.tinytake.com/tt/NTIxNjQzMl8xNjMxNjc5Mw

piotrbak commented 3 months ago

Most likely it's fixed on 3.16. Still, we didn't receive any other feedback here.