How to Lazy Load Facebook Comments in WordPress

Are you using Facebook Comments in WordPress instead of native comment system? Do you want to Lazy Load Facebook Comments in WordPress? This post is focused on how to add Lazy Loading in WordPress with Facebook Comment System to increase your website loading speed.

Commenting System in WordPress

Commenting System in WordPress is a wonderful feature to increase your websites user engagement, interaction with your visitors and get their opinion about your post.

WordPress comes preloaded with a native comment system. And now days as social media is on boom and everybody (mostly) uses Facebook and loves commenting on posts. Facebook Comments in WordPress become popular in last 2-3 years.

As I said, comments are helpful to engage your visitor but it also increases your webpage size whether you are using WordPress native comment or Facebook comment system. And websites with large webpage size loads slow.

According to a study, visitors mostly remember the faster loading websites. If you have a faster loading website, the chance of recommending your website by a visitor increases by 70%, which is more than great, Right.

Even search engine like Google and Bing love faster websites, and rank them higher than the slower websites. Before digging into how to add Lazy Loading in Facebook Comment System on WordPress, let’s discuss about Lazy Loading, is it good or bad?

What is Lazy Loading?

Lazy Loading is a functionality which allows a developer to load defined content when it is required.

As it says it does, you can apply Lazy Loading on (mostly) anything on WordPress, and load that content/section when you want to.

So how it can help? For instance, you have a blog post with more than 100 comments, which can be roughly calculated the 10-20% content of your webpage.

If you add Lazy loading to your comment system, your webpage first load the 80% content which is your post. And then load the comment section when user scroll till the defined point to load comments.

This will significantly increase your webpage loading speed. And faster loading websites are always good for SEO.

How to add Lazy Load Facebook Comments in WordPress?

It is quite simple to add Lazy Load Facebook Comments in WordPress. You only need to install a free plugin from WordPress Plugin directory (read our guide on How to Install WordPress Plugin) and follow the given below steps…

Steps to add Lazy Load Facebook Comments in WordPress:

1. Install and activate the Lazy Facebook Comments plugin
2. Go to the Settings > Lazy FB Comments page to configure the setting,
3. Enter you Facebook App ID, set the Comment Box Width and number of comments you want to show,
4. Select the Comments Lazy Loading from options On Click or On Scroll
5. And if you have selected the On click comment loading, Enter the Button Text
6. Hit on the Save All Changes button in the bottom of the page, and you are done.

If you are using a Facebook Like Box or Facebook Like Button, choose ‘Already Loaded’ in the Facebook SDK option.

If you have selected On Scroll to load comments, comments will load when a user will scroll till the comment section.

And if you have selected On Click option to Load Facebook comments, it will display a button instead of comment section. One has to click on the button to display comments as shown in the picture below.

Clear all the cache is you are using any WordPress Cache Plugin, Refresh your website again and check any of your post where you have activated the Facebook comments. Facebook Comment System will load lazy and will replace WordPress Native comment system.

If you are still using WordPress Native comment system and wanted to Lazy Load WordPress Comment. I have covered that too in my post Lazy Load WordPress Comment. You can also read my post how to Lazy Load Discuss Comments in WordPress.

Hope you find this post useful, do you use Facebook comment system in WordPress, is it helpful?  Do let me know in the comments section below.

You may also like to read

How to Cache Gravatar Images in WordPress for WP Optimization
Leverage Browser Caching in WordPress via .htaccess