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.
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.
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.
Y’all has the benefit of working with IE11 but to be honest, I would just use the native method. 😉