Do you notice the lazy loading on this site?

chazeichazy
Excursionist
27 0 4

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/

Replies 25 (25)
Speedimize
Shopify Partner
319 48 151

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
Have a problem with speed performance, send me email here: hello@speedimize.io


If our advice was helpful please LIKE or ACCEPT SOLUTION
JoesIdeas
Shopify Expert
1670 143 428

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

 

• Creator of Order Automator (automation app to save you and your team time on admin tasks)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people
chazeichazy
Excursionist
27 0 4

@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?

chazeichazy
Excursionist
27 0 4

@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?

 
JoesIdeas
Shopify Expert
1670 143 428

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

• Creator of Order Automator (automation app to save you and your team time on admin tasks)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people
chazeichazy
Excursionist
27 0 4

@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/ 

JoesIdeas
Shopify Expert
1670 143 428

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

• Creator of Order Automator (automation app to save you and your team time on admin tasks)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people
chazeichazy
Excursionist
27 0 4

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

JoesIdeas
Shopify Expert
1670 143 428

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

• Creator of Order Automator (automation app to save you and your team time on admin tasks)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people
chazeichazy
Excursionist
27 0 4

@JoesIdeas thanks again for the help!

chazeichazy
Excursionist
27 0 4

@JoesIdeas oops 1 more thing, i just tested it on pagespeed and the score dropped from 20s to 10 now.. did fixing the lazy loading clear up the path to other dormant issues?

JoesIdeas
Shopify Expert
1670 143 428

@chazeichazy the score with that tool doesn't equal to actual speed, it's common for the score to fluctuate randomly, and it can fluctuate when clearing certain warnings. We don't know their exact algorithm for estimating score so we did a case study to show that optimizing your site and making it faster can actually make the score go down (like in your case): https://speedboostr.com/case-study-google-psi.

• Creator of Order Automator (automation app to save you and your team time on admin tasks)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people
chazeichazy
Excursionist
27 0 4

@JoesIdeas ok I had a feeling that was the case. Ill keep testing it with both pagespeed and your shopify tester to see whats going on then. have a good one!

Mircea_Piturca
Shopify Partner
1540 43 333

Sorry, I disagree with many things on this thread.

Network is not the perf bottleneck anymore. Considering this store audience I would guess that most of the users are on high-end devices with good connections.

Fixing a performance problem with more JavaScript does not seems right. Use the native lazy loading attribute (it has decent support), use the <picture> element or srcset attribute to serve images based on user viewport. Use intrinsic size to eliminate CLS.

The src attribute is required for the HTML img element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img. Don't break the web.

 

Finally—Add variant descriptions to your products
chazeichazy
Excursionist
27 0 4

@Mircea_Piturca i always love a differing opinion! since I've already went ahead and implemented LL with js, would it be even worth it to go back just to replace it with native LL? can you actually see a performance benefit to using native?

Mircea_Piturca
Shopify Partner
1540 43 333

Hey @chazeichazy 

There are several issues with JavaScript lazy loading.

Javascript is expensive. To fix a network performance you need to add additional JS. That JS will download, parse and execute. This takes time and resources.

The lazy loading mechanism can also trigger additional perf implications. To lazy load an image, on each scroll event, you need to get the image size and compare its position to the viewport. Getting the image size in JS triggers a layout reflow. This needs to happen for all images you are lazy loading, on each scroll event.

The native lazy loading makes the browser handle all of these operations. The browser has more heuristics and can decide what and when to load. It gives a much smoother user experience.

I can not advise you on what to use. The native lazy load has global support of 70~75%. But if you look at your user's you may find that it is much higher. I would expect people looking for a "thermal temperature scanner" to be on new devices with decent connections.

There may be cases when you want to use a JS approach, performance optimization is really about numbers.

 

 

 

Finally—Add variant descriptions to your products
chazeichazy
Excursionist
27 0 4
that makes sense. If i were to just add loading=lazy to each of the tags,
should I remove the src tag still or just add it to the src and not
data-src tags?
asjain
Excursionist
38 1 1

Hey @chazeichazy ,

                                      I think by just lazy loading image is not going to help you achieving good score in mobile and not going to make you website load fast, to make your website load fast and achieve good score on mobile you need to follow all steps i have gave you earlier or contact me for any help to make you website fast           

Founder of W3 SpeedUp (Shopify optimization experts, theme customization, Can Speedup all types of CMS and Framework).
E-mail: support@w3speedup.com
Skype: support@w3speedup.com
oreoorbitz
Shopify Partner
205 24 115

If your using the native lazyloading attribute, then you would want to remove the data-src and have a src for your image.

Keep in mind that like was said above, native lazyloading has 70% full browser support. Safari is one of the browsers that don't support it, so any Iphone user will not Lazyload the images on your site, this could be a serious performance hit to them, depending on how many images you have.

Also, you cannot apply native lazyloading to background images.

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes

If your looking for a pagespeed solution for your Website, take a look at: https://renderbetter.com/