Do you notice the lazy loading on this site?

chazeichazy
Tourist
27 0 3

@JoesIdeas thanks again for the help!

chazeichazy
Tourist
27 0 3

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

0 Likes
JoesIdeas
Shopify Expert
1188 104 288

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

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 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!

0 Likes
Mircea_Piturca
Shopify Partner
1459 39 284

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
0 Likes
chazeichazy
Tourist
27 0 3

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

0 Likes
Mircea_Piturca
Shopify Partner
1459 39 284

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
Tourist
27 0 3
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?
0 Likes
asjain
Excursionist
9 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
0 Likes
oreoorbitz
Shopify Partner
97 10 63

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
0 Likes