What’s Image Lazy Loading and Why You Should Use It

It is mandatory to correctly resize and compress images before uploading if you want to have a well-performing web page.

But what happens after the images are uploaded? Is there a way to optimize them a bit more and improve page load time?

The answer is yes!

In this article, we’ll look at the lazy loading principle, a beneficial technique that delays loading images by leaving them “off-screen” until you need them. We’ll also answer key questions about lazy loadings, such as why lazy loading is good SEO practice and when you should use it.

Let’s see how this works!

What’s Lazy Loading For Images And How It Works

The basic idea of lazy loading is to load images or iframes only when users need to see them – they won’t have to wait for all page elements to load and can therefore start using the web page earlier.

This means that your pages will only display images in the top half of the page; the rest will come as the user scrolls.

Technically speaking, lazy loading is JavaScript that checks the current display port of your visitors and loads only images from the top half of the page, that is, images (almost) visible to them.

This script can be applied to your images via a plugin or programmatically, and is a brilliant way to optimize both perceived and actual 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: What functions are normally included in a page?

HTML (from about 15 to 120 KB of code)
JavaScript and CSS files (from 5 to 200 KB of code)
Images and iframes (from 200 KB upwards —but if you read our previous tutorials about image resizing, your images are already under control, aren’t they?)

As you can see, images and iframes are usually the last resources to download from the page, and sometimes the most important part.

This means that your page will not be fully operational until all images have been downloaded.

What Happens When Lazy Loading Is Applied Instead?

Lazy loading is designed to overcome this behavior and “fool” the process by allowing users to make use of a page even if all of its images and iframes have not been downloaded.

When a lazy load script is applied to your images, this is what happens when you access a page:

You start scrolling while reading the content of the page.
When an image should appear in the preview window, you will see a placeholder image in its place.
The original image will quickly replace the placeholder image.
Therefore, when images load slowly, they are stored on one page but are covered by a transparent placeholder the same size as the original image.

The images will remain under the “transparent placeholder” below the fold until the user decides to scroll down and “reveal” them.

Why Should You Use Lazy Loading to Make Images Load Faster?

You may be wondering if lazy loading is really important. The truth is, there are a number of reasons why you should load your images slowly rather than letting them all load at once. Of course, the advantages of slow loading are related to the speed and optimization of your website, don’t miss out!

Is Image Lazy Loading Good for SEO?

You may have stumbled upon opinions that say that lazy loading can be critical for SEO because Google can exclude lazy loading images from indexing.

The truth is: it depends. There are two factors to consider:

How lazy loading is implemented
Search engine crawler capabilities.

As for the lazy loading implementation, native lazy loading is an SEO-friendly format because it keeps the src property visible for search engines to consider. In fact, the src attribute is essential to allow search engines to scan and index images.

The other image attribute to consider is the srcset property, which is not readable by all search engines. So it is good practice to add an “src” as a replacement. By doing this, you will ensure that lazy loading does not affect image indexing.

To make sure your images are properly indexed by search engines (regardless of whether they load slowly or not), you should also use an image sitemap.

Regarding the functions of the search engine crawler: some search engines like Google may activate JavaScript during the page verification. These will work fine with JavaScript-driven lazy loading and native lazy loading. It works well with WP Rocket’s lazy load feature.

On the other hand, some search engines do not activate JavaScript when they scan pages. To cover these, you need to add the normal image with the src tag inside a

In general, lazy loading is good practice for SEO and there is no negative impact on SEO if implemented correctly.

When Should You Use Image Lazy Loading?

And now the question is: when is it recommended to use lazy charging?

You should always use lazy loading for images below the fold. As explained, lazy loading will reduce actual and perceived loading time. User experience will benefit from this, and users will thank you.

You should not use lazy loading for images in the upper half of the page, those that should load as quickly as possible. On the other hand, lazy loading will slow down the loading of these images and affect an important performance metric like Largest Contentful Paint.

The Largest Contentful Paint with the largest content is probably an image from the top half of the page; This is also the reason why all the images in the upper half of the page need to load quickly.

How to Lazy Load Images

You can load images slowly, either manually or with plugins.

If you have some technical knowledge and want to implement it yourself, you can refer to a manual guide like CSS tricks.

On the other hand, if you want to save time and find an easy solution for your WordPress site, you can choose one of the best lazy load plugins.

You can also take advantage of a caching plugin like WP Rocket to slowly load your images while speeding up your website in just a few clicks, thanks to other powerful features.

In the media tab, you will find the LazyLoad functions. You just need to check the “Enable for images” option. The same applies if you want to load iframes and videos lazily. You also have the opportunity to delete images or iframes. So easy!