Re: Do you notice the lazy loading on this site?

Do you notice the lazy loading on this site?

chazeichazy
Excursionist
27 0 5

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)

Not applicable

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.

chazeichazy
Excursionist
27 0 5

@Anonymous  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 5

@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 Partner
2321 211 616

@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 (automate tagging, fulfillment, Amazon, notifications + more)
• Shopify developer for 10+ years, store owner for 7 years
• I also make guides like Shopify Automation Tips and How to Figure Out Why You're Not Getting Sales
chazeichazy
Excursionist
27 0 5

@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 Partner
2321 211 616

@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 (automate tagging, fulfillment, Amazon, notifications + more)
• Shopify developer for 10+ years, store owner for 7 years
• I also make guides like Shopify Automation Tips and How to Figure Out Why You're Not Getting Sales
chazeichazy
Excursionist
27 0 5

@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 Partner
2321 211 616

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

• Creator of Order Automator (automate tagging, fulfillment, Amazon, notifications + more)
• Shopify developer for 10+ years, store owner for 7 years
• I also make guides like Shopify Automation Tips and How to Figure Out Why You're Not Getting Sales
chazeichazy
Excursionist
27 0 5

@JoesIdeas thanks again for the help!

chazeichazy
Excursionist
27 0 5

@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 Partner
2321 211 616

@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 (automate tagging, fulfillment, Amazon, notifications + more)
• Shopify developer for 10+ years, store owner for 7 years
• I also make guides like Shopify Automation Tips and How to Figure Out Why You're Not Getting Sales
chazeichazy
Excursionist
27 0 5

@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
1548 44 346

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 5

@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
1548 44 346

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 5
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
chazeichazy1
Visitor
3 0 0

@asjain what else do you think i can do? I'm looking at pagespeeds test results and was thinking of working on taking out unused css next https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fmairobotics.com%2F

asjain
Excursionist
38 1 1

@chazeichazy1  TO improve your score in pagespeeds test results you need to do some changes in code and defer js and lazy load UN-use Css file which are not needed to be load at first fold of website and load them all on mouse move but i warn you by doing so may result in break in website functionality and design so take help from developer who have expertise in Liquid programming language because shopify use Liquid language or for any support or help ping me i have expertise in Liquid programming language or for more help read here :-    Best Practices and Tips to speed up your Shopify Store or contact me for more help :- https://w3speedup.com/contact-us/

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
257 31 132

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 pagespeed consulting
https://www.upwork.com/freelancers/~01a19b6cd90193f4f6?viewMode=1&s=1017484851352698949
chazeichazy
Excursionist
27 0 5

@oreoorbitz thats a good point about safari. native loading might not be the best choice for us in this case then since a majority of our visitors are on mobile. any recommendations on how to move forward?

oreoorbitz
Shopify Partner
257 31 132

So if you want to further improve your pagespeed insights score, here are my recommendations, and thoughts

Remove unused css:

This is really tricky to implement in shopify, mainly because of all the conditional logic.

Imagine you get rid of the css for the newsletter section, since your not using it, but then you decide you want to have it, you'd have to go through the trouble of adding it back. Or imagine you have content that will show depending on whether a user is logged in or not.  There is a library to remove unused css, PurgeCss , but to implement it into  shopify via automatic build process would require a complicated setup.

So things I recommend you do:

Remove lazyloading from the largest contentful content, in your case the image of a cellphone

Add preload hint pointing to your largest contentful content ( the image of a cellphone )

Make resources non render blocking

Don't load the youtube video till a user clicks on the banner for the video's banner image. Load it using AJAX once a user clicks on the image

Consider deferring the load your chat app if it can be done.

Add display: swap; setting to your fonts. 

Available for pagespeed consulting
https://www.upwork.com/freelancers/~01a19b6cd90193f4f6?viewMode=1&s=1017484851352698949
chazeichazy
Excursionist
27 0 5

@oreoorbitz i will check out purgecss thanks. so youre suggesting i replace the lazyloading with preload hint? how do i do that? can you point to a specific example where i can make a resource non render blocking? how can i implement the non-loaded youtube video if i uploaded the url using shopifys video block? what does display:swap do to my fonts?

oreoorbitz
Shopify Partner
257 31 132

There's a limit to how much help I give out for free, because of time constraints, so I can't break down every fix I recommend exactly.

But if you want to implement these suggestions yourself, there are plenty of resources to help understand.

For making resources non render blocking( in your case just css )

https://web.dev/render-blocking-resources/

https://stackoverflow.com/questions/32759272/how-to-load-css-asynchronously#answer-46750893

https://web.dev/extract-critical-css/

https://www.sitepoint.com/how-and-why-you-should-inline-your-critical-css/

 

For display: swap;

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

https://css-tricks.com/almanac/properties/f/font-display/

For preloading your largest contentful paint:

https://web.dev/preload-responsive-images/

https://www.marfeel.com/resources/blog/speed-up-largest-contentful-paint

When I say remove lazyloading, I mean only from the largest image that is above the fold.  You want the first big image a user sees to load as fast as possible, since that's the draw of your page. The rest of your images should be lazyloaded

Not loading the youtube video until a user clicks depends on each set up. I suggest not attempting it unless your comfortable with front end coding.

This is just an example of someone's set up to "lazyload" a youtube embed: https://webdesign.tutsplus.com/tutorials/how-to-lazy-load-embedded-youtube-videos--cms-26743

However, your code in your theme will be completely different, I'm just sharing the link as an example of the idea.

 

If your not comfortable with coding enough to apply any of these, and really want to improve your PSI score, I suggest you hire a developer to help.

Keep in mind, you might not need to do all these suggestions, they will certainly help your PSI score, but maybe your site does just fine as it is.  There are developers that don't think google's metrics are important, I think they are, but it's up to you to decide.

Available for pagespeed consulting
https://www.upwork.com/freelancers/~01a19b6cd90193f4f6?viewMode=1&s=1017484851352698949

JoesIdeas
Shopify Partner
2321 211 616

@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 (automate tagging, fulfillment, Amazon, notifications + more)
• Shopify developer for 10+ years, store owner for 7 years
• I also make guides like Shopify Automation Tips and How to Figure Out Why You're Not Getting Sales