Lazy loading images and videos inside WordPress: Tutorial, Review, and Commentary

Post written by Hudson Atwell
On Tuesday, May 23rd, 2017

The impact lazy loading videos has on page load time

I had heard about lazy loading images to improve page load performance, yet it hadn’t occurred to me to do the same with videos. Even more interesting was a performance savings report I read by developer Frank Goossen showing that his lazy video loading plugin YouTube Lyte was able to save .6 seconds on overall load time on a post with one lazy-rendered video in the content. Very good.

The impact lazy loading images has on page load time

“Images make up over 60% of an average page’s size, according to HTTP Archive. Images on a web page would be rendered once they are available. Without lazy loading, this could lead to a lot of data traffic that is not immediately necessary (such as images outside of the viewport) and longer waiting times. The problem? Visitors are not patient at all. By lazy loading, images outside of the viewport are loaded only when they would be visible to the user, thus saving valuable data and time.” – source (Smashing Magazine)

YouTube Lyte – A WordPress Plugin

The other day I was chatting with a colleague and we were going over rare plugins we liked and he mentioned YouTube Lyte, a WordPress plugin for lazy loading embedded/iframe’d YouTube videos built by the developer of the popular Autoptimize plugin.

Notice to readers: Issues with WordPress’s Youtube auto-embed & YouTube Lyte Plugin

Unfortunately when I ran my tests on this website and my local development website I noticed that this plugin does not work with YouTube embeds that use the youtube.com/embed/videoidhere/ URL structure in it’s iframe setup. YouTube Lyte is a video-only lazy loader too, so while addressing videos, we still have images to tend to.

Lazy Load XT – A WordPress Plugin

Next in line is the plugin Lazy Load XT by dbhynds which might be the most comprehensive lazy loader out there right now, and the only one that works with my video embeds here on Inbound Now so far. Lazy Load XT plugin is based on a JavaScript library of the same name, Lazy Load XT for JQuery.

I did find that I did not like having to wait for the image/video to load once I scrolled to it. The more I think about it the more I might prefer a deferred loading solution rather than a lazy loading solution. And I’ll talk about why a little more.

My local WordPress environment powered by XAMPP runs a little slower than I’d like so there’s a second or two delay before the image appears correctly. I imagine I’d have the same problem on a mobile device using limited cellular data bandwidth as well.

A user waiting on an image to load so our overall page load time improves is not a good value exchange.

Luckily Lazy Load XT comes with a list of custom modifications options that might help us get around this, such as loading the image/video as we approach it instead of when we get to it.

For example adding this code to your theme’s JavaScript will tell the plugin to begin loading the image/video when the user scrolls within 200 pixels of it, providing the lazy load with a head start that could result in a seamless experience for the reader. Like this:

jQuery.extend(jQuery.lazyLoadXT, { edgeY: 200 });

 

A3 Lazy Load

This one so far is my favorite because their beautiful settings page:

Like the Lazy Load XT WordPress plugin, A3 Lazy Load is powered by the Lazy-Load-XT JQuery library (link & write-up found at bottom of article).  You can watch a stress test in action here. The A3 team has a ton of projects. I encourage you to check them out.

An Alternate Approach

Defer loading instead of lazy loading

Wait aren’t they the same thing? Yes, but Lazy Loading denotes a specific type of deferred loading.  Lazy loading is prompted by UI actions performed by the reader (such as scrolling) and media items are loaded “as needed”.

This method is subject to drawbacks such as accidental visual lag during the impromptu loading which can happen when the reader scrolls too fast or when the reader clicks an anchor link inside the page that takes them to an un-rendered part of a page causing a delayed load.

With a non-lazy approach we can immediately begin loading the unseen part of the page without requiring any UI interaction by the user.  Using this method we would keep the reduced initial load time and not have to worry about any UX issues a lazy-loading approach the reader my experience (ie: no load lag when scrolling down).

What are the WordPress plugins that employ a straight deferred, non-lazy image and video loading system? I’ve not found one out there yet and if you have  please leave me a message inside the comments.

I did, however, find this awesome guide on how to defer image loading instead of lazy load. In theory, could easily be turned into a WordPress plugin.

Other cool JavaScript libraries I found during my research

For the most part we’ve been talking about WordPress solutions. While researching this topic I came across a few good JavaScript libraries related to lazy loading that I wanted to share with you.

Lazy Load XT for jQuery

https://github.com/ressio/lazy-load-xt

“Mobile-oriented, fast and extensible jQuery plugin for lazy loading of images/videos.” – source

Lazyframe.js

https://github.com/viktorbergehall/lazyframe

Lazeyframe.js seems very powerful and doesn’t seem to be leveraged inside of any WordPress plugin that I can find at the moment.

Unveil.js

http://luis-almeida.github.io/unveil/

Louis Almeida developed Unveil.js, a lightweight lazy-image-load library based on Mika Tuupola‘s LazyLoad.js.

“Lazy Load has some cool options such as custom effects, container, events or data attribute. If you’re not gonna use any of them you can reduce the file size by leaving just the essential code to show the images.

That’s what I did and this is my lightweight version of Lazy Load with support for serving high-resolution images to devices with retina displays – less than 1k.” – source

LazyLoad.js

http://appelsiini.net/projects/lazyload/

“Lazy Load is delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading. Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load.” – source

Lazy.js

http://jquery.eisbehr.de/lazy/

“Lazy is a fast, feature-rich, extensible and lightweight delayed content loading plugin for jQuery & Zepto. It’s designed to speed up page loading times and decrease traffic to your customers and users by only loading the content in view.” – source

Conclusion

If you defer the loading of unseen media, whether using the lazy load method or straight deferred loading method your page load speeds can dramatically improve. I recommend investigating a solution that’s right for you and sharing your experience in the comments section of this page. We’ve gone with A3 Lazy Load.

About the Author:
Cheers! Hudson Atwell is a co-founder and current administrator of Inbound Now. Consider hiring him through the Codeable.io Agency or connecting with him professionally through LinkedIn.

Signup and get started with Inbound Now

Sign Up for Free

Download

[gravityform id="3" name="Popup Form" title="false" description="false" ajax="true"]