Lazyload Implementation

7 votes

Lazyload of images have become an important way to greatly improve page speed on Shopify Stores. We currently have it implemented on our site and it sped up the site considerably. Unfortunately all of the Judge.me widgets which show images do not get the LazyLoad benefit.

Our suggestion is to check to see if the site has lazy load implemented, and if so change the img tag to follow:

<img data-src="file.name" class="lazyload">

The JS is lazysizes.min.js that we used, but other implementations may use a different JS.

Thank you!

Under consideration Suggested by: Steven Vasquez (09 Feb, '20) • Upvoted: 25 Jan • Comments: 3

Comments: 3

10 Feb, '20
Admin
Hi Steven, all of our images are lazy loaded once the user has them in viewport. To further improve user experience while not sacrificing page load performance, our widgets preload the first 10 images with JavaScript only after the whole page finishes rendering. So loading our widgets shouldn't impact the initial page render time.
21 Feb, '22
Orion H
As of 2022, this isn't true, since the app loads widgets using the app block, not JS, they do not have lazyloading applied to the images.
This could easily fixed by adding loading="lazy" to the images.
22 Sep, '23
Sergey
Adding loading="lazy" would really insure images are lazy loaded and do not require any JS to do that. In my case I am seeing them being eagerly loaded.