With this post we continue our series of articles about performance optimisation explained in simple terms, understandable to non-developers. Following the first post about the concept of caching, now let’s move on to image loading: you will learn how images affect website performance and how you can speed up their loading in a web page.
In particular, I will talk about the LazyLoad script.
Images are an important way to enhance our webpages and draw attention to our message or product, but we must always be careful about how these images are handled and loaded. We don’t want to provide a poor user experience for the sake of our images.
How does a web page load?
First of all, I think it’s necessary to briefly recap what happens every time we view a web page.
When we ask our browser for a URL, we usually have to wait for the loading of the following elements:
- HTML code (from about 15 to 120 KB)
- Images and iframes (from 200 KB to many MB [sometimes too many!])
I guess you all know very well that increasing sense of frustration when you’re waiting too long for a web page to be displayed: the last thing you want is that your users experience this same feeling and end up abandoning your website.
Regardless of the technicalities, it’s always useful to remember 2 main characteristics we all tend to show when we visit a website:
- we are impatient
- we will almost never perceive the real loading speed of the site or blog we’re visiting
Since this is not the place to speak about how Internet is undermining our abilities to concentrate and be patient (but someone else did), let’s go straight to point b.
In the case of web performance, perception is very important: most of the time, the real loading speed of a site is almost never the same as the one perceived by the user.
What is LazyLoad?
LazyLoad is a script which defers the loading of images in a page until you scroll down.
The basic idea is to load images or iframes only when the users need to display them. In this way, (s)he won’t have to wait for all the elements in the page to be loaded and therefore, can start using the web page sooner. The user will be seeing only the images above the fold. The rest will come as soon as (s)he scrolls.
In terms of performance, this feature will decrease the number of HTTP requests during the first page load from the user.
How does it work?
LazyLoad stores all the images and iframes in a page, then sets up transparent covers with the same dimension of the real images, as a placeholder.
Do you remember those old photo albums where every picture in the page was protected by a veil of tissue paper? LazyLoad is “hiding” images and iframes in the same way: so every time the user scrolls down the page, requesting the images below the fold, the script will remove the “tissue paper veil” and serve the real image.LazyLoad hides images like in a photo album where every picture is protected by a veil of tissue paper Click To Tweet
The user won’t be disturbed by this hide-and-seek trick, but some versions of LazyLoad add a fade in effect as the images gets displayed in the visible part of the page.
LazyLoad in action
If you want to see LazyLoad in action, just choose a page containing many images and where the script is activated (WP Rocket has a LazyLoad option, or there are specific LazyLoad WordPress plugins you can use. If you are a developer you can integrate a LazyLoad script yourself).
Now open the Console of your browser to inspect the activity of the page (right-click on a webpage and choose “Inspect”). Here is a simple comparison of the same page loaded with and without LazyLoad:
Without LazyLoad, all the images in the page are loaded together. Once the page is loaded, all its elements – images included – are there:
Look now at the difference when LazyLoad is active:
You can easily see how the file names of the images pop up at the bottom of the console list as soon as I scroll the page.
Try to imagine the whole process as a dining experience at a nice restaurant, where you’ll be served by an experienced waiter and the menu is really rich with specialties. The restaurant is our web page, the specialties on the menu are the images and the waiter is the LazyLoad script.
All the food you can order is listed on the menu; you have a look at it and confirm your order to the waiter who notes it down on his notebook (i.e. the script stores the URL of the images and sets the blank images). Nobody likes to wait too long for food to be served at the restaurant, and the waiter knows it very well. That’s why, between a course and the other, the waiter serves you wine or brings you some appetisers. Part of his job is to reduce the sensation of waiting for your food and give you a pleasant eating experience (i.e. you see the above the fold images and keep scrolling the page).
Imagine how disappointing it would be to wait a long time for your food and then to receive it ALL served at once! During the wait you will get nervous and at the end your food will be served cold. It’s definitely much more pleasant to eat every course when you’re ready, without waiting too long for them.
Using LazyLoad the performance or your website will be surely optimised just for the fact that it will serve the images you need to see at the right moment you ask for them.
LazyLoad lets you keep your beautiful images, without frustrating your visitors while they wait for them.
How do you usually manage your images? Have you ever tried the LazyLoad script? Share your opinions in the comments!
PS. Remember that, in general, whether you use LazyLoad or not, you’ll always want to optimise your images as much as possible(for example using our new compression tool, Imagify). You can also read our blog post about image optimisation.