Lazy loading has always been one of my favorite techniques for boosting web performance. It’s quick to set up, and the gain in performance is considerable.

In short, the lazy load is a must!

Because, really, what’s faster than no request at all? This is the basic principle behind lazy loading. Resources are only loaded when they are needed.

Here is a concrete example on a page load.

Article without lazy load

The same article with lazy load

Impressive, isn’t it? Take a special look at the weight and queries reduction when lazy load is enabled.

What is lazy loading, and why should you use it?

Lazy loading is a web performance technique that allows you to hide images that are not yet displayed on-screen.

This is obvious: why load all the images on a page when we don’t even know whether the user will need it?

Therefore, the lazy load involves loading images as the user needs them. Which has real benefits for the initial render of the page.

Update : In WordPress 5.5, images will be lazy-loaded by default, using the native HTML loading attribute which became a web standard earlier in 2020. This will drastically save bandwidth on both servers as well as user agents across sites where images further down the page used to be loaded right away, even in the case the user might never scroll towards them.

– Felix Arntz, source : WordPress.org.

How to Set Up Lazy Loading with a Plugin

Most articles on lazy loading will give you an endless list of plugins. This won’t be the case here.

Images and Videos

WP Rocket is the best plugin to optimize your WordPress website. Simple setup, and you even have an option to enable for iframes and videos and display an image thumbnails for Youtube videos. No jQuery dependency.

Here’s the option you need to check to unable lazy load for images and videos.

Disqus Comments

Disqus Conditional Load is designed for users of the Disqus commenting system. Loads on click or on scroll of the page.

Unlike the official plugin, this one doesn’t slow down the initial loading of the page. Plus, the plugin automatically imports all comments into WordPress. This can be useful if you plan to leave Disqus someday.

No jQuery dependency.

Native WordPress Comments

Lazy Load for Comments is designed for native WordPress comments. It allows for loading on click or on scroll of the page.

However, I wouldn’t use this plugin unless you get a lot of comments.

No jQuery dependency.

Facebook Comments

Lazy FB Comments enables delayed loading for Facebook comments. The plugin allows for loading on click or on scroll of the page.

JQuery dependency.

What about the SEO?

The benefits of lazy loading on performance are undeniable, but what about the disadvantages?

SEO and Images

I wouldn’t worry about your image indexation.

Why not?

Well, because lazy loading images is a very straightforward technique. The SRC attribute is only substituted by another attribute. As, for example, DATA-SRC. The image is present in the DOM from the beginning. Nothing compares to content that’s dynamically injecting into a page. Nothing compared with dynamically injected content into a page.

And then, most modern modules are clever enough to duplicate the image between <noscript> tags for users that have Javascript disabled.

So, really, there’s no need to worry about image indexation.

SEO and Comments

Lazy loading works differently for comments.

First, you should know that Facebook and Disqus comments will probably never be indexed by Google. But, depending on your SEO strategy, this may not be a problem.

Now, lazy loaded native WordPress comments are not likely to be indexed as fast as regular comments, but they should be.

Sum-up

In my opinion, the lazy load should have an important place in your performance strategy. Which solution you choose doesn’t matter. Just remember to pick one that uses “intersection observe” for best performance. And, ideally, one without dependencies.

Feel free to write below if you have a question or comment.