WordPress Managed Hosting - 100% Off For 3 Months - Coupon Code: WPB30 Avail Now

How to Setup Lazy Loading on WordPress Manually and Through a Plugin

Moeez — April 12, 2017 8 Minutes Read

Lazy Loading is the idea of loading the content on the page just before the user scrolls down to it. This means that instead of loading all the resources on the page at the same time (and wasting resources during the process), only the resources that are visible or soon to be visible to the user are loaded. The result is a very noticeable saving on resources and a streamlined user experience.

The idea of Lazy Loading could be implemented website wide or on a specific resource (such as videos). This way the developer could fine-tune the performance of the website and ensure that the various website performance metrics such as page load time are met.

In this article, I will present several ways of implementing WordPress lazy load.

The Pros of Lazy Loading

Page load speed is the most common reason why developers prefer Lazy Loading. Instead of worrying about loading everything on the page right away, the browser could load the content as the user scroll through the page.

The major trick in Lazy Loading is to use placeholders on the page. These placeholders are replaced with actual content as the user scrolls. In the case of infinite scroll websites, AJAX is used to load the content when the user reaches the end of the page. It is important to understand that Lazy Loading is not an alternative to the UX problems.

Get Blazing Fast WordPress Hosting With

Use Promo Code: WPB25

Adding Image Lazy Loading to Your Theme

I will demonstrate how to use WordPress Lazy Load on the test website. I will add placeholders to the page. These placeholders are replaced with images once the user scrolls down to them. I will use the Lazy Load for jQuery plugin for this purpose.

I will start with the actual code now. Remember that this lazy loading script should be added to the current WordPress theme. I will use the wp_enqueue_scripts action and add jquery as a dependency for the script. This addition will make sure that the lazy loading script is loaded after jQuery library.

I will next add JavaScript (to the footer). This addition will ensure that the lazy load plugin could recognize images. I will specify a class that the plugin could target. With this focus, the plugin will replace all placeholders with images (with the target class), as soon as the user  scrolls down to it. I will use wp_footer action to add this to the footer of all the pages of the

At this point, the lazy load plugin is fully operational. However, WordPress still loads the images on the website. I will next go through all the posts and replace the images with placeholder images. I will then use a data-original attribute on the img tag to indicate the actual URL. This is taken directly from the plugin’s instructions. Next, I will add a class “lazy” to all images. The jQuery will use this class. Once all this has been done, the lazy load plugin will monitor the images. As soon as these images come into the user’s view, the images are pulled using AJAX and then loaded up on the page.

The first step is to use a filter preg_replace_callback to search for the img tags.

When this function is called, it will search and find all the images. Once discovered, it will use the preg_lazyload function. Next, the filter the_content is used to filter through the post automatically. While this is not the speediest way of doing this, it gets the job done. As a post is being rendered, all the images are filtered and passed onto preg_lazyload. Here is the code of this function:

Lazy Load Plugin

Lazy loading images are an important point in page load strategy. jQuery.sonar is used to only load an image when it is visible in the viewport. You can easily implement this technique through a WordPress Lazy Load plugin.

change the placeholder image

You can use the lazyload_images_add_placeholders helper function:

Alternatively, I can add an attribute called data-lazy-src that contains the source of the image’s URL. In addition, I will set the actual image’s URL to a transparent 1×1 pixel.

Another strategy (not recommended though) you can use is :

Ensure Performance

Ask any user and they will cite page load speed as the most important part of their UX. Lazy loading of specific resources (rich media and videos) ensures that the webpage starts to display content almost immediately without waiting for the resources that could impact the page load speed. The good thing about WordPress lazy load is that you could either do it yourself or use a plugin. Whatever approach you use, it is easy to implement.

5 Best WordPress Lazy Load Plugins

WordPress lazy load can be implemented through plugins as well. All you need to do is install the plugin and you are good to go. I have collected all the best WordPress lazy load plugins that are updated and tested on the latest WordPress versions. Check them out!

PluginActive InstallationsVersion

BJ Lazy Load70,000+1.0.9
Rocket Lazy Load10,000+1.4.7
Ajax Load More40,000+3.5.0
WP YouTube Lyte10,000+1.7.1
a3 Lazy Load60,000+1.8.7

BJ Lazy Load

A very easy and quick to install lazy load wordpress plugin, Bj Lazy load is one of the best plugins you can install for WordPress. Known to make sure your website runs smoother and even quicker, BJ lazy load wordpress plugin helps you achieve just that with its simplicity and efficiency.

Known to use a rather innovative approach towards making sure your website loads faster, BJ lazy load wordpress plugin uses javascript like many other plugins for helping reduce page resources which helps make content load faster.
In addition, since you are in control of what and how this lazy load wordpress plugin works, you can handle user comments and even add special media frames for videos embedded into a site.

Overall, BJ WordPress lazy load plugin, with its awesome user interface and simplicity of use, makes it one of the best lazy load plugins available.

Rocket Lazy Load

Rocket lazy load wordpress plugin is another awesome lazy load plugin. It can be compared directly to BJ lazy load as one of the all time best lazy load plugins. When it comes to ratings, Rocket lazy load is better as compared to its functionality, they are evenly matched.
The awesome thing with rocket lazy load wordpress plugin is that it is just a 2kb script with lots and lots of benefits. This little script does all the job of making sure that all graphics which includes avatars, thumbnails and galleries are loaded as your visitors scroll down your site.

With this WordPress lazy load plugin, users have a better user interface because they do not have to wait endlessly for the images to load properly. The good thing is, this is not cluttered with lots and lots of options. You can just download it, click and install it. This makes it one of the best wordpress lazy load plugins on this list.

Ajax Load More

It is a great lazy load wordpress plugin with the idea of eliminating lag and promoting infinite scrolling. With its unique ability, it is also known to be one of the best lazy loading plugins for WordPress.

Ajax Load more can be used for building custom WordPress queries to shortcodes and also includes features like shortcode builder, query parameters, repeater templates to edit and extend the functionality of your website, multiple instances and multisite compatibility.

All the above mentioned functionalities and enhanced features makes Ajax WordPress lazy load plugin load more one of the best lazy load wordpress plugin available.

WP Youtube Lyte

This lazy load wordpress plugin one is a bit different in the way it operates. As with the name, you would know that it helps load videos and such before a user gets to it. You would be right because this lazy loading plugin uses YouTube’s own website to gather what it needs to display whatever content you have on your website.

This lazy load wordpress plugin achieves this by inserting YouTube embeds which feel like normal YouTube videos. Once clicked, they start playing which gives the impression that YouTube itself is integrated into the website.

With this WordPress lazy load plugin, you also have multiple videos playing simultaneously on your website which provides a much better experience for your users online. It also eliminates the need to use more servers and in the end eases the load off your website to further contribute towards quicker loading times. This makes it one of the best wordpress lazy load plugins on this list.

A3 Lazy Load

Last but not least, A3 lazy load wordpress plugin. It is a very simple to use plugin which is designed to help your page load quicker with minimal resources being utilized from the back end. The good thing about this lazy load wordpress plugin is that the heavier your page is with context to the content in it, the better this plugin works to help optimize it and make sure your website does not lag or cause any stability issues for your users.

What’s more is that this is optimized for mobile use, which means it is responsive, so since nearly all types of content is being optimized for being viewed on mobile phones, it makes A3 one of the best, if not, the best lazy load wordpress plugins ever.

What makes A3 lazy load wordpress plugin even better is that it is very easy to install and set up. Extensive controls over Admin will help you select what exactly you want and then leave A3 to work its magic on your page.

When your website loads, A3 optimizes the content in such a way that before a user scrolls to it, it is already loaded and ready to be viewed by your users. This makes it one of the best wordpress lazy load plugins on this list.

If you have any issues with the code or need to add to the discussion, do leave a comment below.

Wrapping it Up

Did you know that the average web pages weigh in at around 3.7 mb according to online sources? Now try computing this to the amount of time you would have to make a page load fully with all the images and videos.

Understanding this fact also means that 3.7 mb is a lot of data and takes time to load which is the one factor that can either make or break your visitor’s online experience. Nowadays when lots of images are need to make a positive impact on a website, it is increasingly important that all images are loaded without waiting. This is where lazy load wordpress plugins come into play.

Incorporating lots and lots of media into web pages is a growing trend but one may ask to what extent? Keeping in view the increasing demands of multimedia on smartphones, plugins are also required to be responsive more so for smartphones over desktop usage because the rate at which content is being consumed on mobile has increased over desktop computers.

So after lots of research into the matter, we found three of the best lazy loading plugins for WordPress that seem to get the job done and help not only speeding up your website, but also giving your users a better overall online experience.

If you think we have missed out on a plugin that you think should be included, please use the comments box down below.

Create Faster WordPress Websites!

Free eBook on WordPress Performance right in your inbox.

Create Faster WordPress Websites!

Free eBook on WordPress Performance right in your inbox.

Moeez is ‘The’ blogger in charge of WPblog. He loves to interact and learn about WordPress with people in the WordPress community. Outside his work life, Moeez spends time hanging out with his friends, playing Xbox and watching football on the weekends. You can get in touch with him at moeez[at]wpblog.com.



WordPress Help Zone - Ultimate WordPress Pit-Stop

Learning WordPress? Or are you expert enough to help others? Join our WP Facebook group!