Deferred lazy loading of Facebook widgets

Posted on August 13, 2011
by

Facebook Like BoxIf you use social widgets on your web pages, you must be aware of the extra kilobytes of data your visitors are going to load for this, and how it’s going to affect the loading time of your pages. It can be difficult to figure the weight of those widgets, but sometimes they’re worth considering them.

You can use Firefox and the plugin YSlow to measure how those social widgets overweight your pages (see total size of the page, loading time, and number of external JS/CSS/image files loaded).

In this post, I will consider the case of the Facebook Like Box, which is a quite fat widget actually (almost 200kB of data amongst 6 external JS scripts, 4 CSS sheets, 2 CSS image sprites and as much images as there are fans of your page) and how I can manage to load it ONLY IF NEEDED.

Defer loading of the widget

First, it’s good to defer the loading of the widget so that it loads when the rest of the page is already loaded (because the page itself should have higher priority on the optional widgets). To do so, we will use jQuery, add this piece of code anywhere on your page:

$(document).ready(function() {
$('#facebookHolder').append('<div id="fb-root"></div>');
$('#facebookHolder').append('<fb:like-box href="http://www.facebook.com/forexagone" 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});
});
});

You also need a place holder somewhere on your page to hold the widget, such as:

<div id="facebookHolder"></div>

Now, the widget will start loading only ONCE the page itself is loaded.

Lazy load the widget

It can happen that your social widget is embedded in a long page and the user needs to scroll to see it on his screen. Then, there is obviously no interest in loading 200 extra kilobytes of data as long as the widget is not in the browser’s viewport (is not visible on the screen). That’s what we call lazy loading: we only load what we need to load. You’ve probably seen this technique on websites such as TechCrunch, that load the images on the page as you are scrolling it down (see the jquery plugin Lazy Load by Mika Tuupola — deprecated though, since it’s not supported anymore for latest browsers). Mika also wrote the Viewport selectors for jQuery that I’m going to use for lazy loading my social widget.

So the idea is to not load the social widget when your page is loading, and if the user ever happens to scroll down enough to make the social widget placeholder to appear in the browser’s viewport, then we eventually load the widget.

Here is the JavaScript you need to load (but well, it’s very likely that you already use jQuery, isn’t it?)

<script src="jquery.js"></script>
<script src="jquery.viewport.js"></script>

Here is the HTML code for the placeholder of your social widget:

<div id="facebookHolder"></div>

And here is the JavaScript code to defer and lazy load the widget:
/**
* check if facebookHolder is in viewport, and then load Like Box widget
*/
$(document).ready(function() {
function checkScrollingForWidget(event) {
$('#facebookHolder:in-viewport').each(function() {
$('#facebookHolder').append('<div id="fb-root"></div>');
$('#facebookHolder').append('<fb:like-box href="http://www.facebook.com/forexagone" 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});
});
 
$(window).unbind('scroll', checkScrollingForWidget);
}
 
$(window).bind('scroll', checkScrollingForWidget);
});

This works well for all the Facebook widgets. You will have to adapt the code to the other social widgets you’re using, but the idea remains the same.

Practical example

In Forexagone.com (website I co-founded), we embed a Facebook Like Box at the bottom of the forum page. It’s a long page, and not everybody is likely to scroll down enough and see the widget on the screen. Therefore, I applied the lazy loading behaviour to the Facebook Like Box widget, and I was very happy  to see that I improved by a factor 2 the loading time of my page, and decreased its total size by 200kB.

Lazy Loading Forexagone

That will save some time and bandwidth. I think Google (and the visitors) will appreciate 🙂

About the author

Cyril Mazur is a serial web entrepreneur with experience in various fields: online dating, forex & finance, blogging, online advertising... who enjoys building things that people like to use.

19 comments