Images are everywhere
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.
What is lazy loading really?
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.
On the otherhand, the timing part could be accomplished by using
Once the image is in the viewport we can request for it and consequently get it loaded.
Advantages of lazy loading
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:
- Decreases load time
- 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
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.
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!
Shall I lazy load all images?
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.
How to lazy load images?
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!