WordPress Lazy Load

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 huge.

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.


Quote: The fastest and best-optimized ressource
is a ressource not sent.

Here is a concrete example on a page load.

Article without lazy load

Post's load time Without lazy load

The same article with lazy load

Post's load time with lazy load

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

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.

Demonstration of how Lazy Load works in Chrome Inspector. Images are progressively loaded as the user scrolls down.

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.

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.

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

Lazy Load by WP Rocket is developed by the team behind the very good WP Rocket. In fact, I think the same code—or close—is used for both plugins.

Simple setup, and you even have an option to display image thumbnails for Youtube videos.

No jQuery dependency 🙌

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 👎

Set Up Lazy Load on TTFB’s Themes

No need for plugins when using our themes. A lazy load module is packaged with the theme. Even background images are processed!

Our themes incorporate the excellent Lazysizes, which works with “intersection observe” for optimal performance. The module is even recommended by Google. 🙂

Simply enable lazy load in the performance options.

How to Activate Lazy Load for Light & Bold

How to Activate Lazy Load for Minimall

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

*