Three ways to load lazily

Lazy loading is a method for optimizing a website by loading images (or iframes) on demand.  If properly implemented, the browser should load the images that are at the top of the page first and wait to load the rest until the user starts to scroll down the page.  This is something that is relatively easy to implement but more difficult to test.  While writing the examples for this post, I opened the browser console, switched to the network tab, and watched the images load.  If you want the effect to be more pronounced, you can throttle the speed of your network connection but it didn’t help to much in my case.

Your first option is to just use loading="lazy" in your image or iframe tags.  Yes, it is just that easy.  If you are lazy loading images and not iframes, this should cover you for Edge, Firefox, Chome, and Opera.  Since it is just an attribute, it shouldn’t negatively affect your IE11 or Safari users, though.  It just means that their images won’t be lazy loaded.  Let’s take a look.

See the Pen
Lazy Loading – Part 1
by Joe Steinbring (@steinbring)
on CodePen.

So, that was easy enough but I hear you saying “How can I make this harder? 90% of my users use IE11 and Safari!”  That sucks for you but let’s see what we can do?  We could try Lozad.js.

See the Pen
Lazy Loading – Part 2
by Joe Steinbring (@steinbring)
on CodePen.

As you can see in the above example, Lozad.js requires a lot more code and an external dependency.  It doesn’t work with IE11 without a polyfill, though.

So, what else can we try?  Let’s try yall.js.

See the Pen
Lazy Loading – Part 3
by Joe Steinbring (@steinbring)
on CodePen.

Y’all has the benefit of working with IE11 but to be honest, I would just use the native method. 😉

 

[ Cover photo by Zhang Kenny on Unsplash ]

Leave a Reply

Your email address will not be published. Required fields are marked *