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.
— 🌽〈link href=//johnmu.com rel=canonical 〉🌽 (@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.
cool post, but you should really slow down on those pop-up subscription forms
Hi Dorian, did it appear multiple times for you?
think automatic just put out their version via jetpack — https://jetpack.com/support/lazy-images/
did you guys check out this one? how does it compare to the others you mentioned?
I’d love to see this comparison as well!
Likewise. I just turned it on and tested it (but not in depth). It seems like it works well.
You’ve mentioned BJ Lazy load but it hasn’t been updated since more than a year now! Is it safe to use?
We’ll be updating this article soon. We recommend checking out https://wordpress.org/plugins/rocket-lazy-load/ and https://wordpress.org/plugins/lazy-loading-responsive-images/. Both are actively updated and work well.
Agree these are by far and wide the best two options, depending on what you need. This post definitely needs a slight revision, looking forward to seeing that.
Thanks for the post. a3 Lazy Load sadly performed rather badly as it minimized my images badly. At your suggestions, I did a search for lazy load plugins from my WordPress dashboard and I was given a JetPack suggestion. I installed it. And tell you what, it’s working professionally.
Thanks for your post.
I used one of these plugins and any posts where I had many comments (at least 100+ I think but did not check all posts) stopped loading completely. Then I removed the plugin and deleted my cache and everything was ok again.
Which plugin did you try and what do you use now?
I used Lazy Load. It does not like posts with too many comments. Tried using this plugin twice, and same thing happened each time.
Not using anything now, but strange that Lazy Load is so popular and no-one else has this issue.
I am currently using a3 Lazy Load. I have been told that I need to accomplish this “below the fold”. I have not heard that any of the plugins accomplish that. Do you have any suggestions? Thanks in advance.
i get some results with BJ lazy load, but my main hero image doesn’t load at all – any ideas? it is a background image and it doesn’t have a class to set as an exclusion in BJ settings. Any ideas would be awesome.
great post! a lot of folks noticed that Elementor page builder doesn’t work with most lazy load scripts due to the fact that they compile the background image CSS into a separate stylesheet.
to cope with this, i wrote a gist which i hope to turn into a plugin once it’s solid.
any comments/help with testing would be lovely.
check this out https://gist.github.com/jrevillini/e2fe088455e4007e43a23b3364720690
Hi, thanks for the great reviews.
I’ve just installed A3 Lazy load to use with video embeds via custom code, and I can tell it’s speeding up my site which is great BUT the placeholder image in mobile view is tall and skinny and looks pretty average. Is there a better tool which will keep my mobile thumb nails smaller AND regular sized? Cheers!
Hi, it is really nice topic to improve the speed of the WP blog, especially a blog with lots of images. But I recently heard that WordPress is planning to add native support for lazy load which will be based on newer standard of browsers. It is true?
Since wordpress 5.7 there’s native lazyload for iframes and images.
Do you know if that works with safari?
This is not supported but can be enabled in Settings under the Safari > Advanced > Experimental Features menu. More info: https://caniuse.com/loading-lazy-attr
Nice post, it is really good to improve the speed of the WordPress blog.