Make Facebook Like Box Faster and Lighter

If you have the Facebook Like box embedded in your website, the good news is that the plugin should have little impact on the performance, or page speed, of your pages. If ou are using some of the older codes you may experience a delay so this post will show you how to make Facebook Like Box Faster and Lighter.

Stoyan Stefanov of the Facebook engineering team shares that the updated Like box is 2-4x faster and is considerably lighter than the previous version. The Facebook Like plugin now loads in 0.5 seconds, as opposed to 2.3 seconds and while the previous version was 245KB in size, it now weighs a mere 46KB. 

[caption id="attachment_296" align="aligncenter" width="930"] Earlier, Facebook Like box made 24 web requests and would load in 2.4 seconds[/caption]

Facebook improved the performance of the plugin by switching to inline CSS styles (as opposed to using external stylesheets) and by squeezing multiple scripts into one – the plugin thus has to make fewer web requests.

[caption id="attachment_297" align="aligncenter" width="930"] Facebook Like box now loads in .7 seconds and makes just 13 requests (for photos)[/caption]

 

How do you get the faster Facebook Like box for your website? First, does the Facebook embed code on your website look anything like this?

XFBML version (old)

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:fan stream="false" name="PAGE_NAME"></fb:fan>

IFRAME version (old):

https://www.facebook.com/plugins/fan.php?connections=10&name=PAGE_NAME

If your embed codes are different, you are covered as Facebook will automatically serve you the improved Like box. Else, you are using the older /deprecated version of the Facebook Like box  so head over to developers.facebook.com and generate the new embed codes.

Currently these are the options you have, I personally use HTML5