Do you notice the lazy loading on this site?

chazeichazy
Tourist
27 0 3

The previous developer that was contracted to make this site states that lazy loading is already implemented, but I wanted to get your thoughts on whether or not you notice it. Also, do these images seem compressed enough?

 

site: https://mairobotics.com/

0 Likes
Speedimize
Shopify Partner
87 6 29

Hi @chazeichazy 

Aibek is here from Speedimize.io agency. 

Lazyload is there, but not used correctly. It is better to use <img /> tags when using lazyload without setting the src attribute. Because of this, some pictures are referenced by Pagespeed
https://prnt.sc/xmz6vl . Also, because of this, errors occur.


We can show it in examples. You currently have this:
<img class = "lazyload" src="img_url_200x200" data-src="img_url_responsive" data-srcset and so on /> is just an example.

We advise you to remove the src or put the image placeholder there. Of course, the easiest option is to remove src.

This should help.

We Speedimize your store
Speed performance is our priority but with comfort

If our help was useful, please like it or accept it as a solution :)
0 Likes
JoesIdeas
Shopify Expert
1195 106 290

@chazeichazy  your developer is right, it's just a different kind of lazy loading. There are 2 kinds of lazy loading, what we call "placeholder lazy loading" and "true lazy loading", reference: https://speedboostr.com/shopify-lazy-loading.

Placeholder lazy loading means loading a smaller image during page load to show some quick content, then the full size image when the user scrolls.

True lazy loading means loading the image only as the user scrolls.

Placeholder lazy loading was more common back in the day when load speeds were slower, but in my opinion true lazy loading is the way to go now, because images load faster + it saves your initial page load speed, which is a factor with search engines, so you want that first page load tightened up.

Usually you can just remove the src attribute, like we show in that guide above (and the previous poster mentioned), but make sure you do this on a back up theme because sometimes it can go wrong. Quick tip on that is always duplicate your theme and work on the backup theme in case you make a mistake or a change affects the layout unexpectedly.

If you're doing the editing, you can identify those image elements that you need to modify by either downloading your theme file and doing a search for " src", then update it in your working (backup) theme. 

 

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 fulfill orders + email notifications).
Creator of Theme Scientist (A/B testing app) and Tip Jar (add a tip button to your store).
0 Likes
chazeichazy
Tourist
27 0 3

@Speedimize  I knew it! I saw a bunch of guides saying replacing the "src" with data-src or even just removing it but I wasn't sure if the current implementation was just a different way of doing it. So, if I were to remove all the "src"'s from the img tags, what should i do to link the images instead?

0 Likes
chazeichazy
Tourist
27 0 3

@JoesIdeas 

I knew it! I saw a bunch of guides saying replacing the "src" with data-src or even just removing it but I wasn't sure if the current implementation was just a different way of doing it. So, if I were to remove all the "src"'s from the img tags, what should i do to link the images instead?

 
0 Likes
JoesIdeas
Shopify Expert
1195 106 290

@chazeichazy  The way lazy loading works, typically, is that you have a JavaScript library (snippet of code) that looks for images and also tracks where the user is at on the screen. When they have scrolled to where an image should be shown, the code in the library grabs the image from the data-src and updates the code to replace with src to show the image.

Since you already have a lazy loading library, then it should be looking for that data-src attribute, which means that the src attribute is not needed. This is true most of the time, depending on the library and how it works, but also for images above the fold that don't need to be lazy loaded, then it's good to leave the src attribute (and do not need data-src) since you want the images to load immediately.

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 fulfill orders + email notifications).
Creator of Theme Scientist (A/B testing app) and Tip Jar (add a tip button to your store).
0 Likes
chazeichazy
Tourist
27 0 3

@JoesIdeas  that makes sense. so in my code I'm seeing a lot of the following:

<img class="main_image lazyload"
             src="{{ block.settings.image | img_url: '200x200' }}"
             data-src="{{ img_url }}"
             data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
             data-aspectratio="{{ block.settings.image.aspect_ratio }}"
             data-sizes="auto"
             alt="{{ block.settings.image.alt | escape }}">

where there is both src and data src. what should i do in this case? I replaced my previous lazysizes.js with the lazysizes.min.js in your tutorial link but my whole site right now has blurry photos https://mairobotics.com/ 

0 Likes
JoesIdeas
Shopify Expert
1195 106 290

@chazeichazy I would keep the same library you have so the version is consistent with the code.

With the code you shared, it looks like the src attribute loads a small thumbnail image (200px) at page load, and then as the user scrolls, it loads the "real" image (larger size).

I would try removing the src attribute. What that should do is prevent the initial thumbnail image from loading, but then load the regular image as the user scrolls.

Then to confirm it's working, you can briefly publish that theme then run it through an analysis tool to make sure the image does not get flagged for lazy loading. If the src attribute is not there, the image won't show, so it won't get flagged in analysis tools (and this is where the lazy loading library comes into play, as the user scrolls, it grabs the image url from data-src and adds the src attribute, which displays the image to the user in their browser).

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 fulfill orders + email notifications).
Creator of Theme Scientist (A/B testing app) and Tip Jar (add a tip button to your store).
0 Likes
chazeichazy
Tourist
27 0 3

@JoesIdeas removing the src from all img tags worked! it no longer shows up under your shopify analyzer and pagespeed. if you don't mind taking one last look thatll be great. 

0 Likes
JoesIdeas
Shopify Expert
1195 106 290

@chazeichazy Wooooot ya looks good, results are looking leaner and you've just leveled up your performance. Well done!

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 fulfill orders + email notifications).
Creator of Theme Scientist (A/B testing app) and Tip Jar (add a tip button to your store).
0 Likes