FROM CACHE - en_header

VENTURE THEME - How to Lazyload offscreen/hidden images?

Solved
BeautifulDesign
Explorer
54 0 8

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!

Accepted Solution (1)

Accepted Solutions
Michal17
Shopify Partner
835 73 158

This is an accepted solution.

Hi @BeautifulDesign 

In case you want to edit the code of your website to enable lazy loading :

  1. Download lazy loading lib
    Download this script file.
  2. Create a new asset: lazysizes.min.js and Copy and paste the downloaded script file content into the created file.
    656650_928568.jpg
  3. Integrate the script into theme.liquid, before the closing </head> tag, by adding the following code:

 

 

 

<script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>

 

 

 

  • To initialize lazy loading, you just need to add the lazyload class to your images and change the src attribute to data-src.
    Example : 

 

 

 

<img src="{{ featured_image | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_image.alt }}" id="FeaturedImage-{{ section.id }}" class="product-featured-img" style="max-width: {{ height }}px;">

 

 

 


become: 

 

 

 

<img data-src="{{ featured_image | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_image.alt }}" id="FeaturedImage-{{ section.id }}" class="lazyload product-featured-img" style="max-width: {{ height }}px;">​

 

If you have any further questions, please do reach out either here on the forum, or via private message/email.

 

View solution in original post

Replies 13 (13)
Michal17
Shopify Partner
835 73 158

Hello @BeautifulDesign,

Kindly welcome to the Shopify Community.

Lazy Loading needs deep work explained here.

Please let me know if you have any further questions.

BeautifulDesign
Explorer
54 0 8

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.

Michal17
Shopify Partner
835 73 158

Hello @BeautifulDesign 

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.

BeautifulDesign
Explorer
54 0 8

There isn't such a file in the snippets section 😞 


BeautifulDesign
Explorer
54 0 8

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!

BeautifulDesign
Explorer
54 0 8

@Michal17 

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!

 

Michal17
Shopify Partner
835 73 158

Hello @BeautifulDesign

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.

BeautifulDesign
Explorer
54 0 8

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

BeautifulDesign
Explorer
54 0 8

Looking forward to your answer! 🙂

Michal17
Shopify Partner
835 73 158

Hi @BeautifulDesign

Hope you're having a great day!

We have two ways to do lazy loading: There is a Shopify application that you could use or edit the code of your website. If you are ready, I can help you step by step to fix your issue.

If you have any further questions, please do reach out either here on the forum, or via private message/email.

Michal17
Shopify Partner
835 73 158

This is an accepted solution.

Hi @BeautifulDesign 

In case you want to edit the code of your website to enable lazy loading :

  1. Download lazy loading lib
    Download this script file.
  2. Create a new asset: lazysizes.min.js and Copy and paste the downloaded script file content into the created file.
    656650_928568.jpg
  3. Integrate the script into theme.liquid, before the closing </head> tag, by adding the following code:

 

 

 

<script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>

 

 

 

  • To initialize lazy loading, you just need to add the lazyload class to your images and change the src attribute to data-src.
    Example : 

 

 

 

<img src="{{ featured_image | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_image.alt }}" id="FeaturedImage-{{ section.id }}" class="product-featured-img" style="max-width: {{ height }}px;">

 

 

 


become: 

 

 

 

<img data-src="{{ featured_image | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_image.alt }}" id="FeaturedImage-{{ section.id }}" class="lazyload product-featured-img" style="max-width: {{ height }}px;">​

 

If you have any further questions, please do reach out either here on the forum, or via private message/email.

 

BeautifulDesign
Explorer
54 0 8

Thanks. 

It was needed to be done through -npm Install with the help of a developer for anyone that was interested in the subject.

Michal17
Shopify Partner
835 73 158

Hi @BeautifulDesign 

You are welcome. I'm glad you were satisfied.

If you have any further questions, please do reach out either here on the forum, or via private message/email.