Table of contents

Why lazy load assets?

This is one of the main aspects when it comes to page/website optimization. You don’t want to load extra assets that are below the fold. What is not in the initial view of your page can be lazy-loaded in most cases.

Extra assets mean more MB to be downloaded by the client, more MB results in a longer period until the page is functional, this then converts into a low-performance score and increased bounce rate. If you also factor in slower internet connections (3G) you will want to cut down on assets on the initial load as much as possible.

Browser native alternative

Modern browsers have a way to lazy load assets into the page, but there are some asterisks here.

For images

If you’re loading images you can use loading=lazy and any modern browser will be able to determine that the image needs to be loaded when it comes into view. The implementation might differ from browser to browser when it comes to when exactly the image is loaded, just before it comes into the view or after with some delay.

No support for background images lazy loading.

For video

If the video doesn’t autoplay and it started by the visitor by clicking on it, you can use preload=”none” and poster. This will lazy load the video

Copy Code 


<video controls preload="none" poster="poster.jpg">

Now if you use the video as a GIF, on mute with autoplay, there is no native way to lazy load it.

For iframe

At the time of writing this, Chromium-based browsers support using loading=lazy on iframes so they are loaded when coming into view.

As you can see from the above examples, there is some native support for lazy loading but it doesn’t cover all the media types and it’s only available for modern browsers.

Why lozad.js?

Because it will cover all cases that at the moment are not supported by browsers natively and there is no downside to using it.

Lozad.js is a free lightweight library with no dependencies that helps you lazy load images, videos, audio, iframes, <picture>, background images, and responsive images (srcset). All these while having good support for all browsers.

I believe the only browser where you might encounter problems is IE 11 or lower and you might want to use polyfill to make this library work for those.

For me, lozad.js did the job when I had pages that were heavy on video content and background images. It also saved me a lot of time since it’s really easy to use and I don’t have to figure out how to deal with the lazy load issue on different asset types since the library can help me do it.

How to use it

Pretty straightforward install. It can be done via npm, Yarn, Bower.

Copy Code 


# You can install lozad with npm
$ npm install --save lozad

# Alternatively you can use Yarn
$ yarn add lozad

# Another option is to use Bower
$ bower install lozad

or get the script from CDN.

Copy Code 


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

I always recommend to store libraries locally if possible.

Next, instantiate the library

Copy Code 


const observer = lozad(); // lazy loads elements with default selector as '.lozad'
observer.observe();

You have lozad.js working on your site now, all you need to do is to add the class and data-src to your elements.

Copy Code 


<!--  Video -->
<video class="lozad" data-poster="images/backgrounds/video-poster.jpeg">
    <source data-src="video/mov_bbb.mp4" type="video/mp4">
    <source data-src="video/mov_bbb.ogg" type="video/ogg">
</video>

<!--  Iframe -->
<iframe data-src="embed.html" class="lozad"></iframe>

<!--  Image -->
<img class="lozad" data-src="image.png" data-srcset="image.png 1000w, image-2x.png 2000w">

<!--  Background image -->
<div class="lozad" data-background-image="image.png">
</div>

Conclusion

Good library, easy to use, does the job, perfect for lazy loading.

I still use the native loading=lazy for images, but for everything else, I rely on lozad.js.

Resources