Lazy loading is a technique used in websites to delay the loading of some of the elements of the web page. In this article, I will explain the lazy loading in WordPress feature and how lazy loading of images can speed up page load times.
You will see this feature whenever you use Google Photos or any Photo website or app.
If you open Google photos on the web or the app, it will load the most recent photos at the start.
When you scroll down, photos load as they come into the screen viewport. This delayed loading of images is called lazy loading.
What is Lazy Loading in WordPress?
With the visual medium on the web on the rise – Images, videos, and illustrations are now the norm. Unfortunately, media elements take longer to load due to size. The more images and videos on your web page, the longer the page will take to load.
The word “lazy” refers to delaying an activity till it is needed. Lazy loading delays the loading of an image till the user scrolls to it.
The concept here is simple.
Why load all the images when you don’t need to? More images mean more bandwidth and longer processing and page load time.
With lazy loading enabled, the website will load only the images in the browser viewport. The browser will defer the loading of offscreen images till later.
So, the initial page payload will be less, and the page will load faster and allow quicker interaction. This leads to a much better experience for the user.
A fast-loading website also means better core web vitals. This helps your site rank higher in search results.
How to Enable Lazy Loading In WordPress?
Lazy load can be implemented in many ways on a WordPress installation. You can implement it by:
- Adding Lazy load attributes to images
- Using an Image Optimization plugin with a lazy load feature
- Using a standalone lazy load plugin like Lazy Load by WP Rocket
- Using a Caching plugin with a lazy load feature
Add Lazy Load Attribute to Images
The latest version of browsers comes with built-in native lazy loading capabilities. Almost all Chromium-based browsers support lazy loading images by default. Firefox supports lazy loading for images.
With native loading at the browser end, there is no need for JavaScript or external code. All you need to do is add the lazy loading attribute loading=”lazy” to your images. The browser will use the attribute at run time for adding lazy loading images by default. In other words, you will be lazy loading WordPress without a plugin.
The HTML Script with a lazy loading attribute added to an image or an iframe will look like this:
<img src="sampleimage.jpg" loading="lazy" alt="Sample" />
<iframe src="sample.html" loading="lazy"></iframe>
If you do not want to lazy load, you can also specify alternate values for this HTML attribute:
- eager – load the images as soon as the page loads, even if it is offscreen or below the fold (opposite of lazy, in short)
- auto – this leaves it to the browser to decide whether to lazy load or eager load images
WordPress 5.5 version implements lazy loading for images by default. This only works for images with the img and iframe tags. This is not enabled for background images.
Use Lazy Load Plugin by WP Rocket
One of the easier ways to put in place lazy loading in WordPress for images is to use a plugin. The Lazy load plugin from WP Rocket does just that.
The plugin is free, and you can install it directly via the WordPress plugin directory in the Admin panel.
After you install and activate the plugin, go to the settings panel for the plugin and select the media to lazy load. You also have the option to lazy load videos, which is very useful if you have many videos on your site.
Once active, the plugin will do the lazy loading work for all images and videos on web pages across your site.
Alternatively, you can check out the Optimole plugin, which also delivers the lazy load functionality. For lazy-loading videos, try the Lazy Load for Videos plugin.
Using a Caching Plugin with the Lazy Load Feature
The WP Rocket plugin is a full-featured plugin, including lazy load. This plugin offers a whole host of caching and speed optimization features.
This can increase the speed of your website significantly. The WP Rocket Plugin has the following features:
- Minifying JavaScript and CSS
- Eliminate Render blocking CSS/JS
- Preloading of Cache files and fonts
- Lazy loading of images and delivery of WebP images, if available
- Integrations with CDN
- Clean up and Optimize the Database
- Control WordPress Heartbeat API
You can read our detailed review of the WP Rocket plugin if you want to do more than lazy load.
Use an Image Optimization Plugin with the Lazy Load Feature
If your website has many images, then an image optimization plugin is necessary. Images tend to be heavy and are usually the biggest component of a web page when it comes to size.
You can easily optimize images by using an Image Optimization plugin like Smush. The Smush plugin helps you compress, optimize, and resize your images. Lazy load is an add-on feature available with the free Smush plugin.
After you install and activate the plugin, go to the settings panel to enable/ disable lazy loading. The settings for Smush are a bit more complex than most plugins, but it gives you complete control.
Frequently Asked Questions (FAQs)
Does WordPress lazy load by default?
From WordPress 5.5, the lazy load feature is available by default in WordPress and will work on any images with dimension attributes,i.e. width and height. If an image is not lazy loading, check if the dimensions have been specified. If not, update the img tag with the width and height attributes. The dimensions are needed to prevent layout shifts. Layout shifts will result in poor CLS scores in your Core Web Vitals.
How do I disable lazy loading in WordPress?
You can disable the default WordPress lazy loading by adding a piece of code in your functions.php file.
You can follow these detailed instructions to disable lazy load in WordPress.
Please note you will be modifying an important WordPress file, so exercise due care while making the change.
If you are using a plugin like WP Rocket, you have the option of disabling lazy load on specific pages and posts. You just have to uncheck “Lazy load for images” in the WP Rocket Options on the page or post sidebar.
You can also disable the lazy loading feature using a plugin like Disable Lazy Load.
Conclusion
Lazy load as a feature is a necessity for any website that has a good number of images. I would guess this would be most websites nowadays.
How you implement it on your WordPress website is a matter of choice, depending on your specific need.
If you don’t have too many images, then you can live without it.
Otherwise, go for one of the options listed above. Using a caching plugin or image optimization plugin is probably the easiest solution for implementing lazy loading in WordPress to improve your site’s performance.
If you are looking for more ways to improve website speed, read our in-depth article on how to speed up a WordPress website.
If you have used an alternative method that has worked better, please let us know in the comments section.
