Lazy Loading in WordPress

How to Lazy Load WordPress (4 Simple Tools Explored)

Optimizing your WordPress site for speed is integral to keeping your audience happy. Users tend to have short attention spans, and they aren’t likely to stick around if a website takes too long to load. The bad news is, slow loading times may persist even if you’ve already implemented some basic optimization measures (usually due to your web host). That means you need to look outside the box for alternative solutions.

“Lazy loading” enables your site to respond faster when other optimization efforts have not reduced loading times suitably. It succeeds in this endeavor by delaying the loading of specific site elements until they’re actually needed. That way, users get to enjoy faster page loads, you get a lower bounce rate, and everyone’s happy.

With the above in mind, this article will explore the concept of lazy loading further, then guide you through the process of implementing it in WordPress. Let’s get started, shall we?

What is Lazy Loading?

Technically speaking, lazy loading is a programming technique that defers the initialization of a web object. When you lazy load WordPress, you’re choosing to delay the readying of a variety of elements across your site, so that everything else can load first.

In layman’s terms, lazy loading leaves unnecessary elements idle, or “lazy,” until they are called upon. Images and other types of assets (such as comments, videos, iFrames, and more) aren’t activated until a user “reaches” their location by scrolling down. As a user scrolls down a site, elements will be loaded as they come into view. You may well have noticed lazy loading before without realizing it,when you’ve seen images “pop” into view momentarily after they would’ve appeared if they were already loaded.

Lazy loading is the polar opposite of the “normal” approach to loading web pages, which involves loading the entire website in one go, and enables the core elements of a web page (i.e. the structure and textual content) to load as fast as possible.

Comment sections on blogs offer a particularly good example of why lazy loading is such an effective technique. They’re usually located at the bottom of each page, which means there’s no compelling reason to load them right away; many readers may not even get that far. To be fair, text-only comment sections aren’t likely to have an unusually large impact on your loading times, but every millisecond counts!

To sum up, by choosing to lazy load any type of website (WordPress included) you gain the following benefits:

  1. A decrease in your overall loading times.
  2. Reduced bandwidth (i.e. not as much data will be transferred).
  3. Increased performance – even if you’re using a modest shared web hosting plan.

Those three reasons should be compelling enough to convince most of you. The only question that remains is, How can I implement lazy loading in WordPress? Let’s find out now!

What Are the Best Lazy Load WordPress Solutions?

Implementing lazy loading functionality in WordPress isn’t that complicated. Despite the complex technical processes that need to run behind the scenes to make it happen, there are plenty of plugins that will automate the entire implementation for you.

In this section, we’re going to take a look at four popular lazy loading options for WordPress. Each of these offers slightly different implementations and customization levels, but they’ll all get you where you need to go.  Finally, we’ll cap things off by featuring a premium lazy loading service from one of the world’s leading image optimization providers.

If you’re not familiar with the process of installing and activating plugins,  you can check out the official WordPress Codex to brush up on the steps involved. Either way, we’ll be linking you to individual setup guides for each plugin so that you won’t be caught off guard!

Lazy Load

Lazy Load WordPress Plugin

 

The Lazy Load WordPress plugin is one of the most straightforward ways to implement lazy loading functionality on the platform. Once you download and activate the plugin on your current WordPress installation, you’ll good to go – it’s that simple. Your site’s images, comments, and other choice assets will only load when called upon, which – as you know by now – will improve your overall site loading speeds.

Key Features:

  • General purpose lazy load WordPress plugin solution that handles images, comments, and more
  • Leverages jQuery to only load images when they are needed

As we mentioned earlier, installing the Lazy Load plugin is as straightforward as it gets. However, do feel free to check out its FAQ if you want to learn about the plugin’s advanced customization options.

WP YouTube Lyte

WP YouTube Lyte

 

Most lazy load WordPress plugins are focused on images, but what if your website features a lot of YouTube videos? Even though these types of videos aren’t hosted on your site, loading YouTube’s embedded player can still have an impact on your site’s performance.

WP YouTube Lyte was designed to tackle this specific issue. The team behind the plugin understood the impact that YouTube’s player can have on a small site and came up with a solution based on lazy load principles.

Key Features:

  • Disables the pre-load function for YouTube videos on your site
  • Videos won’t provide preview images either

As with the last plugin we featured, WP YouTube Lyte is a breeze to install and configure.

BJ Lazy Load

A look at the BJ Lazy Load WordPress plugin.

So far, we’ve only featured plugins that offer little customization, but BJ Lazy Load bucks that trend. This tool is a fantastic alternative for those that want to dig a little deeper and customize their lazy loading experience.

Key Features:

  • Enables users to apply lazy loading to specific images and classes
  • Comes with advanced settings to configure how your thumbnails, Gravatar images, and iFrames will load

BJ Lazy Load’s installation couldn’t be simpler, and if you want to find out more about the plugin, you can always check out its official FAQ.

Cloudflare Mirage Image Optimization

A look at the Cloudflare Mirage Image Optimization service.

Cloudflare’s Mirage Image Optimization is a premium alternative to the plugins we’ve covered so far. The service enables you to deliver a faster experience for your web visitors – even if their internet connections aren’t that good – thanks to the utilization of some clever technical wizardry.

Mirage Image Optimization mainly works by storing two versions of a cached image – a full-resolution version, and a “virtualized” image. If the service detects a slow connection, it’ll load the virtualized image first and then serve the full-resolution version only after every other element is fully loaded.

Key Features:

  • Reduces load times by streamlining requests
  • Can be enabled at any moment with a single click
  • ‘Virtualizes’ images from your domain as well as those from third-party services
  • Designed with mobile users in mind

Cloudflare Mirage Image Optimization is free for anyone that wants to try the service out, and it’s also included as part of Cloudflare’s Pro, Business, and Enterprise plans.

Conclusion

Reducing WordPress loading times is difficult, even if you go the extra mile by taking care of issues such as image optimization. Sometimes, thinking outside the box pays off, and using lazy loading definitely fits that bill. Furthermore, implementing this technique can significantly enhance the way visitors experience your website if they’re unlucky enough to have bad internet connections.

Fortunately for you, WordPress offers a wide variety of plugins and tools that enable you to implement this feature in a matter of minutes. Let’s check each of them out one more time to help you find the right one:

  1. Lazy LoadA good option if you’re looking for a no-fuss plugin.
  2. WP YouTube Lyte: If your site relies on YouTube videos, this is the way to go.
  3. BJ Lazy Load: The perfect pick for users who enjoy having a wide range of customization options available.
  4. Cloudflare Mirage Image Optimization: A powerful free service that’s perfect if you’re not looking to add more plugins to your site.

Do you have any questions about lazy loading that we didn’t get a chance to answer? Let us know in the comments section below!

This post may contain affiliate links, which means Nimbus Themes may receive compensation if you make a purchase using these links.

2 Comments

  1. Adam Godsall Avatar

    Adam Godsall

    March 22, 2017 at 7:00 am

    Glad I found this post, I have changed to the BJ Lazy Load plugin and seen much better performance, great post.

    Reply

Leave a Reply to Adam Godsall Cancel reply

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