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!

0 Likes

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 the problem is solved remember to click ✅ to Accept Solution
• Press Like, if the answer was helpful
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
0 Likes
Craig419
Tourist
5 0 1

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

Thanks for your reply!

0 Likes
oreoorbitz
Shopify Partner
97 10 63

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
0 Likes