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
loadingattribute 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 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.
Lazy FB Comments enables delayed loading for Facebook comments. The plugin allows for loading on click or on scroll of the page.
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.
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.
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.
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.