Where do I edit my Home Page and Collection images to enable lazyloading?

Craig419
Tourist
5 0 1

Hello, I have the Debut theme and lazyloading is implemented on my product pages and it seems to work well.  I want my Home page and Collection page images to lazyload as well.  I've been searching and googling for hours and can't find specific instructions on how to do this.  I was told that these images were under Assets, but they aren't there in my Debut theme.  The Shopify support team told me they wouldn't support this modifications so they couldn't answer my question about where to make the edits. 

Below is an excerpt from another post I found on here with an explanation of "what" needs to be done.  Would anyone be so kind as to tell me where I go to make these edits? 

"The simplest way to enable lazyloading is to add loading="lazy" to your image tags."

Your help is greatly appreciated!

Replies 3 (3)
drakedev
Shopify Partner
618 132 181

Every theme could implement lazy loading in different ways, depending on the script they are using.

Debut is using lazysizes.js library and lazy loading should be already implemented on Collection page, at least it is what I found checking the code of latest version of Debut.

Which version of Debut are you using? Can you share the URL of your shop?

 

If my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.
Craig419
Tourist
5 0 1

Sorry I forgot to add my url:  https://fish419.com

Thanks for your reply!

oreoorbitz
Shopify Partner
205 24 115

So PageSpeed insight's reports two images that need to be lazyloaded.

The first, is the hero image, which is actually above the fold, so my belief is that is a false positive by PSI.

The second is the image of a person diving in the featured row section.

That image already has lazyloading enabled.

I believe the reason it is reporting that image as needing lazyloading is because the src image is too big.

You should either decrease the size of the src image, or replace it with a blank base64 image.

To find the area of code your looking for, I suggest you use shopify theme search by bold, a very useful chrome plugin. Find class to use as a reference using the browser element inspector, and put that into the bold search field.

Be sure to make a backup of your theme, and if the above is to complicated, I recommend hiring a developer to help you.

 

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes

If your looking for a pagespeed solution for your Website, take a look at: https://renderbetter.com/