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.
- 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.
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
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.
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. 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. A3 Lazy Load leaves default WordPress behavior intact and the result is that a much smaller image file is delivered.
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.
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.
loading=lazy attribute to the images and iframes you want to lazy load.
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
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 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:
- 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.
- 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 Mueller (official) · Not #30D (@JohnMu) September 4, 2018
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.
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.