why lazy loading images not working ?

phpfaruk
Excursionist
30 1 1

I have added lazyload class but it is not working.

when i check inspect element , it is show me lazyloaded. but not working.

how can I fix it?

see screenshot please.

lazy-02.pnglazy-01.pnglazy-03.png

0 Likes
JoesIdeas
Shopify Expert
1302 118 337

It looks like it's because you have the src attribute in the image element.

The src attribute is what tells the browser to load the image from the url in that field.

What lazy loading does is add the src attribute when the user scrolls down. So what you do is add the image url in the data-src attribute, which does not load the image by the browser, but is used by the lazy loading library to identify the image url and insert it into a src attribute when the user scrolls and the image is to be loaded.

In most cases you can just remove the src attribute. In your case it looks like it's loading a placeholder image, so make sure to do this on a backup theme first in case your theme is coded in a way that the placeholder helps to form the grid.

Founder of Speed Boostr (Shopify optimization experts, theme customization, custom app development).
Creator of Shopify Analyzer (first performance analysis tool for Shopify sites, free for the Shopify community).
Creator of Order Automator (auto tag orders and customers + auto fulfillment + more automations).
More apps: Theme Scientist (A/B testing), Tip Jar (add a tip button), File Optimizer (optimize CSS, JS, Liquid).
0 Likes
bluewave
Tourist
7 0 2

the src attribute is actually fine to display a placeholder, you can overwrite the value with JS on the onload image event. Without a closer look at how that code is implemented, that is the best direction that I can provide.

0 Likes
phpfaruk
Excursionist
30 1 1

yes i have removed src . but as yet it is showing me missing 16 images lazy loading images . as you can see my screenshot.

my site is https://www.otteryjewellery.com.au . you can check shopify analyzer.

0 Likes
phpfaruk
Excursionist
30 1 1

how can I fix it below screenshot.

missing lazy imagesmissing lazy images

0 Likes
JoesIdeas
Shopify Expert
1302 118 337

Hi @phpfaruk  I see you got it down to 7, here are the 7 remaining images: https://analyze.speedboostr.com/result/fvlmy3h423/rule/lazyLoadableImagesBelowTheFold

Here's how you can locate if there's a problem and solve:

1) Find where those images are loading in your theme (probably index.liquid, or if they're from a section in your Customize theme, look for a Section file with a name like the feature in the customize area.

2) If you identify them, lazy load them.

3) If they are not coming from your theme, then maybe they're coming from an app. In that case you'll have to contact the app developer to see if they can lazy load.

If all those turn up and it looks like they're being lazy loading, but still getting the warning, it could mean that your home page banner is loading with a delay, or does not have a set height. In that case, the images below it will actually load on page load because they get moved above the fold, but then analysis tools will think they are below the fold because of the screen height.

But looking at your page I can see this image for example doesn't have a lazy load class or data-src attribute applied, so it's not being lazy loaded. In that case, steps 1-3 above will help you solve that:

Screen Shot 2021-02-05 at 1.28.24 PM.jpg

Founder of Speed Boostr (Shopify optimization experts, theme customization, custom app development).
Creator of Shopify Analyzer (first performance analysis tool for Shopify sites, free for the Shopify community).
Creator of Order Automator (auto tag orders and customers + auto fulfillment + more automations).
More apps: Theme Scientist (A/B testing), Tip Jar (add a tip button), File Optimizer (optimize CSS, JS, Liquid).
0 Likes
phpfaruk
Excursionist
30 1 1

Actually, I can't find these section where is located this file.

is there any way to add class and data-src with jquery function? like i will add class lazyload and replace src to data-src with jquery function? 

0 Likes
JoesIdeas
Shopify Expert
1302 118 337

@phpfaruk another tactic you can use to find the code is to download your theme, then do a search for the ID / class that pertains to the image element or containing div.

What I usually do in that case is:

1) Open chrome dev tools and look for an ID.

2) Download the theme files and do a search locally.

3) Find the file where the code is.

4) Update in your theme.

I explain more about that here: https://speedboostr.com/finding-and-fixing-console-errors.

Your other idea, I personally wouldn't do that, because you have to wait for jquery library to load, then alter the element. I also try to never use jquery, it just adds extra weight and usually is not necessary.

Founder of Speed Boostr (Shopify optimization experts, theme customization, custom app development).
Creator of Shopify Analyzer (first performance analysis tool for Shopify sites, free for the Shopify community).
Creator of Order Automator (auto tag orders and customers + auto fulfillment + more automations).
More apps: Theme Scientist (A/B testing), Tip Jar (add a tip button), File Optimizer (optimize CSS, JS, Liquid).
0 Likes
SolidandMarl
New Member
1 0 0

Hi Joe,

 

I am trying to implement lazy loading to my store. I am NOT a coder by any means but recourses etc. dictate me doing it myself! eeekkk

 

Thus far it's going alright but I can't, for the life of me, find the "<img src=" for the banners I use for navigation on my home page. Any idea where these might be or should be located within my theme (Symmetry)?

 

Edit - The banners are added in the Online store > Navigation > Menus > Main Menu 

0 Likes