Lazy Load Product Images

Hi,

I’ve Lazy Load enabled. Still, when you visit a product ALL images load in FULL size. As a result, product pages weigh as much as 8-10 MB. This is a huge size for mobile users. How can I make the lazy load prevent full image size from loading? Only when a user clicks on an image it should load the full size.

Sample page: https://demostore.work/TestShop/product/timberland-mens-6-inch-basic-waterproof-boots-padded-collar-2/

Thank you

Hi,

Most of the images on that page are located at the top of the page in products gallery and they are huge https://gyazo.com/df795a19a07ec7fe0cd9723c9ceaa2b3
When you visit this page, these images are instantly visible and you see that they are loaded just as without lazy loading.

Kind Regards

Hi Artem,

Your theme is amazing. I think it’s the best looking WooCommerce theme, and it’s the theme with the most features. However, with the product image gallery there is a glitch, and we need to correct it.

Loading all product images upon page load, is not a good practice. No professional website does it. When the page loads, only the main image should load + the thumbnails of the image gallery – not the full image of the image gallery (which can make pages very very heavy).

See for example how Flatsome keep product page light. They don’t load full size images from the image gallery. Only when you click on a thumbnail it loads the full image: https://flatsome3.uxthemes.com/shop/women/varanise-cn-tee-hilfiger-denim/

I’m planning on using 10-15 images per product. Each image will be about 2000px X 2000px. I can’t have all full size images load upon page load. The size of the page will be huge, and customers (and Google) don’t like it.

I really hope you can fix it. Having huge product page size is a big issue. Except for this, I find your theme as THE best theme for WooCommerce.

Thank you

Hello,

Thank you for your suggestion. We will consider implementing this in the future for sure.

Kind Regards

Hi Artem,

Thank you for acknowledging the issue with product image gallery. I know many of your theme buyers only use 2-3 medium size images for their products. However, some users (me for example) need to use 10-12 large images per products. Without a solution I can’t use your theme. Having product pages that weigh 5-10 MB is not acceptable.

I love your theme, and I see how much attention you paid for every detail. At the same time, I really need a solution (even temporary) for this BIG issue. Please tell me how I can delay the loading of full size image gallery till users click on it.

Thank you very much for your help!!!

Yes, we understand. On other themes, there is no zoom effect for product images. It takes full photos and makes such a big size for the page. Anyway, we will review this in the next update for sure.

Thank you for the update Artem. I will wait for the next update.

Just before we close this topic, I was hoping to launch my new site next week. Can you come up with a temporary solution? I’m willing to give up on the zoom, if that will solve the page size.

Try to disable the zoom completely and leave the only lightbox on click. It should resolve the problem.

Hi Artem,

I’ve disabled the zoom, and now the page size is 1.3MB. With the zoom enabled it was 7MB. That is a big help, and I hope you are going to improve the zoom function soon, as I would like to use this nice feature.

Also, even when the zoom is disabled, upon page load ALL of my image gallery (12 total) load twice: once in small size (300px) & once again in medium size (600px). See it for yourself here: https://demostore.work/TestShop/product/test-products/

I’m glad the large images don’t load anymore, but there is no reason to load ALL images in small & medium size upon page load. Only the main image should load (in medium size) + the 4 visible thumbnails (in small size). The rest of the thumbnails will load only when someone is scrolling through the thumbnails + medium size images should load only if you click on its thumbnail.

Implementing the above will decrease the page size from 1.3MB to about 0.7MB (~50% saving). This is HUGE savings, and it will lead to a much better page performances.

Can you please confirm again that you are going to improve the product page images on the next update? The product page is by far the most important page in any shop, and usually the most common page on a shop website. Making sure it’s fully optimized should be a top priority.

Thank you again for your help in resolving any issue.

We will check all these problems in our updates for sure. But we can’t guarantee that it will be implemented very soon.

I’m glad to know you are aware of the issue. Since this is a significant issue on all product pages (the most important page on any shop), I really hope you will take care of it within a reasonable time.

Thank you for making this great theme!

Thank you! Yes, we will check this for sure.

[Author]

Posts