[ANSWERED] Using Lazy Load To Speed Up WordPress While Maintaining Pinterest Pinnable 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 plug ins do you all recommend for lazy loading images 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 lazy load plugins, so I thought I would share those experiences in a blog post for those who might benefit from them.

What The Heck Is Lazy Load 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.

Not the lazy load we are talking aboutThis 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.

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!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?

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 Autoptimize or with 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.

Issue 4 – For those of us that include a “pinnable” 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 LoadI DO NOT RECOMMEND THIS – This is one of the most used 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 OptimizerWorks, 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 pinnable images issue.

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 pinnable images problem. This is the plugin that

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.

Download And Install The Plugin – This is easy. Just search for A3 Lazy Load in the WordPress plugin directly and choose Install. Once you install the plugin, be sure to activate it.

Download the A3 Lazy Load Plugin from the WordPress directorySearch for the A3 Lazy Load plugin and install it. Be sure to activate it after it is installed.

Open The Setting Page In Your WordPress Dashboard – In the left nav choose Settings > A3 Lazy Load.

Open the settings panel for the A3 Lazy Load pluginNext, 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:

Plugin Framework Global Settings Tab

Open Box Display: Off

Clean Up on Deletion: Off

The A3 Lazy Load Plugin Framework Global Settings tabLeave both of these options in the Off state.

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.

The A3 Lazy Load Activation TabEnable the lazy load feature to get access to the rest of the configuration options.

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

The A3 Lazy Load Images tabLeave everything on except for the Widgets setting and be sure to type no-lazyload in the box of classes to skip

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.

Exclude URIs and Page Types Tab

URIs text field: Empty

Page Type Exclusions: ALL OFF

A3 Lazy Load Exclude URIs and Page Types tabIn 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!

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.

A3 Lazy Load Script Load Optimization tabTry loading the script in the footer for the best performance.

WordPress Mobile Template Plugins Tab

Disable on WPTouch: On

Disable on MobilePress: On

A3 Lazy Load WordPress Mobile Template Plugins tabI don’t use either of these mobile template plugins, so I leave the “disable” toggle to On for both.

Effect And Style Tab

Loading Effect: Fade In

Loading Background Color: #dddddd

A3 Lazy Load Plugin Effect And Style tabI 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.

Image Load Threshold Tab

Threshold: 100

A3 Lazy Load Plugin Image Load Threshold tabI 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.

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.

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 pinnable images always get loaded on first request and are never lazy loaded, we just have to assign the “no-lazyload” class to our pinnable 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

Assign the CSS class to an image to stop lazy loadingThe 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 pinnable 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 pinnable images for sharing.

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

Cheers!

–Sean


Share This Post With A Pin!

Lazy load your images and keep them pinnable on your WordPress site!

Content So Good You Can Almost Taste It!

Subscribe to my email list and get updates in your inbox

Join my mailing list and get all of my social media tips, tricks, and comics in your inbox. Spam-free, guaranteed!





Comments And Reactions

  1. Great post. I’ll be switching to A3 as I’m always wanting to get the best performance, but it was also annoying to have blank (white space) areas when the images haven’t loaded yet.

    This will fix that. Cool πŸ™‚

  2. THANK YOU!! I was having such a hard time finding a solution to my lazy loading. πŸ™ most of my posts are step by step tutorials…very pic heavy. Using Autopmize was not working for lazy loading the way I wanted. Just added A3 and followed your instructions for set up and YAYAYAY working perfectly! Thanks again!


Speak Your Mind, Share A Comment, Ask A Question

*