What is lazy loading?
Almost certainly every website uses images to express something or to enhance the visual experience of the visitor. As they say, "a picture is worth a thousand words". How would you imagine online shopping if there were no images for the product you are looking at, or how would a travel blog look like if it did not use any images to show all the beautiful views?
Well all those images have a direct impact on the page speed and overall performance of the website. Whenever someone visits your website, the browser needs to download that image and show it. Even if the images are compressed or use the latest encoding standards, all of the images need to be rendered in place at page load. So even if you visit a page that has a small banner at the bottom of the page, you have to wait for it do be rendered before even scrolling down to see it. The loading times only go higher if the visitors use a low bandwidth connection or a low-end device.
Lazy loading comes to the rescue. Its purpose is to prevent the render of any image outside the view at page load and only requests it at the moment it comes into view. For example when visiting Amazon, you will see the frontpage banner and some of the products at the moment the page loads, but as you scroll down, you will see all the images being loaded as you scroll.
Essentially it works in the same manner as a lazy person would. "Why should I do this task since nobody is looking anyway".
Why use lazy loading?
One of the metrics Google Analytics use is called "Bounce rate". It measures the time each user spends on each particular page of your website and calculates a percentage based on their behaviour. A higher bounce rate means lots of visitors just "bounce off" the page for some reason. Even if the content presented is relevant to the user, but the page is super slow to load, the user will leave the page before it even loads the content. Lazy loading all the images will decrease the bounce rate by making sure all the off-screen images do not render if they are not needed.
Also page speed score is affected. For the sake of example, we take a page with 10 large images, each having around 500Kb in size. Without lazy loading all 10 images will be downloaded and rendered at page load. That is about 5Mib of data transfer required only for the images and the user will not see anything on the page until they get loaded. On top of that if we put a slow internet connection or a low-end device with under 1Mb download speed, that is around 5 seconds of wait time only to load some images that are not even in the initial view. With lazy loading all images, the user will see the content on that page almost instantly and the images will load and render only when they are needed.
How do I use lazy loading?
There are currently 2 approaches to lazy loading images, both of them having their pros and cons, but no matter the cons, lazy-loading is a must have.
Native lazy loading
Starting August 2019 google chrome supports lazy loading images without use of any extra javascript. Of course not by itself (that would be ideal), since as a developer you have to set the lazy attribute to each image.
Example:
Image without lazy:
<img src="dog.jpg" alt=".."/>
Image with lazy:
<img src="dog.jpg" loading="lazy" alt=".."/>
This approach is the easiest since it only requires some basic HTML knowledge to implement and the browser does all the heavy lifting.
The issue with this approach is that other browsers might not support this feature. To check browser compatibility you can use the Caniuse tool.
You can see the effect in the example below with 2 identical images, one using lazy and the other not using it. Check it out in different browsers.
Lazy loaded
|
Not lazy loaded
|
JavaScript lazy loading
This approach gives you as a developer more control over the images and more important it works across all browsers. There even are a few libraries that make lazy loading images as easy as crossing the road.
Ok, you might think that this is the best approach, choose a library, implement it and done. Well technically yes, but open source software like the above libraries tend to cover as many user needs as possible and may be bloated with unnecessary code that your website might not need.
For example, jquery-lazy adds 35 KB to a page’s size if you implement it for image lazy loading. Might not seem much, but if you have a website with 4 images, then it is a lot and will drag your page speed score further down since JavaScript is a more demanding resource than the image itself. In this case a more lightweight approach is needed.
Of course you are not required to use a library. If you are an experienced developer you can use plain JavaScript to DIY the lazy loading for your website.
To do this, you will need to attach event handlers on resize, orientationChange and scroll, check which images come into view and get the source from the data-src attribute, put it into the src value and eventually load the image. May be a lot of work, but this is the most lightweight approach.
The future of the internet is heading towards performance optimization and content quality. The days when you could just do whatever you wanted on a website and still work as supposed are starting to become history. Lazy loading images is part of this evolution and is a must have feature for any website.