How to Implement WordPress Lazy Load on Images and Videos
By Jon Penland, Updated: April 4, 2017
The average web pages weight in at 1820 kB with images and videos making up nearly 73% of the total weight according to the HTTP Archive. That’s a lot of bytes for a website visitor’s browser to download and render, and the trends all point to larger web pages and increased used of images in the future. WordPress is leading the charge when it comes to sharing media and incorporating media files into the site design. With WordPress it’s easy to integrate images and videos into posts, pages, and even into the background of the theme.
However, all those heavy resources make downloading a web page a costly experience as users that have to wait for large files to download — including files that aren’t initially visible — before viewing a web page. This is where WordPress lazy load comes into the picture. Lazy loading is an optimization technique that loads visible content but delays the downloading and rendering of content that appears below the fold. It’s just the sort of thing
It’s just the sort of thing Google gets excited about, and it’s a technique you should consider if your posts and pages include a lot of embedded videos and high-resolution images.
How Does Lazy Loading Work?
Lazy loading works like this:
- The browser builds the web page DOM without downloading images and preloading videos.
- Downloading and rendering of additional videos are delayed until a site visitor scrolls down the page and additional content comes into view.
The end result is that images aren’t downloaded and videos loaded until they are actually needed. This can provide a significant boost in performance for sites that include a lot of high-resolution images and embedded videos.
WordPress Lazy Load
As with so many other website performance problems, when it comes to WordPress lazy load, there’s a plugin for you can use to fix the problem. Actually, there are many free plugins available in the WordPress plugin directory that can be used to lazy load images and videos. After considering a few dozen plugins and putting several through their paces, we’ve identified three plugins that produce a measurable improvement in website performance. If you’re ready to implement lazy loading, start by considering these three options.
Do Images and Videos Really Slow Down Websites?
We need a baseline score so that we can see the impact of adding images and videos. There’s no sense in fixing a problem if there’s no problem to begin with. To test things out I set up a standard WordPress installation on a Kinsta hosting account. TwentySixteen is the active theme and no optimization plugins or techniques like caching have been implemented.
Here’s how Pingdom website speed test rates the site before adding any pictures or videos.
As you can see, the page is very light at just under 155 kb and loaded in less than half a second. Hard to find fault with those scores. What happens if we load up a page with large image files and embedded YouTube videos?
The page size has ballooned to 1.7 MB and page load time has nearly trippled to just under 1.3 seconds. TwentySixteen is a well-written light theme, so even with a half dozen images and YouTube videos added, this site is still pretty light and loads lighting fast. However, we can see that adding images and videos has made the page size much larger and slowed down the page load speed considerably.
Improving Page Load Speed with Lazy Loading Plugins
Four plugins that speed up the delivery of this web page considerably are BJ Lazy Load, Lazy Load XT, a3 Lazy Load, and Rocket Lazy Load. Let’s look at how each performed in turn. Several additional plugins were also tested but did not produce a measurable improvement in site performance. As you try out lazy load plugins, be sure to do a before and after test to make sure they’re producing the results you’re looking for.
BJ Lazy Load is a very popular plugin. It is active on more than 40,000 WordPress websites and is rated 4.1 out of 5 stars on the strength of more than 60 total reviews.
Installation and setup is effortless. Just find the plugin using the built-in WordPress plugin installer, install it, and activate it. Upon activation, a new menu item is added at Settings > BJ Lazy Load. All lazy loading options are selected by default, and you’ll probably want to leave the settings alone unless you encounter problems on your site front end after activating the plugin.
One option provided by this plugin and neither of the other two is the ability to add a URL for an image to use as a placeholder for lazy loaded images and videos until the actual image and video resources are downloaded. Of course, if you do use this option you’ll want to use a very small file and not a high-resolution image.
For the lightest possible footprint and seamless results, I’d recommend creating a solid color image of the same color as your site background and saving it in png format.
You can also specify an HTML class that will be excluded from lazy loading. You can then apply that class to any images or videos you wish to exclude from lazy loading. Finally, you can specify how close an image or video should get to the viewport before it is downloaded and rendered.
Let’s see how quickly our page loads with BJ Lazy Load set up.
That’s just silly fast. The site was tested a half dozen times at multiple times throughout the day, and load times were consistently between 300 and 400 milliseconds.
This blazing fast test result is not an outlier.
While the page loads shockingly quickly with this plugin installed, the size of the page has actually increased. What’s up with that? In theory, with lazy loading activated, page size should decrease since not all images are being downloaded with the initial page load.
After some investigation into the situation here’s what I found.
How Does WordPress Serve Up Images?
Default WordPress behavior is to present a range of file sizes to the browser using the
srcset attribute of the
img element used to embed the image. The browser looks through the list of available sizes and loads the smallest version of the image that will fill the available space.
This means that if you upload a really large image file WordPress will automatically offer several smaller versions of that image to your website visitors. Your visitor’s browser will grab the smallest suitable image based on the amount of pixel real estate available for the image to occupy.
How Does BJ Lazy Load Change WordPress Behavior?
BJ Lazy Load overrides default WordPress behavior. The
srcset attribute is been replaced with a
data-lazy-srcset attribute that works in conjunction with the plugin scripting. However, the end result is that rather than downloading a reduced size version of the image, the full resolution image ends up being downloaded and rendered.
This isn’t ideal, but as long as you optimize image files before uploading them to WordPress — something I did not do — then you won’t see the same issue.
The eyeball test — simply loading the site and watching to see what happens — demonstrates that if you do use BJ Lazy Load and your site has a non-white background color you will need to add some sort of placeholder image. The default behavior without any placeholder image is to render a white placeholder gif in place of the image.
Lazy Load XT performed well in our tests and is another good WordPress lazy load plugin worth considering. With something more than 1,000 active installs, this plugin isn’t as popular as BJ Lazy Load. However, it caught my eye with it’s impressive 4.9 out 5-star rating. Only one of the 22 published reviews is less than 5 stars.
The page is still sitting at 2 MB and page load time isn’t quite as fast as it was with BJ Lazy Load, but we’ve still accomplished a 50% reduction in page load time compared to the time required to load the page without lazy loading.
A quick look at the file tree in the test results shows the same thing is going on with Lazy Load XT activated as we saw with BJ Lazy Load. Rather than loading an optimized version of the image, with the plugin activated the full-resolution version of the image is downloaded and rendered.
While the plugin didn’t produce quite the same speed boost as BJ Lazy Load, the eyeball test goes in favor of Lazy Load XT. Unlike BJ Lazy Load, the placeholder used by Lazy Load XT is transparent. As a result, there are no unsightly empty white boxes while the images and videos are loaded and you don’t have to worry about creating and uploading a placeholder image.
a3 Lazy Load is another popular WordPress lazy load option in the repository. This plugin is active on more than 10,000 WordPress websites and has earned a very strong rating of 4.7 out of 5 stars and has received nearly 40 user reviews.
Activating the plugin adds a settings menu at Settings > a3 Lazy Load. For testing purposes, I left the default settings alone with one exception. I did use the Loading Background Colour option to match the placeholder color to the color of the web page background. With that change made, and the default settings applied, the site performed very well.
We’re back down to a page load time under half a second. That’s remarkable considering the number of images and videos included on this web page.
Test Results Compared
No doubt, you’ll notice that the page size and the number of requests have decreased considerably. What’s creating that dramatic difference? Pingdom provides a snapshot of content size, and a quick comparison provides the answer. First, here’s what the content size snapshot looks like with a3 Lazy Load activated.
The image footprint is tiny at just over 150 kb. Both BJ Lazy Load and Lazy Load XT produced a 2.0 MB page size. Here’s how the content screenshot looks with a total payload of 2.0 MB.
The script, HTML, CSS, and other content sizes are nearly identical. However, the image size is 1.86 MB — basically the size of the full resolution version of the very first image on the page — rather than just 150 kb. So, what’s going on? As I mentioned previously, WordPress automatically supplies a variety of image sizes and the browser selects and renders the smallest possible version based on the size at which the image will be rendered on-screen.
Both BJ Lazy Load and Lazy Load XT override this behavior and end up delivering the full resolution image. However, a3 Lazy Load leaves default WordPress behavior intact and the result is that a much smaller image file is delivered.
Curiously, despite the page size difference, the site loads faster with BJ Lazy Load activated than with a3 Lazy Load activated. The site was tested multiple times with each plugin installed to ensure that the results shown here weren’t unusual. The difference comes down to the number of HTTP requests required to load the page. At a glance, it looks like BJ Lazy Load requires more requests. However, if we take a look at the file tree we see what’s really going on.
The site file with BJ Lazy Load activated includes about twenty requests that begin with
data:image/gif. These are data URIs rather than HTTP requests. In effect, they tell the browser to create a gif locally rather than requesting that gif from a server. As a result, BJ Lazy Load only really needs 17 HTTP requests to build the page versus the 27 required by a3 Lazy Load. That explains why the page loads lightning fast.
Lazy Load XT employs a similar tactic, but still requires a few more requests that BJ Lazy Load, which explains why it doesn’t produce quite the same results.
And a 4th option is Rocket Lazy Load, which is a free plugin created by the team over at WP Rocket. It is currently active on over 6,000 installs with a 4.2 out of 5-star rating. If you are looking for a simple WordPress lazy load option with a good speed, this is a great choice.
Conclusion and Recommendations
Where does that leave us? All three of these options did a great job of improving page load speed by lazy loading images and videos. The choice of which is best comes down to personal preference and how you prepare images prior to uploading them to your WordPress website.
- If you don’t optimize images prior to uploading them to your WordPress website — and you really should — then go with a3 Lazy Load so that you gain the benefit of image optimization built into WordPress.
- If you optimize images prior to uploading them and want the fastest delivery possible with the least effort, you can’t go wrong with BJ Lazy Load. Rocket Lazy Load is another good option.
Lazy loading is just one technique you can use to optimize your WordPress website. However, it has the potential to have a profound impact on site speed if you use a lot of images and videos. Still, once you’ve implemented lazy loading, there are several additional techniques you can consider and implement to deliver the fastest possible website performance. Did we miss any other good WordPress lazy load solutions? If so, let us know below.