BLOG | categories | images

What is Lazy Loading?

By Steve Founder of PageDart

Lazy loading is a way of making your site faster.

We will look at three things:

What is lazy loading?
Why should I add lazy loading to my site?
How do I add lazy loading to my site?

Lazy loading can have a huge impact on your website speed. If you have many images or youtube videos on a page this technique can speed things up.

And it’s easier to set up than you would think.

Let’s dive in.

What is lazy loading?

Lazy loading is a way of speeding up the initial loading of a page.

It loads only the images at the top of the page. It then loads the remaining images later when the user needs them.

Without lazy loading, the browser downloads all images on a page when the page loads. Even images that are way down the page and not visible to the user.

Instead of waiting for all the images on the page to load we can load only the images that are visible at the top of the page.

This is lazy loading.

The remaining images download as the user scrolls down the page.

When an image is about to become visible the lazy loader will download the image. This happens before the image comes into view.

This happens without the user knowing and the page appears to load as normal.

Images make up a huge proportion of a web page. HTTPArchive tracks the size of pages and its assets such as images, CSS and javascript. There has been a steady increase in the size of images since they started monitoring 2011.

With the larger sites now having over 4.8mb of image data on a page.

Lazy loading means that we only load these images when the user needs them.

Making the web faster.

Why should I add lazy loading to my site?

Adding lazy loading makes your site faster. It is that simple.

But don't take my word for it. Let's look at an example.

Here we have two almost identical web pages. One uses native lazy loading and one does not.

Press play to see the results:

As you can see the time to the page being fully complete is much quicker:

The lazy loading page takes 6.5 seconds to complete
The “normal” page without lazy loading takes 41.9 seconds to complete

35.4 seconds difference!

So it is faster but as we are not downloading all the images it also makes the page download smaller.

The lazy loading page is 830kb
The normal page is 1.5mb

That is a saving of 670kb!

On a mobile device using 4G that is a considerable saving.

So it's clear that adding lazy loading to your site will make it run faster and save data for your users.

Let's look at how we can add lazy loading to your site.

How to add lazy loading

Recently, Google Chrome added native lazy loading. This makes it super easy to add lazy loading on your site. All you need to do is add the loading attribute to your images, like this:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

There are three options that you can use for loading attribute:

auto: This will default to the lazy loading supported by the browser. It is not recommended to use this.
lazy: Load the image or iFrame as it is coming in to view. This is what we will use for any image or iFrame that is below the fold.
eager: This will load the image or iFrame straight away. This is the same as not having a loading attribute so we won't be using it.

So even though there are 3 options the only value you will use is “lazy”.

Currently, only Chrome and Opera support native lazy loading.

But all is not lost. We can also add lazy loading to these other browsers using javascript.

Native lazy loading is always going to be faster. But, whilst we wait for the other browsers to catch up we can use javascript.

The library I would recommend for this is lazysizes.

You want to use native lazy loading when it is available. Only loading lazysizes when native lazy loading is not available.

To do this we will need to write some custom javascript. This will only load the lazysizes library when the “loading” attribute is not available.

Here is an example of some custom javascript that would do this:

<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">

<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">

<script>
  if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('img[loading="lazy"]');
    images.forEach(img => {
      img.src = img.dataset.src;
    });
  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.8/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>

You will notice in the script above that we have not added a src attribute to the image tags. Instead we are using the data-src attribute.

This is because lazysizes uses the data-src tag to load the image as it comes into view. If native lazy loading is available then we will swap the data-src to src. If not we then load lazysizes which reads the data-src attribute.

Once you have this setup all images will lazy load on all browsers.

Image Optimization

Lazy loading will speed up the page but you should not neglect other page speed best practices.

You should optimize the images on your site.

Lazy loading is only a part of the solution, optimize your images to make them as small in bytes as possible. The smaller they are, the quicker they will load.

For example, a PNG image that is 300kb could be as low as 30kb if compressed as a JPEG without losing any image quality.

A free tool to compress your images is Squoosh.

For a detailed look into compressing images check out our image optimization guide.

Both image optimization and lazy loading are a great team. Used together they will speed up the loading of your web page.

Lazy loading iFrames

Images are not the only element that can be lazy loaded.

iFrames can also be lazy loaded. A good example of this is when you need to embed a youtube video on your page.

This youtube video shows how lazy loading works. You can see in the video that the cats are being loaded as the user scrolls down the page.

This video is using the loading="lazy" attribute. Here is the markup:

<iframe width="560" height="315" src="https://www.youtube.com/embed/ZBvvCdhLKdw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe>

You can see the loading="lazy” attribute at the end of the tag.

It is a good idea to add this attribute as youtube videos can slow down a web page.

Adding Native Lazy Loading to Wordpress

If you are using Wordpress then Google has released a plugin for native lazy loading.

Once you install the plugin there is nothing to configure. It will add the loading="lazy" attribute to all the images and iframes on your site.

It is a simple plugin that can make a big difference to your site. And since Googlebot looks at your site using Chrome it is highly recommended you add this plugin.

What is lazy loading, Final Thoughts

We have looked at how lazy loading can make your pages faster.

You can apply it to images and iFrames. So that the initial page load is fast. As the user scrolls the remaining images download.

The new native lazy loading only works in Chrome and Opera. To support other browsers then use the lazysizes library.

If you have a Wordpress blog then you can install native lazy loading by using the Google Plugin.

You should still optimize your images even when using lazy loading. As the smaller image file size will speed up the download of the image.

Optimized images and lazy loading is a great combination to speed up your site.