VENTURE THEME - How to Lazyload offscreen/hidden images?

Solved
GentMen
Excursionist
35 0 7

Thank you in advance for assisting!

I have managed to lazyload product images, however, I need to lazyload hidden images to improve page SPEED.

( Images that are hidden are the ones in the dropdown menu & images that are not displayed on the first screen of the product, but rather the ones you need to scroll to see.

Looking forward to any input!

Thanks!

0 Likes
Michal_Morek
Shopify Partner
800 71 132

Hello @GentMen,

Kindly welcome to the Shopify Community.

Lazy Loading needs deep work explained here.

Please let me know if you have any further questions.

Founder of Shopify agency - Accomplishify.com
If you would like to hire us as Shopify experts, please reach out via:
  • Email michal.morek@accomplishify.com
  • WhatsApp +48 507 613 425
GentMen
Excursionist
35 0 7

Thank you kindly for your reply, but as I am a bit of a "Step by step novice" - that page nor any other pages I have found explain where to edit the class/img src to lazyload ALL images other then the featured ones.

0 Likes
Michal_Morek
Shopify Partner
800 71 132

Hello @GentMen 

Please Go to Online Store -> Theme -> Edit code then go to snippets folder. Did you found responsive-image.liquid and responsive-bg-image.liquid files? yes? So show me their content.

Founder of Shopify agency - Accomplishify.com
If you would like to hire us as Shopify experts, please reach out via:
  • Email michal.morek@accomplishify.com
  • WhatsApp +48 507 613 425
GentMen
Excursionist
35 0 7

There isn't such a file in the snippets section  


GentMen
Excursionist
35 0 7

I think the images that are causing the slower load times are actually Mega Navigation images which I am not sure how to lazyload without messing up the collection page images nor featured product image.

Let me know if you need anything further to help  

And again, thank you so much for your help!

0 Likes
GentMen
Excursionist
35 0 7

@Michal_Morek 

I managed to fix the drawer/meganav lazyloading by editing it in the product.liquid

But, the is one last issue which I am not able to fix after a long time:


Actually, I found the reason to be the lazyloading of product images ( not the thumbnails of the product, but the products themselves ).


I suspect it's because there is some rule regarding the loading of the featured image.


Do you have any input on how to lazyload product images other than the first one (The main one on the product )?


Let me know if you need info on the website or anything, 

best regards!

 

0 Likes
Michal_Morek
Shopify Partner
800 71 132

Hello @GentMen

You are welcome.
I properly read your problem and need to carefully analyze your website to provide a solution here.
Would you kindly share your website URL and if your website is password protected then also provide a password?

Please let me know if you have any further questions.

Founder of Shopify agency - Accomplishify.com
If you would like to hire us as Shopify experts, please reach out via:
  • Email michal.morek@accomplishify.com
  • WhatsApp +48 507 613 425
GentMen
Excursionist
35 0 7

Thank you so much for your help, here you go!

0 Likes
GentMen
Excursionist
35 0 7

Looking forward to your answer!

0 Likes