Need help to lazyload my images (can't find them)

[Steakpuree]

Hi guys,

I'm trying to lazyload the images on my store so it can load faster, but I'm having troubles implementing it. I think I understand what I have to do, but I can't find my images, no matter how hard I look for them. I read that they were in the assets folder, but I still can't find anything. Please tell me if you've got any tips.

Here is my website 

Thank you very much !

[Anonymous]

Hi @Steakpuree 

Aibek is here from Speedimize.io 

First, we want to make sure. lazysizes.min.js https://raw.githubusercontent.com/aFarkas/lazysizes/gh-pages/lazysizes.min.js it can delay the video download, that is, it will also delay the video download. base.js.

We checked at home to make sure everything works. Added the lazyload class and changed the src to data-src:
<iframe class="lazyload" data-src="//www.youtube.com/embed/{{ section.settings.video_url.id }}?rel=0&showinfo=0&vq=720" width="850" height="480" frameborder="0" allowfullscreen></iframe>

You should also succeed if you use it as in the example above. But if you use the video as a banner, that is, when the page loads, the video is immediately visible to the user, then lazyload will immediately work and the video will start loading. This method helps if the video is located at the bottom of the site, not yet visible to users.
If you use it as a banner, we recommend using an image instead of a video. This way you will increase your productivity. This is the most correct way.
There is another option, to load the video only when clicked.

In this case, you can use this method - https://css-tricks.com/lazy-load-embedded-youtube-videos/ 

Hope that helps you. 

[JohnCodes]

Hi @Steakpuree 

So in most cases with lazy loading, you won't directly be looking for the exact image. Instead, you'll want to search for the line(s) of code that are loading that image up. This is where you'll apply your lazy loading.

The below snippet shows an image tag, which is what allows most images to load within your theme. These are what you want to search for when trying to apply lazy loading.

<img src="image.jpg" />

You'll find most of these in your Sections and Snippets folders. The Assets folder is typically reserved for stylesheets and scripts. You can have images within the assets folder, but they're still likely being loaded by image tags in other locations. Some common files we typically come across that house the majority of your image tags are:

• product-card-grid.liquid
• product-grid-item.liquid
• collection-list.liquid
• product-template.liquid
• collection-grid-item.liquid

Unfortunately, every theme is different so it's impossible for me to tell you what exact files to check. However, the ones mentioned above are pretty common.

Beyond searching for the images, we have a great article on lazy loading that goes into a little more detail on how to implement: How to Lazy Load Images on Shopify to Make Your Site Faster 

I hope this info was helpful. If you need any assistance, please feel free to reach out to our team at speedboostr.com/contact.

[Steakpuree]

Hi @JohnCodes 

Thanks for your insights ! I have looked at the files you mentionned, as well as the link you gave me, and I realized I already have lazysizes.min.js. I use the theme Brooklyn, and it seems that it is already installed by default. However, my images don't seem to be lazyloaded at all, and the script lines for them are pretty weird, I'm not sure how I should modifiy them. I added some schreenshots of them so that you can see.

Thank you for your time and you answers,