This question has been bugging me for a long time, and since I found no discussion of it anywhere, I figured I'd finally start one.
If you go to Facebook's own website (Example: here), and scroll to the bottom of the page, you will see an implementation of the "Like + Share" buttons.
These are the same buttons which you can implement on your own website as well (Facebook Like Button Configurator), with one major difference:
On Facebook's own website the buttons load instantaneously, and by that I mean there is not even a 1 second delay. They render as if they were regular text. It's that fast.
However, it is a completely different story when it comes to rendering these buttons when embedding them on your website. These facebook 'like' elements are always the last to load and are the slowest. For first time visitors it can take up to 20-30 seconds for the facebook elements to render.
The code is implemented to the letter as such:
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<div data-href="https://www.facebook.com/MyFacebookPage/"
data-layout="button_count"
data-action="like"
data-size="large"
data-show-faces="true"
data-share="false">
</div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '123456789',
xfbml : true,
status : true,
cookie : true,
version : 'v2.5'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.async=true;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
I tried adding dns-prefetch headers in the <head> tag for facebook's domains hoping to speed things up, but it doesn't seem to have had much effect.
<head>
<link rel="dns-prefetch" href="//www.facebook.com" />
<link rel="dns-prefetch" href="//staticxx.facebook.com" />
<link rel="dns-prefetch" href="//connect.facebook.net" />
</head>
I tried digging a little deeper, and one difference I noticed from looking at the code used on facebook.com's implementation was that they used the fbml version of the code <fb:like></fb:like>, as opposed to the code that they provide us, the end users, to implement the buttons on our own websites.
I've also noticed that there was no link to "http://connect.facebook.net/en_US/sdk.js", which is the script we are meant to use. This seems to suggest facebook are perhaps using a custom stripped down version of the script specific to their implementation of the 'like buttons' only?
This is just my limited analysis, as I'm an amateur web developer and am no expert in xbml. Hope someone can shed some light on this.
One thing that is for certain: Facebook's own implementation of the "LIKE" buttons is totally different from the one they are instructing us to do, and the speed difference is astronomical.
Can anyone shed some light on this? Ideally, can anyone suggest how to make our implementation of the "like button" code more like that of Facebook's own implementation, so that we can also enjoy the speed benefits?