Lazy Load Facebook Like Box To Speed up Page Loading

Facebook like box always downloads extra data when the user visit each time your site which causes page loading time slow. Learn how to defer the loading of Facebook like box by lazy load script for making page speed much faster.

Lazy Load Facebook Like Box To Speed up Page Loading

In the category of Facebook, last time we have seen how to see locked profile picture hack, and today we are going to focus on page loading. We are going to use better technique by lazy load script to defer loading of any widget. You can ignore the data downloaded by these widget but you need to concentrate its loading-time because it directly affect to your site loading-time.

Defer lazy loading of Facebook widget

For better page performance this is an essential tip and as the page content is more important than widgets, it is much better to make a delay loading of these widgets so that it will load only when the whole page gets loaded.

Lazy Load Facebook Like Box

Add following code in your HTML widget. You just need to replace blue coloured text as per your content.

<!-- lazy loading of Facebook widget -->
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    $('#fbHolder').append('<div id="fb-root"></div>');
    $('#fbHolder').append('<fb:like-box href="http://www.facebook.com/ID" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
    jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
        FB.init({status: true, cookie: true, xfbml: true});
    });
});
//]]>
</script>
<!-- lazy loading of Facebook widget -->
<div id="fbHolder">
<!-- put here your old Facebook widget box code -->
</div>

Demo is working here on this site, or you can check its performance on Page Speed and Yslow, significantly you will see the changes in report.