[ANSWERED] Is There A Free Lazy Load That Will Speed Up WordPress While Maintaining Pinterest Pinable Images

This was a great question that came from the Mediavine group on Facebook. This is a group of bloggers who are making money with their sites, so they are always looking for ways to increase the performance of their sites in order in increase organic traffic and, as a result, increase their revenues.

What is the best free WordPress lazy load plugin that you all recommend to defer offscreen image loading and caching? Thinking of scrapping SG Optimizer altogether and starting over with new plugins for site speed, but it makes me really nervous!

I, too, am always looking for ways to speed up my WordPress site and it happens that I have tried several different WordPress lazy load plugins as I try to defer offscreen images to increase my page speed, so I thought I would share those experiences in a blog post for those who might benefit from them.

What Is Is Lazy Loading In WordPress Anyway?

When a visitor comes to your site, their browser makes a request to the server for the contents of the page. The server replies with all of the HTML code, the images, videos, audio assets, etc…that make up the contents of the page.

Then, the browser renders that code and content into the pretty web pages that we are used to viewing.

This isn’t the kind of lazy load we are talking about. But I hope it makes you smile 🙂

The challenge, though, is the larger the payload of content that the server has to return, the longer the browser has to wait to get the data. The delivery of the data is then regulated by the connection speed that the user has available.

If they are browsing on a slow 3G mobile connection, it can take a long time for the browser to receive the data. If, however, they are browsing on a super-fast LAN line (think of the data jacks that most corporate environments have) then the payload can be delivered to the browser very quickly.

WiFi lies somewhere in between.

Once the data is received by the browser, it has to render all of that data and it usually waits until it has the majority of the data before it starts rendering the page.  What this means is pages that include a lot of images will always take longer to load than those that don’t.

But what if we could speed up that process?

What if the browser only had to wait on the images that needed to be visible within the screen that the user can actually see? This area that is visible to the user is often referred to as the “viewport”.

Everything that is not visible on the screen is considered to be “below the fold”. What lazy loading does is tell the browser not to request any images that are below the fold. The server is basically told to defer offscreen images during the initial page load.

Then, when the user starts to scroll down the page, the browser requests those images. Since the browser is only requesting an image or two at the time of the scroll, they can be delivered very quickly by the server and rendered quickly.

What this does it provides the user with a faster initial load of the page, and images “on demand” as the scroll down.

We want our WordPress sites to be blazing fast…like a Porsche on the track!

That Sounds Great – What Are The Downsides To Lazy Loading Images?

My goal was to find the best free lazy load plugin for WordPress that also allowed me also ensure that my Pinterest images displayed. Along with that, I also had to make sure that whatever plugin I chose, it didn’t interfere with the site speed or functionality of my blog.

In my research, I found there really are very few downsides to lazy loading images. I have experienced a few and I’ll go into detail below on how to overcome them. The challenges I have seen are:

Issue 1 – Conflicts between minification plugins like the Autoptimize plugin or with WordPress themes that cause lazy loading not to work or images to disappear completely.

Issue 2 – Issues where the lazy loading plugin doesn’t offer the configuration customization that I needed. This is particularly true in the fact that I want to give the user some visual cue that the image is loading if there is some delay. Personally, I like for there to be a placeholder that is greyed out and shows that the image is loading. I also want to be able to control when the image starts to load from the server.

Issue 3 – Some lazy load plugins just didn’t offer any performance gains. As you would expect, I ditched them in search of the one that gave me the fastest load times…since that’s kinda the point. My goal was to find the best free lazy load plugin for WordPress and if it didn’t speed things up, it was basically worthless.

Issue 4 – For those of us that include a “pinable” image (one that is specifically designed to be pinned to Pinterest) at the bottom of each post, lazy loading can present a problem. If the server hasn’t sent the image and the browser hasn’t rendered the image, than the Pinterest tool doesn’t have anything to pin.

Okay, So How Can I Overcome The Issues And Speed Up My WordPress Site?

Before landing on my preferred solution, I tried the following plugins:

BJ Lazy Load – I DO NOT RECOMMEND THIS – This is one of the most used free lazy load plugins for WordPress, with more than 90,000 installations. The plugin used to work great, but it hasn’t been updated in a long time and I do not like using plugins that aren’t continually updated. To keep your site safe and secure, it’s best to use well-maintained plugins. Again, I don’t recommend it.

SiteGround SG Optimizer – Works, But Not My Preference – Since I host on Siteground (and I do recommend it), I use their Siteground SG Optimizer tool for server and caching optimizations. Recently, they added lazy load to the plugin so I gave it a try. It did help my site speeds, but didn’t really wow me in its performance. Also, it didn’t have the customization options that I wanted and it didn’t solve the pinable images issue. (See Update below on this plugin)

NOTE: If you are hosted on Siteground, I don’t recommend ditching the SG Optimizer plugin altogether. There are some really good caching features in the plugin and I use them. I just don’t use the plugin for the image optimization and lazy loading features.

A3 Lazy Load – This One Is The Winner – The third time was the charm for me when I found this plugin. Not only does it work and reduce my page load times but it offers the configuration options that I was seeking AND it solves the Pinterest pinable images problem. This is the plugin that checks all the boxes for my site and, in my opinion, is the best free lazy load plugin for WordPress.

How Do I Configure A3 Lazy Load To Speed Up My Site?

NOTE: I can’t guarantee that A3 Lazy Load will work perfectly for your site. For my main personal blog, I use the Genesis theme and it works great. I have two other blogs and about 15 client sites that are built on the Bridge theme and A3 works great with it, too. You’ll just need to test it with your theme and see if it works.

Okay, with that disclaimer out of the way, here are my recommended configurations that you can use to test A3 Lazy Load for speeding up your WordPress site.

Step 1 – Download And Install The Plugin

This is easy. Just search for A3 Lazy Load in the WordPress plugin directory and choose Install. Once you install the plugin, be sure to activate it. It’s a free lazy load plugin for WordPress, so there are no hidden costs.

Search for the A3 Lazy Load plugin and install it. Be sure to activate it after it is installed.

Step 2 – Open The Setting Page In Your WordPress Dashboard

In the left nav choose Settings > A3 Lazy Load.

Next, open the settings page for the A3 Lazy Load plugin to configure it.

Configure The Settings To Meet Your Needs – Here are my preferred configurations:

Step 3 – Configure The Plugin Framework Global Settings Tab

Open Box Display: Off

Clean Up on Deletion: Off

Leave both of these options in the Off state.

Step 4 – Configure The Lazy Load Activation Tab

Enable Lazy Load: On – Make sure this is on so you can configure the rest of the plugin. If it causes issues with your site, just turn this off and it will stop lazy loading.

Enable the lazy load feature to get access to the rest of the configuration options.

Step 5 – Configure The Lazy Load Images Tab

Enable Lazy Load for Images: On

Images in Content: On

Images in Widgets: Off (I turn this off to ensure that any sidebar widgets load when the page is requested)

Post Thumbnails: On

Skip Images Classes: Type “no-lazyload” without the quotes in this box. I’ll explain why further down in the post.

Noscript Support: On

Leave everything on except for the Widgets setting and be sure to type no-lazyload in the box of classes to skip

Step 6 – Configure The Lazy Load Videos and iframes Tab

Videos and iframes: Off – I turn this off because right now I don’t want my videos or iframes to be lazy loaded. This setting can cause issues with ads rendering, which can hurt revenues for blogs that use an ad network. If you don’t use an ad network and you want to speed up your site even further, then try turning this on and see if it helps.

Step 7 – Configure The Exclude URIs and Page Types Tab

URIs text field: Empty

Page Type Exclusions: ALL OFF

In this tab, you can exclude specific pages or page types from using the lazy load function. Cool, eh?

NOTE: Remember when I talked about all of the configuration options that I wanted to have in a lazy load plugin? Check all these options out! You can choose which pages you want to use lazy load on and which you don’t want. All in a free plugin!

Step 8 – Configure The Script Load Optimization Tab

Theme Loader Function: Footer – Try the footer setting first. If it causes issues with your theme or lazy loading doesn’t seem to be working, then switch it to Header.

Try loading the script in the footer for the best performance.

Step 9 – Configure The WordPress Mobile Template Plugins Tab

Disable on WPTouch: On

Disable on MobilePress: On

I don’t use either of these mobile template plugins, so I leave the “disable” toggle to On for both.

Don’t worry about disabling these features, though, A3 Lazy Load will still lazy load your WordPress mobile pages.

Step 10 – Configure The Effect And Style Tab

Loading Effect: Fade In

Loading Background Color: #dddddd

I like the fade in style and I use a grey background so the user feels like the images is rendering from grey to the fade in.

Step 11 – Configure The Image Load Threshold Tab

Threshold: 100

I set my image load threshold to 100 px.

The image threshold is an important one for me and it’s a great feature that A3 Lazy Load offers. The load threshold indicates when the browser should start to ask for an image that hasn’t loaded yet.

By default the plugin setting is zero. This means that the loading process will begin when the top of the image reaches the bottom of the viewport.

For me, that’s too late. I don’t want my users to scroll down and watch the image load.

Instead, I set the threshold to 100 pixels below the viewport. That means when the top of the image is 100 pixels from coming into the user’s view…I want the image to start loading. That way, the images is either partially or even fully loaded by the time the scroll to the image.

Step 12 – Save Your Changes

IMPORTANT LAST STEP – Once you have configured the plugin, be sure to click the “Save Changes” button at the bottom. That way the settings are applied.

How Do I Know If A3 Lazy Load Is Working?

Ideally, it is hard to test lazy loading because if your server is fast enough and your settings are correct (remember that 100px threshold?) then the user never knows that the images are lazy loading.

In reality, though, you can scroll down your page really fast and still see the lazy load.

So, to test it, clear all your server cache’s and clear the Autoptimize cache if you use it. You might also clear your Cloudflare or CDN cache if you use one.

Next, load your blog home page. Let the page load and don’t scroll down at all. Theoretically, there are empty images sitting below the fold waiting to be lazy-loaded.

Now…scroll down REALLY FAST. You should be able to “catch” some of your images lazy loading. Remember, though, most users aren’t speed scrolling through your site because they want to consume all your amazing knowledge!

If you can’t catch the lazy loading, try setting the threshold back to zero and see if you can do it then. Just remember to set it back to 100 once you are done testing.

What Do I Do If My Images Aren’t Loading In WordPress After Turning On Lazy Load?

The first step is to just disable the A3 lazy load plugin and see if they start loading again. If they do, there may be a conflict with the A3 Lazy Load plugin and your theme. Try just using the native WordPress lazy load capabilities (see the update about it at the bottom of this post) or try using one of the other plugins mentioned above to see if they work with your theme.

Will Lazy Loading Help My Google Page Speed Insights Scores?

It should! One of the criteria that Google uses is “deferring off-screen images” which means lazy loading. That means Google is going to score your site better because lazy loading speeds up your site and Google LOVES fast sites.

But What About That Pinterest Issue You Mentioned? How Did You Resolve It?

Actually, we already fixed most of the issue. You see, A3 Lazy Load gave us the ability to exclude certain CSS classes from being lazy loaded. When we typed “no-lazyload” into the Skip Images Class field, we told the plugin to never lazy load any image that has the “no-lazyload” class assigned to it.

So, to ensure that our pinable images always get loaded on first request and are never lazy loaded, we just have to assign the “no-lazyload” class to our pinable images.

You can assign the class to the image when you first upload it or you can go back and edit any images in already-published posts to add it in.

When adding or editing an image, the field you are looking for is

The Image CSS Class is where you assign the no-lazyload class that prevents an image from lazy loading.

Once you insert the image with that class or update an existing image, the A3 Lazy Load plugin will automatically load the image on first request. Just assign this class to any pinable image and it will always be available for pinning, regardless of whether the user has scrolled all the way to the bottom of the post.

That’s it! If you made it this far, hopefully you’re ready to give lazy loading a try. Maybe you followed along and set it up on your site as you read through this.

Either way, I hope it helps you speed up your site and maintain those pinable images for sharing.

If you have questions, feel free to reach out or leave them in a comment!

Cheers!

–Sean

UPDATE #1 – Recently, Siteground updated their Siteground SG Optimizer plugin to include the ability to exclude a CSS class from being lazy loaded. This is the feature that I really like about A3 Lazy Load since it allows for pinable images to be included at the bottom of the post and be excluded from lazy load so Pinterest will pick them up. I plan on giving the SG Optimizer plugin some more testing and I’ll add the results to the post. 

UPDATE #2 – With the launch of WordPress 5.5, WordPress has included the ability to defer offscreen images without using a WordPress plugin. While that is really great if you want basic lazyloading capabilities, it doesn’t include some of the more advanced features that plugins offer. Be sure to do your homework to determine whether the core WordPress lazy load capabilities will suit your needs or if you need a plugin.

Share This Post With A Pin!