photo-album-lazyload

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:

  1. HTML code (from about 15 to 120 KB)
  2. JavaScript and CSS files (from 5 to 200 KB of code)
  3. 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:

  1. we are impatient
  2. 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 LazyLoad 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 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.

Wrapping Up

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.

Author's avatar

Alice is a content writer with strong experience in international customer service and empathic communication. She is an active member of the WordPress community: she loves translating WordPress into Italian and speaking at WordCamps. You can follow @Alice_Ridice on Twitter.

13 comments

Does it affect SEO for images ? I think I read that somewhere a few weeks ago that Lazy wasn't advice for Google images.

    Hi Ludovic,

    LazyLoad doesn't have any effects on your SEO if you add a noscript tag.

Great post :)

Hi Jonathan,

Thank you for your answer.

Is WP Rocket add a noscript tag when LazyLoad is enabled for images ?

Greetings,

    @Ludovic: Yes, WP Rocket adds the noscript tag ;)

Lazy loading is meant to reduce the number of requests right? But in my case, the number of requests get double when I activate Lazy Loading using any plugin. Not sure whats the problem. I have specified this more here- https://wordpress.org/support/topic/149-extra-requests-on-activating-bj-lazy-load

    @Resham: Lazyload helps you to reduce your HTTP requests. Tools like Pingdom has a bug with data-URI and count them as 2 requests and it's a bug from them ;)

How can we change the transparent Placeholder image of WP-Rocket to a custom placeholder image?

    @zyekil: Yes, the filter name is rocket_lazyload_placeholder

Is there any way to exclude an Iframe from LazyLoad? I'm having issues with Google Tag Manager. Thanks

What could the issue be if LazyLoad is on but images above the fold aren't loading?

Hi, Good Article.

I would like to know that for the Background Images(i.e the one added from the CSS), Presently the Lazyload is not working via Rocket plugin. Is there any option to make the Background Images gets Lazy load.

Thanks

    Hi Raj! Yes, the good news is that LazyLoad for Background images is coming really soon...keep an eye on our communication about the next releases! ;)

Add a comment
Your email address will not be published. All fields are required. Comment policy: We love comments and appreciate the time that readers spend to shader ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

Get a Faster Website in a Few Clicks

Setup Takes 3 Minutes Flat

Get WP Rocket Now What are you waiting for?

{"cart_token":"","hash":"","cart_data":""}