Adding lazy load to your WordPress website is an effective tool to speed up your WordPress website. We have written extensively (we even made a case study) about how slow page loading speed negatively effects conversions, SEO, and other markers for online success. The faster your site loads, the better.
Two of the most important factors that slow down sites are HTTP requests and page weight. Naturally, the more requests a browser has to send to the server, the longer it will take to process the site. At the same time, the larger your page is (for example, because it contains many images), the longer it will take to load.
Lazy load is a technique that addresses both of these factors. It means delaying a load of some parts of a web page until they are actually needed. It’s also the topic of this blog post. In the following, you will learn how lazy load works, its advantages and disadvantages and as well as ways to add lazy load to WordPress.
I hope you’re not too lazy to keep reading!
What is Lazy Load and What Can You Use It for?
As already mentioned, lazy load is a way of keeping the browser from initially loading parts of web pages – typically images – and replace them with placeholders. That way, the page becomes smaller and less data needs to be transferred from server to browser.
The result: a faster loading website and happier users.
But wait, don’t you need those parts of your site? If you didn’t, they wouldn’t be on there, right? Won’t it mess up the page?
Well, here’s where the lazy in lazy load comes into play. The technique doesn’t simply prohibit browser from loading assets and images but simply delays it until they are actually needed.
For example, an image doesn’t need to be on the page until a visitor scrolls down far enough to actually see it. As a consequence, the browser doesn’t really need to load it until right before that happens. That’s exactly what lazy load does.
(By the way, there are other ways to optimize images on your website to make them load quicker.)
(By the way, there are other ways to optimize images on your website to make them load quicker.)
Lazy Load Use Cases
Around the web, lazy load is most often used for images. You have probably seen it on popular sites like Buzzfeed, who use the technique to make their listicles appear more quickly inside their users’ browsers.
However, that’s not the only thing lazy load is capable of delaying. Other examples are videos, scripts, and comments. In fact, moving JavaScript files to the footer of a page is a common technique to speed up page loading times.
You might also be aware that YouTube only loads comments when you scroll down to them. That way, the platform makes sure that you get to watch your video more quickly. If it’s good enough for them, why not for you?
There’s also a special application of lazy load called infinite scroll. It’s an alternative to classic pagination where additional posts load whenever the user reaches the bottom of a page. You can see it on Pinterest or if you are a user of Pocket.
It eliminates a lot of clicks and can be great for user experience. However, infinite scroll is not without controversy and won’t be the focus of this article.
Advantages of Lazy Load
The main advantage of lazy load is already apparent: faster loading times. When you can shave off a large chunk of your page weight, it will naturally appear in the browser much faster.
A nice side effect of that is that you save your visitors considerable bandwidth. Especially those using the data connection on their mobile device will be thankful. In addition to seeing your site quicker, they also don’t have to waste their plan on images they might never even see.
Disadvantages of Using Lazy Load on Your Site
Yet, using lazy load is not all sunshine and rainbows. The technique also has some disadvantages.
First and foremost, it’s not always search engine friendly. When you delay loading assets for visitors, you do the same for search engine spiders. As a consequence, they might not index some of your content, which is, of course, is not great for SEO. Even if workarounds exist. Naturally, this is a bigger problem when using lazy load for posts and not just images (which is why many stay away from it).
A second concern is user experience. When scrolling down your site very quickly, replacing placeholder images with actual visuals can make page content jump, which can be annoying.
So, what’s the verdict on lazy load? In short: used within limits the technique can make your WordPress site load a lot faster, however, you need to keep an eye out for SEO and user experience.
How to Add Lazy Load to WordPress via Plugin
While it’s possible to add lazy load to WordPress manually (see Jay Hoffmann’s tutorial over at Elegant Themes), the much easier alternative is to use one of the plugins below. Many of the offers listed here are simple set-it-and-forget-it solutions that you only need to activate without any configuration. Most of them also very lightweight.
For that reason, adding lazy load to WordPress without a plugin just seems like an unnecessary effort to me (unless you do it to improve your technical chops, which is a legitimate reason). For most users, it’s better to choose one of the many lazy load plugins the WordPress sphere has to offer.
Lazy Load
Our first candidate is the most popular free solution for lazy loading images out there. It has over 90,000 installs and a solid 4-star rating. Its popularity might be partially explained by the fact that the Automattic team is a contributor to it.
The Lazy Load plugin uses jQuery.sonar for loading images only when they appear in the viewport (which is the part of the site that you see on your device). The unzipped plugin is just 20KB large and all you need to do is install and activate it. No configuration is necessary.
BJ Lazy Load
The runner-up to the throne of best lazy load WordPress plugins is BJ Lazy Load. It boasts more than 60,000 installs and similarly good ratings.
The plugin replaces all images and iframes (including YouTube and Vimeo videos) in your content with a placeholder until viewed. Install, activate and you are good to go.
Lazy Load by WP Rocket
Here we have a plugin by the same maker as the popular caching plugin WP Rocket. It can lazy load images and/or iframes including thumbnails, widget content, avatars, and smileys. What’s more, the plugin doesn’t use any JavaScript libraries. That’s probably one of the reasons it weighs less than 10KB.
More than 10,000 websites trust Lazy Load by WP Rocket, so it seems to be doing its job properly. The plugin site in the WordPress directory also contains code to selectively deactivate lazy load on pages or images or change its loading threshold. Otherwise, no configuration options are available.
a3 Lazy Load
a3 Lazy Load claims to be the “most fully featured, incredibly easy to set up lazy load plugin for WordPress.” It’s also one of the few entries on this list that actually comes with some settings.
The plugin is suitable for lazy loading images, videos, and iframes in posts, pages, widgets, thumbnails and/or avatars. It also works for post embeds and is WooCommerce compatible (read our beginner’s guide to WooCommerce).
a3 Lazy Load even offers effects images that appear on the site. As if that isn’t enough, it also lets you choose whether to load its script in the header or footer (a lazy load plugin that lazy loads itself, how meta) and ignore images or videos.
Finally, it’s compatible with a whole host of mobile and caching plugins as well as content delivery networks. I’m beginning to see that their claim might not be entirely unfounded.
Crazy Lazy
One of the main reasons I included this plugin is its awesome logo. I mean, look at that snail!
However, besides that, it’s also a lazy load plugin for images that uses very few resources. Crazy Lazy comes with the usual functionality and prevents images from loading before the user sees them. No configuration necessary, just switch it on and you are good.
If you do want to configure something, you are able to set your own placeholder images via CSS (the plugin page contains code for that) and exclude images (it has code for that, too).
Speed Up – Lazy Load
WordPress Infinite Scroll – Ajax Load MoreAnother plugin that keeps images and iframes from loading until necessary. Only 5KB light (do these developers compete in who can make the smallest plugin?) and without any need for configuration. It has a shortcode to deactivate lazy load wherever it isn’t needed and lets you deactivate it for single images as well. So far only 3,000+ installs, however, it comes with a full 5-star rating.
WordPress Infinite Scroll – Ajax Load More
We talked about infinite scroll earlier, now here’s a plugin to add it to your site.
WordPress Infinite Scroll allows you to lazy load posts, single posts, pages, comments, and other page elements by building your own custom shortcodes. You can query different content types by post type or format, date, category, tag and much more. After that, you may add the shortcodes either in the WordPress editor or within templates.
The plugin also works with WooCommerce and Easy Digital Downloads and offers a number of premium addons.
WP YouTube Lyte
Our final entry is a lazy load plugin only for video content. It allows you to input special YouTube links that only load the YouTube player upon click, not earlier.
Basically, all you need to do is change one letter in your link to make it work. Alternatively, you can use shortcodes to input video content or have the plugin parse YouTube links automatically. Plus, it lets you insert only the audio part if needed.
For an alternative, check Lazy Load for Videos.
Lazy Load and WordPress in a Nutshell
With page loading speed continuing to be an important factor for user experience and SEO, the lazy load is another tool in your toolbox to improve it. The technique decreases page weight and HTTP requests, allowing visitors to see their desired page more quickly.
Above, we have talked about how lazy loading works and what you can use it for. Besides its main application for images, you can also apply it to videos, scripts, comments, and even posts and pages.
While you need to pay attention to SEO, if used in the right way, lazy load still good option to make your WordPress site faster. If you want to give it a try, one of the plugins on this list is surely able to satisfy your needs.
Do you use lazy load on your site? How did you implement it? Let us know in the comments section below!
@torquemag.io