Resizing and compressing your images correctly before their upload is a must-do if you want to have a performant web page.
But what happens after images are uploaded? Is there a way to optimize them a bit more and improve page loading time?
The answer is yes!
In this article we’re going to have a look at the principle of lazy loading, a beneficial technique that defers the loading of non-critical resources (images, in our case), leaving them ”off-screen” until you need them.
Let’s see how it works!
What is lazy loading?
The basic idea of lazy loading is to load images or iframes only when users need to display them: they won’t have to wait for all the elements in the page to be loaded and therefore can start using the web page sooner.
This means that your pages will only be showing images above the fold; the rest will come as soon as the user scrolls the page.
This script can be applied to your images via a plugin or programmatically, and it’s a brilliant way of optimizing both perceived and real performance.
How does a web page usually load?
Whenever you ask your browser to open a URL, this is what happens:
- The click on a link triggers a request
- The page is downloaded with all its resources (files)
- The web browser builds the page using the resources contained in it
- The page is now displayed (rendered) to the user
Let’s focus on the second step of the process: which are the resources usually included in a page?
- HTML (from about 15 to 120 KB of code)
- Images and iframes (from 200 KB upwards —but if you read our previous tutorials about images resizing, your images are already under control, aren’t they?)
As you can see, images and iframes are usually the last bits of resources to be downloaded on the page, and sometimes the most substantial part of it.
This means that your page won’t be fully operational until all images are finished downloading.
What happens when lazy loading is applied instead?
Lazy loading has been created to overcome this behavior, and ”cheat” the process, allowing users to make use of a page even if not all its images and iframes have been downloaded.
When a lazy loading script is applied to your images, this is what happens when you land on a page:
- You start scrolling as you read the content of the page
- When an image is supposed to appear into the viewport, a placeholder image will be visible instead
- The original image will quickly replace the placeholder image
So, when images are lazy loaded, they are stored in a page, but they are covered with a transparent placeholder of the same size of the original image.
As we explained in our blog post Save your visitors from frustration!, you can think about the lazy load script as one of those old photo albums where every picture is protected by a veil of tissue paper.
Images will stay under the ”tissue paper veil” below the fold until the user decides to scroll down the page and ”unveil” them.
Why should you lazy load your images instead of loading them all at once?
There are several reasons why you should lazy load your images instead of letting them load all at once.
Let’s see the most important of them:
1. Improvement in both perceived and real loading time for your pages
Long pages rich in images are longer to load: as we saw, the amount of image data has to be fully downloaded before the page becomes 100% usable. If we lazy load our images instead, the issue will be solved because only those placed above the fold will be loaded in the first instance. This will result in a real reduction of first-page load time as well.
2. Reduction of the work for the browser
If images are lazy loaded, your browser won’t need to parse nor decode resources until the moment they are requested by scrolling the page.
3. A decrease in the number of HTTP requests during the first-page load
As a direct consequence of the previous point, also the number of HTTP requests will see a reduction.
4. Fewer data served by the server or the CDN
On the same line of the previous points, the server or the CDN will have to download less data, resulting in cheaper bills for you!
5. Data and bandwidth saving (especially from mobile)
If the most significant part of data on your pages – usually taken by images – is downloaded only upon the scroll, users visiting your site from mobile devices will be super thankful! Lazy loaded images will save your readers data and bandwidth, a very special gift for those people not counting on fast Internet networks or permissive data plans.
Is lazy loading a bad practice for SEO?
You might have stumbled upon opinions saying that lazy load could be critical for SEO because Google could exclude lazy loaded images from indexing.
This is not true: Google and search engines can deal with lazy loaded images, and we can say that lazy load is undoubtedly a good practice for SEO.
The same Google promotes the use of lazy loading in its Developers guide:
As far as performance improvement techniques go, lazy loading is reasonably uncontroversial. If you have a lot of inline imagery in your site, it’s a perfectly fine way to cut down on unnecessary downloads. Your site’s users and project stakeholders will appreciate it!
Everything you need to know about image optimization in WordPress
In this article you learned:
- What lazy loading is
- How a page usually loads and what changes when lazy loading is applied
- The benefits of lazy loading your images instead of loading them all at once
- Why you should consider lazy loading as a good SEO practice
Now that lazy loading has no more secrets for you, it’s time to go ahead and learn other tricks about image optimization: