How to Implement WordPress

Lazy Load on Images and

Videos

Downloaded on: 04 February 2022

The average web pages weight in at 3719 kB with images and videos making up nearly 78%
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
use 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.

With the release of WordPress 5.5 lazy loading became part of the core version and makes it
very easy to implement this technique.

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.

What is Lazy Loading and How Does it Work?

WordPress Lazy Load
Improving Page Load Speed With Lazy Loading Plugins
Lazy Loading Impact on SEO

What is Lazy Loading and How Does it Work?

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
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.

Lazy loading works like this:

The browser builds the web page DOM without downloading images and
preloading videos.
JavaScript is used to determine which images to download and which videos to
preload based on the content that is initially visible when the page loads. Those
images and videos are downloaded and preloaded as appropriate.
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 five plugins that produce a measurable improvement in website performance. If
you’re ready to implement lazy loading, start by considering these five options.

Do Images and Videos Really Slow Down Websites?

First of all, before you upload any images to WordPress make sure you optimize them.

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.
 — Speed test with no images 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?

— Speed test with no lazy loading plugin

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
Two plugins that speed up the delivery of this web page considerably are a3 Lazy Load and
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.

a3 Lazy Load

a3 Lazy Load is another popular WordPress lazy load option in the repository. This plugin is
active on more than 50,000 WordPress websites and has earned a very strong rating of 4.7
out of 5 stars and has received nearly 40 user reviews.

— A3 Lazy Load plugin

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.
 — Speed test with A3 Lazy Load plugin

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.

— Content size with A3 Lazy Load plugin

The image footprint is tiny at just over 150 kb. Here’s how the content screenshot looks with
a total payload of 2.0 MB.

— Content size with Lazy Load XT plugin

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. A3 Lazy Load leaves default WordPress behavior intact
and the result is that a much smaller image file is delivered.

Lazy Load

The 2nd option is Lazy Load, which is a free plugin created by the team over at WP Rocket.
It is currently active on over 10,000 installs with a 4 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.

— Lazy Load plugin by WP Rocket

This plugin works on thumbnails, all images in a post content or in a widget text, avatars and
smilies. The big advantage to this plugin is there are no JavaScript libraries such as
jQuery being used and the script weighs less than 10 KB. There are no options to configure,
simply install the plugin and lazy loading will simply work.

Native Lazy Loading

Over the past few years, there’s been a push to integrate lazy loading functionality directly
into web browsers. At this time, native lazy loading is available in Chromium-based browsers
like Chrome and Brave, as well as Firefox.

Native lazy loading is great for site performance because it doesn’t rely on inline Javascript
code or external scripts. To add native lazy loading to your site, simply add a loading=lazy
attribute to the images and iframes you want to lazy load.

— Google Native Lazyload plugin.

Google has developed the Native Lazyload plugin to help make this process easier. After
activating the plugin, WordPress will automatically insert the loading attribute into your img
and iframe tags.

Lazy Load for Videos

If you’re just concerned with lazy loading videos, we also recommend checking out the Lazy
Load for Videos plugin. While some of the above plugins do this as well, this is a great
solution for just video content.
 — Lazy Load for Videos plugin

Lazy Loading Impact on SEO

Whichever plugin you end up using for WordPress lazy loading, it’s important that you don’t
harm your SEO. There are two things you need to double check:

1. Make sure Google can still crawl your lazy loaded images. You can easily check this
using the “Fetch as Google” tool under the crawl section in Google Search Console. If
you can still see your images in the source code then most likely you’re fine.
2. Make sure you’re still using alt text on your images as this is important for Google
image search rankings.

Alt text is extremely helpful for Google Images — if you want your images to rank
there. Even if you use lazy-loading, you know which image will be loaded, so get
that information in there as early as possible & test what it renders as.

— ? John ? (@JohnMu) September 4, 2018

Summary
With widespread browser-native lazy loading support on the horizon, we recommend using a
plugin like Google’s Native Lazy Load to set a lazy loading baseline for your site.

With Chrome and Firefox support, and Safari support in the future, browser-native lazy
loading should be all you need to lazy load your images and iframes. With that said, if you’re
looking for a JavaScript-based option that targets older browsers as well, a3 Lazy Load is a
great 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.