WordPress lazy load is a technique used to improve page loading speed by only loading images and videos when they are visible in the viewport. This helps reduce the amount of data that needs to be loaded when a page is opened, resulting in faster page loading times.
1. Install a WordPress Lazy Load Plugin
The easiest way to implement WordPress lazy load is to install a plugin. There are several plugins available that can help you easily implement lazy loading on your WordPress site. Some of the most popular plugins include BJ Lazy Load, Lazy Load for Videos, and WP Rocket.
2. Add Lazy Load Code to Your Theme
If you don’t want to use a plugin, you can also add lazy load code directly to your theme. This requires a bit more technical knowledge, but it can be done. You’ll need to add the following code to your theme’s functions.php file:
function lazyload_images() {
add_filter(‘the_content’, ‘lazyload_images_html’);
}
add_action(‘wp_head’, ‘lazyload_images’);
function lazyload_images_html($content) {
return preg_replace_callback(‘/(<\s*img[^>]+)(src\s*=\s*”[^”]+”)([^>]+>)/i’, ‘lazyload_images_callback’, $content);
}
function lazyload_images_callback($img_match) {
$img_replace = $img_match[1] . ‘src=”data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==” data-src’ . substr($img_match[2], 3) . $img_match[3];
$img_replace .= ‘ onload=”lzld(this)”‘;
return $img_replace;
}
3. Add Lazy Load Code to Your Videos
If you’re using videos on your site, you’ll need to add lazy load code to them as well. This can be done by adding the following code to the video embed code:
4. Add Lazy Load Script to Your Site
Finally, you’ll need to add a lazy load script to your site. This script will detect when an image or video is visible in the viewport and then load it. You can find a variety of scripts online, or you can use the following code:
Once you’ve added the code to your site, you should be able to see the lazy loading effect in action. Your page loading times should improve significantly, and your visitors will appreciate the faster loading times.
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?
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.
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.
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.
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 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 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
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.
