How-To: Optimize Social Plugin Performance
Millions of websites use XFBML to render social plugins. We wanted to share some best practices that can improve the performance of these on your websites. Specifically, we offer custom channelUrl and asynchronous loading which, when used, will improve load times and reduce other issues such as double-counting of referral traffic from Facebook.
The custom channel URL is an optional parameter in the FB.init function called channelUrl. When you initialize the JavaScript library, add the channelUrl parameter in the FB.init function:
<div id="fb-root"></div>
<script src="//connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR APP ID',
status: true, // check login status
cookie: true, // enable cookies to allow server to access session,
xfbml: true, // enable XFBML and social plugins
oauth: true, // enable OAuth 2.0
channelUrl: 'http://www.yourdomain.com/channel.html' //custom channel
});
</script>
The channelUrl points to a file that you add to your local directory which helps improve communication speed in some older browsers. Without the channelUrl, we are forced to use workarounds such as loading a second copy of the webpage in a hidden iframe to properly load social plugins. The workarounds increase load times and inflate referral traffic from Facebook.
To create a channel.html file, add the following line to the file (located at http://www.yourdomain.com/channel.html):
<script src="//connect.facebook.net/en_US/all.js"></script>
If you have the ability to run PHP, we strongly advise setting a long cache for the channelUrl file to ensure optimal performance. Here is a sample PHP script that accomplishes this:
<?php
$cache_expire = 60*60*24*365;
header("Pragma: public");
header("Cache-Control: maxage=".$cache_expire);
header('Expires: '.gmdate('D, d M Y H:i:s', time()+$cache_expire).' GMT');
?>
<script src="//connect.facebook.net/en_US/all.js"></script>
In this case, you should also set the channelUrl file to the fully qualified URL such as http://www.yourdomain.com/channel.php.
In our testing, adding a custom channelUrl improves the performance in Internet Explorer and therefore its inclusion is advised for all of our developers. Internet Explorer yields statistically significant performance gains when including the parameter, where the load time of a test website with 5 XFBML plugins improves from 1.10 seconds to 0.43 seconds.
Asynchronous loading is another simple tactic that allows your page to load quickly without blocking the loading of other elements of your page. Upon successful loading of the JS SDK, we call the window.fbAsyncInit function. All front-end functions that depend on Facebook API calls should be separated and called via window.fbAsyncInit. This ensures that the Facebook features are loaded in a non-blocking fashion and will speed up its rendering, which has positive SEO benefits. When designing your social features, you should approach it with this mentality to start.
For example:
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<body>
<div id="fb-root"></div>
<script>
/* All Facebook functions should be included
in this function, or at least initiated from here */
window.fbAsyncInit = function() {
FB.init({appId: 'your app id',
status: true,
cookie: true,
xfbml: true});
FB.api('/me', function(response) {
console.log(response.name);
});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
<html>
We’ve updated our documentation to reflect the importance of these options and changed the default sample code to include a channelUrl. We are continuing to update our docs as part of Operation Developer Love as well as share more best practices via “How-To” blog posts. Check out the rest of the collection here.
Introducing New Getting Started Guide and App Review Design
Notifying our Developer Ecosystem about a Photo API Bug
