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

[Craig419]

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!

[drakedev]

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?

[Craig419]

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

Thanks for your reply!

[oreoorbitz]

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.