With this post we continue our series of articles about performance optimization explained in simple terms, understandable to non-developers.
Following the post about the caching for WordPress and browser 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, we will be focusing on the LazyLoad script.
Images are an essential way to 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, let’s 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 two 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 the 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 crucial: 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 see 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 the LazyLoad 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 a veil of tissue paper protected every picture in the page?
LazyLoad is “hiding” images and iframes in the same way.
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.
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 get displayed in the visible part of the page.
An example of LazyLoad in action
If you want to see LazyLoad in action, choose a page containing many images and where the script is activated.
WP Rocket has a LazyLoad option, but 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 on the page are loaded together.
Once the page loads all its elements – images included – are there:
- with an active LazyLoad:
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 an experienced waiter will serve you and the menu is 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 appears 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 appetizers.
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 in the end, your food will arrive cold. It’s much more pleasant to eat every course when you’re ready, without waiting too long for it.
By using LazyLoad, the performance or your website will be surely optimized: this happens just for the fact that it will serve the images you need only when you ask for them.
LazyLoad lets you keep your beautiful images without frustrating your visitors during the wait.
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 optimize your images as much as possible(for example using our new compression tool, Imagify). You can also read our blog post about image optimization.