How to Lazy Load Images and Speed Up Your WordPress Site
Speed is key on the Internet. Whether you want more conversions, more search traffic, or more satisfied users, it pays to optimize your WordPress site for speed.
But if you’ve already checked off the big boxes like using a CDN and optimizing your image sizes, how can you eek out even more speed?
One way is to implement lazy loading for your images.
With lazy loading, WordPress only loads images when the user scrolls to that part of the page. For image intensive sites, this can drastically reduce how long it initially takes your page to load, as the user’s browser won’t be trying to load all the images that are located below the fold.
In this post, I’m going to discuss the pros and cons of lazy loading and then show you the best WordPress plugins for lazy loading images.
Benefits of Lazy Loading Images
The main benefits of lazy loading break down into two areas…
Speed Up Your Page Load Times
The main benefit is a significant upgrade to your site’s initial load time. If you use lots of images in your posts, they’re going to add a bunch of size to your page. There’s really no point to loading them before it’s possible for visitors to see them (except SEO considerations, which I’ll address later).
So, better to load the page immediately and then fill in the images as they’re needed. You can’t even be sure readers will scroll the whole way down, which makes loading them entirely unnecessary.
That leads me to my next point…
Save your Users’ Bandwidth
Not everyone is using unlimited bandwidth. For people who are limited by say, 3G mobile plans (or just horrible Internet providers), you can do them a favor by lazy loading your images. They’ll only have to use data for images they’re actually seeing.
They may never know, but it’s a nice thing to do, especially on your mobile site.
Disadvantages of Lazy Loading Images
There are some potential drawbacks to lazy loading images that you need to keep in mind.
Search Engine Optimization and Lazy Loading
If you don’t load content until users see it, it might be difficult for search engines to crawl and index. That’s why it’s not really a good idea to lazy load all your content. You can hurt your site’s SEO if you’re not careful. By only lazy loading images, you can still get all your text properly crawled and indexed while still improving your page speed.
However, if you’re trying to rank images in something like Google Image Search, you’ll need to keep this in mind.
And always remember – if you do try to lazy load all of your content (including text), use the Fetch as Googlebot tool to see if it causes Google problems.
User Experience and Lazy Loading
Sometimes lazy loading causes content to jump if images are not loaded in time. This, quite honestly, can be annoying. But, as long as you implement lazy loading properly, it shouldn’t be a regular issue.
How to Lazy Load Images with WordPress
If you need something done…there’s probably a WordPress plugin for it.
That holds true for lazy loading – here are the best plugins for getting your WordPress site all set up with lazy loading images.
Lazy Load Plugin
The most popular free plugin to implement lazy loading is Lazy Load. It’s got over 70,000 active installs with a 4.5-star rating at the plugin repository.
It’s a simple plugin – it uses jQuery.sonar to only load images when they’re actually in the user’s visible area. Just upload, click Activate, and you’re good to go. No configuring with this plugin.
Rocket Lazy Load Plugin
It works on thumbnails and images in both posts and widgets.
Like Lazy Load, you just need to install it and click Activate to start lazy loading your images.
BJ Lazy Load Plugin
The plugin will lazy load images, thumbnails, gravatar images and content iframes. Since it handles iframes, BJ Lazy Load can also lazy load videos from YouTube or other iframe embeds, which is a nice advantage.
WordPress Advanced Image Lazy Load Plugin
WordPress Advanced Image Lazy Load is a premium plugin available at Code Canyon. For that premium price, you get support for all images, whether they’re in posts, pages, sidebars, featured images, or anywhere else.
It’s also search-engine friendly, so you shouldn’t experience any indexing problems.
Another nice feature is that you can enable/disable lazy loading for individual posts, which gives you a ton of control over how your site functions.
You’re definitely getting some more advanced features by paying the premium price tag.
WordPress Advanced Image Lazy Load costs $15 and has 228 sales and a 3.88 rating.
JCH Optimize Pro Plugin
JCH Optimize Pro is the premium version of the free JCH Optimize plugin. Unfortunately, you need to purchase the premium version of the plugin to get access to the lazy loading functionality. But you also get a bunch of additional features that may be useful depending on what other plugins you have installed.
In addition to the lazy loading, you’ll also get:
- Minimized HTTP requests
- Minified page sizes
- Optimized images
- Some other smaller features like CDN support and more.
So if you want more a full-service optimization suite, you can check out JCH Optimize Pro. The pro version starts at $29 for 6 months of access.
Bonus: Crazy Lazy Plugin
Crazy Lazy doesn’t have a lot of installs (only 400 active installs currently), but it does get regular updates. It caught my eye because the dev had updated it literally the same day I made this list. Check it out for another free, lightweight option.
If you’re looking to squeeze some more optimization out of your WordPress site, you should definitely consider implementing image lazy loading.
If your posts are already mostly text, you probably won’t notice much improvement. But if you’re using lots of images (which you should be!), then lazy loading can definitely improve the initial page load speed for your site.
With how many free plugins there are to handle lazy loading, you really don’t have an excuse not to. Just remember to always check your site with Fetch as Googlebot to make sure nothing funky happens with Google indexing.