No one likes a slow website and to wait for loading your content. Statistics show that visitors tend to leave a website if it takes more than 2-3 seconds to load a site. Speed is critical, especially when it comes to great user-experience and Search Engine Optimisation (SEO).
Images in the content constitute a significant portion of web content and take the most time to load, resulting in slow page load times. That is why optimizing your images and media contents are very crucial. Compressing the images is the first step but it is not sufficient. The images used on your posts increase the total file size of your site and will affect your site performance.
The users visiting your site have to wait for all the files to download, including the images, videos or comments that aren't initially visible, before viewing the web page. This creates a bad user experience and visitors tend to leave your site.
So what is the solution to tackle such a scenario to keep impatient visitors on your site from leaving your site before your content has fully loaded?
The simple solution is lazy loading. With lazy loading, you can load images and videos only when a user scrolls down to that specific image or video.
In this post, we'll cover what is lazy loading & how it works, benefits of lazy loading images in WordPress and steps to easily implement lazy load images in WordPress to speed up your site.
- 1 What is lazy loading and how it works?
- 2 Benefits of Lazy Loading Images in WordPress
- 3 How to lazy load WordPress Images and Videos?
- 4 Plugins to Use for Lazy Load Images and Videos in WordPress
- 5 How to lazy load WordPress comments?
- 6 Final Thoughts
What is lazy loading and how it works?
Lazy loading is an optimization technique to load images & videos on your website asynchronously. In simple words, loading images and other content on your web page at different times.
Lazy loading works by loading the specific resources (images, videos, etc) when the user scrolls down to that particular resource. It delays the loading of other elements until the user starts scrolling down the page.
As a result, the resources are not downloaded until they are needed.
Benefits of Lazy Loading Images in WordPress
Lazy loading seems interesting but this question might come to your mind, why should I use it?
The answer is simple. It improves your page speed and loads your webpage faster.
Let me explain how lazy loading improves your site performance.
Images and videos have become an integral part of the web's content. These resources take the most time to load on your website. The biggest drawback they bring is – each element increases your page load time.
Lazy loading images and videos is a one-stop solution to lower initial web page load time without affecting the text content. Lazy loading kicks in when a visitor reaches your images s they scroll down your web page. So, if they never reach the images or videos, they don't need to load them. This saves a lot of users bandwidth because they don't have to download all your images or videos.
Thus, lazy loading optimized images and videos, improve your site load speed drastically. As Google recommends the site to load within 2-3 seconds, lazy loading will have great impact on your Search Engine Optimization and ranking. In addition, it creates a better user experience for your visitors.
How to lazy load WordPress Images and Videos?
In most of the premium WordPress themes, the theme author includes this feature. But if you are using a free theme or theme that you are using doesn't include lazy load features, the simplest way to lazy load WordPress images and videos is to use a plugin.
There are many free WordPress plugins available in the WordPress repository to Lazy Load images. Here are few notable lazy load WordPress plugins that offer a wide range of features and flexibility.
If you are not sure how to install a WordPress plugin, you can refer to this step by step guide on How to install WordPress Plugins Easily?
Plugins to Use for Lazy Load Images and Videos in WordPress
#1. Lazy Load Optimizer
Lazy Load Optimizer is a popular free plugin which can lazy load images and iframes to improve your site page speed. The plugin uses lazysizes, a popular high performance, and SEO friendly lazy loader, to lazy load images on images of posts, pages, categories, tags, widgets, custom post types, etc.
The WooCommerce compatibility makes it popular choice if you own an eCommerce store. It can lazy load product and product category images. In addition to this, it improves Google PageSpeed Insights results by fixing the error “defer offscreen images“.
Did I forgot to mention, it is extremely lightweight and fast?
As soon as you install and activate the plugin, it implements the lazy load for images and iframes with default settings. You can tweak the default settings and configure the plugin as per your needs.
You can access the settings from Dashboard > Settings > Lazy Load Optimizer. The General tab includes the basic settings for this plugin whereas, within the Exceptions settings tab, you can exclude any sections from lazy loading by adding CSS classes or web page URI or selecting different post types.
Within Customizer Lazy Loading Settings ( via Dashboard > Appearance > Customize > Lazy Load Settings ), you can enable/disable spinner, add animation time and enable/disable Fade-in animation.
#2. Lazy Load by WP Rocket
Lazy Load by WP Rocket is another alternative plugin to lazy load images and iframes. The plugin works on all kinds of images in post content and thumbnails including widget text, avatar, smilies, and iframes.
The plugin is simple to configure. You can configure the settings within the plugin from Dashboard > Settings > Lazy Load.
#3. a3 Lazy Load
a3 Lazy Load is the most popular and downloaded lazy load WordPress plugin with over 100k+ active installation. This plugin claims to work best in spite of heavy content on your site with better performance.
Unlike other plugins, this plugin is packed with tons of advance lazy load features and offers great extent of flexibility.
You can customize the settings for this plugin under Dashboard > Settings > a3 Lazy Load.
Within the settings, you can enable lazy load of images in specific sections such as images in content, widgets, post thumbnails, Gravatars and even skip some images by defining CSS classes.
This plugin is not just limited to images lazy loading. It also supports lazy loading for videos and iframes.
The plugin also offers the flexibility to exclude by URIs and different page types.
Last but not least, the plugin provides the flexibility to optimize the script, spinner loading effect, loading background color and field to define the image load threshold.
Smush is the most popular image compression and optimization WordPress plugin with 1+ million active installations and 5-star rating. We have been using this plugin to optimize the images. You can configure the setting from your Dashboard > Smush > Settings.
In addition to image optimization, the plugin also includes a feature to lazy load different media types such as JPEG, PNG, GIF, and SVG. The lazy load feature works across all images and the plugin provides an additional feature to select the output location. Within the plugin, you can lazy load images on content, widgets, post thumbnails, and Gravatar.
You can also choose an animation type and set the animation duration.
If you don't want lazy loading on specific posts type, you can turn them off or add their URLs. You can also define Classes & IDs if you just want to exclude specific images.
Once you have applied the changes and visit your site, your site will start lazy loading your images and videos.
In addition to lazy load WordPress images and videos, you can also lazy load comments to speed up your site. Comments section sits below the post content at the bottom and it is not necessary to load them initially. Lazy loading comments can eliminate page size and external HTTP requests (in case you are using third-party comment plugin like Facebook or Disqus) and speed up your web page loading speed.
How to lazy load WordPress comments?
Lazy Loading WordPress comments is quite easy as the above process with plugins. You have to choose the plugin depending on what type of comments you're using on your site.
There are different plugins available for lazy loading WordPress comments, Disqus comments, and Facebook comments.
Thankfully, the developer Joel James has created three different plugins that you can use depending on the comments you are using.
- If you're using the default WordPress comments section, you need Lazy Load for Comments plugin.
- If you're using Facebook comments, you can install Lazy FB Comments plugin.
- If you're using Disqus comments, you need to install Disqus Conditional Load plugin.
The process to configure is simple and shares the common interface as it is developed by the same developer. Here I'll show you how to configure Lazy Load for Comments plugin.
Once you install and activate Lazy Load for Comments plugin, go to Settings > Discussion and scroll down till you see Lazy Load Comments option.
Now, you can configure how you want your comments to load on your site.
- On Scroll: The comments will lazy load automatically when the user scrolls down to the comment section. It doesn't require any manual action from the user.
- On Click: If you select this option, your comments will only load after the user clicks on the “Load Comments” button. It requires manual action to see the comments.
Choose the option you prefer and save the settings. Now your comments will lazy load. Here's a preview of how it looks if you select the On Click option:
I hope you understand what is lazy loading, how it works and the major benefits of using on your site. Lazy Loading technique is used by most of the web content created to speed up their site load time and enhance user experience.
Using the plugin, lazy load WordPress images, videos, and comments is the simplest approach. With plenty of free plugins available to achieve this, you can go with anyone of the plugins mentioned above.
So, are you using lazy loading on your site? Do let us know in the comments section.