After Google’s Mobilegeddon algorithm update, the page load time has become a crucial factor for SERP (Search Engine Result Page) ranking. Faster website loading speed is important for higher search engine rankings as well as considered a crucial factor in offering a rich website experience to your visitors.
To improve the loading speed of your website, you can optimize website images, use WordPress caching plugins to enable caching, enable GZIP compression, minify CSS, JavaScript, and HTML files.
Even the most content-heavy WordPress websites lazy load images and comments for improving the website performance. Lazy loading is yet another method that helps reduce the load time to a further extent.
What is Lazy Loading?
Lazy loading is the process of delaying the loading of specific components of the website till they are needed. This helps in improving the website performance and additionally saves the server resources.
For instance, if lazy loading is applied to the comment section, the comment section will be loaded only when the user starts scrolling and reach the bottom of the post.
Why You Should Lazy Load Images and Comments in WordPress?
Lazy loading the elements of your website will be speeding up the time taken for the initial page loading.
According to Akamai images on a web page account for about 63% of the total size. One thing you need to need to note here is that:
With lazy loading, you are not reducing the size of the image but you are delaying the need to load the website’s image.
Similar is the case with the comments section. If you delay the loading of the WordPress comments, you can reduce the page size and the external HTTP requests. This is useful especially while using a third-party comment plugin like Disqus, you can receive a lot of HTTP requests which can gradually slow the WordPress website.
Additionally, this technique can help you minimize bandwidth usage which is beneficial to both users and you.
Let’s find out how delaying loading of images saves bandwidth:
Assume that you have a page on your website that consumes more bandwidth. Now, if lazy loading is applied to the image on that page and if the user didn’t reach that particular section, as a result, some bandwidth.
How to Lazy Load Images in WordPress
The simplest method to lazy load images in WordPress is using the Lazy Load plugin.
The first step is to install and activate the WordPress plugin. It will automatically start lazy load images.
This is a lightweight plugin and has a drawback i.e: you cannot customize how to lazy load images.
To customize your lazy loading setup, we recommend the BJ Lazy Load plugin.
Let’s see how to lazy load images with the BJ Lazy Load plugin.
The first and foremost step is to install and enable the BJ Lazy Load plugin.
This WordPress plugin offers you the capability to:
- Lazy load Images
- Lazy load Thumbnails
- Lazy load Gravtars
- Lazy load iFrames
- Lazy load Text widgets
If you want to configure this plugin, navigate to the settings the BJ Lazy Load:
This plugin allows lazy loading for some specific kind of website elements. By default, the plugin lazy loads all the elements of the website. To turn off the lazy loading, check the No box.
Now, let’s see other options in the plugin:
- Skip images with classes: This option allows adding CSS class to specific images and the force them to load normally. However, this is an advanced setting and should be avoided if you don’t have knowledge about CSS.
- Placeholder Image URL: Option to add placeholder image. Add the url of the image.
- Threshold: This option allows you how sooner to load images. By default its value is set to 200px of image, you can change its value.
- Use low-res preview image: When you enable this option, a low-resolution preview image will be added instead of a full resolution image. The full resolution images will appear as and when the images get loaded.
Finally, save the changes to apply lazy load images.
How to Lazy Load Comments in WordPress
Even lazy loading WordPress comments is simpler with existing plugins.
Use Lazy Load for Comments, if you are using the default WordPress comment.
Moreover, the Disqus Conditional Load plugin for Disqus comments and for lazy load Facebook comments, you can use the Lazy Facebook Comments.
The method is the same for all plugins but we are showing the method for the default WordPress comments.
Once the Lazy Load for Comments plugin is installed and activated, navigate to the Settings then Discussion to configure it. Scroll down to find the Lazy Load Comments option:
Configure how you need to load the comment section
- On Scroll: If you have enabled this option, the comment section as and when the user scrolls down.
- On Click: Lazy Load comments button that allows users to load it on the click.
If you are entirely new to WP or are planning to start with WordPress, you should check out our blog on Easy Steps to Build a WordPress Website.
Additionally, you can look for Managed WordPress Hosting for lightning-fast speed with High-speed SSD, 99.9% uptime & 24/7 managed live support.