Don't be lazy in lazy loading

Images are common on many websites; for some its just a view of the logo while for some its quite an intensive resource. Unlike CSS or JavaScript files, images span larger sizes and are often the first area of concern when it comes to bandwidth and load times.

The more images you have on your site, the more your http requests and the more your load times; but this would only happen if you don't take proper measures.

These days when developers and web engineers are thriving hard to improving their site's load times using various concepts and techniques, it is important that you also follow the waters. And to lower loading delays contributed by images, we have a technique known as lazy loading.

So what is it actually? In simple terms:

Applying this to images, we delay their request until and unless a user wants to see them i.e they appear in the viewport.

Consider the fact that if you have, let's say 10 images on your site, 2 above-the-fold and the rest 8 below-the-fold, your users might never always be scrolling down to view the 8 below-the-fold images. Right? How can you ever make sure that everyone is scrolling! Someone might be just switching across pages.

Compared to this whatever lies in above-the-fold is what is seen without the need to scroll a page and hence images placed here would ALWAYS be seen. But why are we even going into these folds anyway? Why are we concerned with where are the images placed?

And the way we figure out whether an image is seen is by tracking for its appearance into the viewport. Sometimes, in addition to just checking for the appearance, we also check whether it appeared for a certain amount of time, let's say 1 second.

A webpage without lazy loading.

A webpage with lazy loading.

In JavaScript the checking part could be easily accomplished by using scroll events and element offsets or by using IntersectionObserver().

On the otherhand, the timing part could be accomplished by using setTimeout().

Once the image is in the viewport we can request for it and consequently get it loaded.

Well you can give a few advantages of lazy loading just be reading the previous sections on this page, but let's take a closer look. The benefits of lazy loading are as follows:

1. Decreases load time
2. Saves wastage of bandwidth

Decreases load time

Taking the same example above of 10 images, if you are delivering 2 of them initially vs all 10, then the first case would definitely cut down load times and thus the delay before the firing of the onload JavaScript event.

Things get worse if the images are large in number and size, in which case the load delays can go upto 5 or 6 secs on even fast network connections! Worst - you have a slow 2G connection - wait for probably 15-20s or even more than that! Had you lazy loaded images and your site might've fastned up in these crucial statistics.

Now some of you might argue that images are not a render blocking resource and thus even if multiple of them are being requested and loaded, even unneccessarily, it's absolutely OK. You are right but notice one thing over here.

Sometimes, in fact many times, scripts on HTML pages are delayed until the firing of the onload event. These scripts might be critical to your application and if that's the case then they should be parsed and executed as soon as possible after the page loads.

Having a long delay in the load means that these scripts also suffer i.e they have to wait for the page to be loaded completely with all the images and resources. As a result your application remains useless and ineffective till that point where onload gets dispatched.

Therefore what we imply from the scenario above is to lazy load images, reduce the loading times, and execute critical, waiting resources ASAP.

Saves wastage of bandwidth

Serving up a resource from a server takes up bandwidth. The resource can be an image, a CSS file, a script, an HTML page, literally anything.

Responding to requests coming to it, your server sends data the respetive users and in the process gets the numbers on some bandwidth meters on your hosting provider to increment.

For CSS and JavaScript files usually these numbers would be under 100KBs however for images they can go a bit further because images are usually larger in size compared to the other resources mentioned above. There is color, size, pixel depth, resolution - a lot to image files!

If you don't optimise image delivery of which one aspect is lazy loading them, then you are simply wasting a precious resource at your dispense. Where the bandwidth can be used to serve useful content it is being spent, or rather wasted, on unneccessary resources. For unmetered and low traffic connections this won't be an issue but for metered, high traffic connections it could be the reason for the shut down of the website. And you don't want this to happen, right?

Therefore the answer is to lazy load images. Don't be lazy in lazy loading!

No!

Most websites have logos in their headers and footers, images in above-the-fold content, and icons for certain purposes which don't at all need to be lazy loaded. You should consider lazy loading big images, part of let's say your blog's articles, only. Lazy loading right-away-necessary images like your brand's logo is not recommended.

Lazy loading images is an easy task if you know JavaScript scroll events, how to retrieve element dimensions and offsets, the fairly new IntersectionObserver() API and a bit of math. Too much to know?

If you don't, then writing lazy loading code yourself can be quite a complicated task.

We have a tutorial Lazy Loading which guides you through all the concepts and aspects of lazy loading images. You should consider trying it out if you are not too lazy to implement a library and eager to know how this whole process works in real!