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.
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.
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:
@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.
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