Lazy Load Facebook Comment to Speed Up your website

Lazy Load Facebook Comment

Many WordPress bloggers prefer to use a third comment plugins instead of default WordPress comment system no matter they are pissed of spam comments or just feel cool.
I’ll take the Facebook Comment widget as an example to show how to load the scripts only after user clicking the button. By defer loading the scripts, your site can have a performance improvement to a certain extent.

Default Embed Code

Below is the official embed code you can use on your site. The first part is the JavaScript SDK and then the HTML elements.

JavaScript SDK

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v2.7";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

HTML elements

<div class="fb-comments" data-href="{{URL_TO_COMMENT}}" data-numposts="5"></div>

Lazy Load Javascript SDK

The official embed codes will load immediately whenever the page is loaded. I’ll create a function to (lazy) load the JavaScript on command.

// Lazy Load Facebook SDK

function loadFacebookAPI(callback) {
	var js = document.createElement('script');

	js.src = "//connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v2.7";
	document.body.appendChild(js);

	js.onload = callback();
}

HTML elements modification

Then I’ll do small modification on the original HTML tags by adding a parent wrapper #fb-comments and a click button #comments-button.

<div id="fb-comments">
    <button id="comments-button" class="comments-button"><?php _e( 'Show Comments', 'plol' );?></button>		
    <div id="fb-root"></div>
    <div class="fb-comments" data-href="{{URL_TO_COMMENT}}" data-numposts="5"></div>
</div>

Load the Javascript SDK on click

You can fire the loadFacebookAPI once the comments box come into view, but here for tutorial purpose, I’ll fire it after user click the button.

document.getElementById('comments-button').addEventListener('click', function() {
	var fb_wrap = document.getElementById('fb-comments');

	if (typeof(fb_wrap) == 'undefined' || fb_wrap == null) {
		return;
	}

	if (fb_wrap.classList.contains('loaded')) {
		return; // If Facebook JS already loaded, do nothing
	}

	loadFacebookAPI(function() {
		console.log('js loaded.');
		fb_wrap.className = "loaded";
	});
});

Whenever a user clicks the button, loadFacebookAPI function is triggered and Facebook SDK will be loaded and add a class loaded to the wrapper.

With the same method, you can lazy load any external js file.

Related Reading:
https://www.h3xed.com/web-development/how-to-lazy-load-the-facebook-comments-plugin-using-javascript

Save

Author: Leo

My name is Leo who's behind this blog. I've been working with wordpress since 2010. I'll write about themes, plugins, tutorials and all about wordpress here. Hope you find it useful!

Leave a Reply

Your email address will not be published. Required fields are marked *