Comments are the best way to increase user engagement, but they can also increase the page size which affects the page speed. In order to speed up your website or blog, you need to configure your comment system carefully. In this tutorial, I am going to show you how to lazy load comments in WordPress to increases page speed.
What is Lazy Loading?
When a user visits a web page, the browser downloads the entire web page and displays in a single go. The downloaded data may contain the resources which are not required for the user. These unnecessary resources increase the page size and number of http requests, which negatively affects the page speed of your site.
Page speed is the most important SEO Factor. A recent case study proves that 40% of people leaves a web page that takes more than 3 seconds to load.
This can be overcome by lazy loading technique.
Lazy loading is the technique of loading web page when it is needed rather than loading entire page at once.
That means when you open a web page, the browser downloads and display the content and resource which are actually needed. The remaining resources will be loaded based on user actions such as scrolling the web page or clicking read more buttons. This reduces the size of the web page being downloaded initially so that the page speed increases.
Why Lazy Load WordPress Comments?
Users will see comment section only after scroll down to end of the post, as comment section is at the bottom of the page. So there is no use of loading comments before user scroll to the end of the post.
Lazy loading the WordPress comments reduce the page size and improve the page speed.
How to Lazy Load Native WordPress Comments?
WordPress doesn’t come with inbuilt Lazy Loading Comment Feature. In order to lazy load WordPress Native comments, you need to install the Lazy Load for Comments Plugin.
Working with this plugin is pretty straight forward. You just need to install and activate the plugin and configure the lazy loading options.
The lazy loading options can be found under Discussion Settings in your WordPress admin panel. This plugin comes with 2 lazy comment loading options such as On Scroll and On Click.
- If you chose On Scroll, the comments will start loading when the user reaches the end of the page.
- If you chose On Click, the comment will load only after clicking LOAD COMMENTS button at the end of the page.
- Lazy loading can be disabled by choosing No Lazy Load option from the dropdown.
How to Lazy Load Facebook Comments in WordPress?
If you are using Facebook comment system for WordPress, you need to install the Lazy Facebook Comments plugin.
After installing and activating this plugin, you need to configure lazy loading options by navigating Settings > Lazy FB Comments in your dashboard.
This plugin also comes with 2 lazy comment loading options such as On Scroll and On Click.
How to Lazy Load Disqus Comments in WordPress?
In order to lazy load Disqus Comments in WordPress, you need to install Disqus Conditional Load plugin.
After installing and activating this plugin, you need to configure lazy loading options by DCL Settings on your WordPress dashboard.
This is pure JavaScript based plugin comes with lazy comment loading options such as On Scroll and On Click.
Other features of this plugin are Shortcodes to display comments, Custom post types support etc.
Conclusion
Comments are the beautiful feature to engage users on most of the blogs and website. However Tons of comments in a single page degrades the page speed. You can speedup WordPress website by lazy loading comments.
I hope this article helped you to sped up your site by lazy load comments in WordPress. If you require any further information, let me know through comments.
Hi Divakara,
I would like to say thanks for mentioning some cool comment plugins. In fact, I was looking for one like this and finally found it here. Lazy Facebook Comments, I like this one let’s see how it works for me.
Thanks,
Umesh Singh
Welcome Umesh.
As a Genesis lover, do you know how to get this plugin to function on Genesis?