Optimizing your website's code and structure is very important for a good user experience and a flawless navigation experience, in this tutorial I will share one of the changes I made to this website to speed up pages load time.
Before this, I was inserting the social buttons and external widgets code directly into the html flow, at first everything seemed to work fine, but sometimes the page took too long to load and looking at the download speed charts on Google webmasters tool or analytics I saw that from time to time the download speed was just awful, sometimes more than 10 seconds.
So I took a look at the page load cycle and timing using the Chrome developer tools and noticed that the onLoad event was delayed significantly by the external javascript files that the social buttons needs to display. The third party JavaScript files loading is badly affecting the page’s performance.
The Solution :
Since my website visitors and users came to my pages to see good content I provide not social buttons or analytics/ads scripts, I have to find a way to serve that first. And when the page loads and fully displayed, the social buttons can take as long as they need to show up.
The solution I found is to dynamically load external javascript files and code after the onLoad event has fired, this can be easily done by using the jQuery.getScript function to load and execute external javascript files. The getScript calls the js files asynchronously by default.
Here's the function I wrote to load the needed files for Facebook, Google+, Twitter, StumbleUpon and pinterrest. Of course the same code can be used for other sources.
function loadSocial() {
// Facebook like button
$('#hfb').append('<div id="fb-root"></div>');
$('#hfb').append('<fb:like send="false" layout="box_count" width="60" show_faces="false"></fb:like>');
jQuery.getScript('//connect.facebook.net/en_US/all.js#xfbml=1', function () {
FB.init({ appId: 'Your facebook application Id', status: true, cookie: true, xfbml: true });
});
// Google Plus button
$('#hgp').append('<g:plusone size="tall"></g:plusone>');
jQuery.getScript('//apis.google.com/js/plusone.js', function () { });
// Twitter button
$('#htw').append('<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>');
jQuery.getScript('//platform.twitter.com/widgets.js', function () { });
// StumbleUpOn badge
$('#hsu').append('<su:badge layout="5"></su:badge>');
jQuery.getScript('//platform.stumbleupon.com/1/widgets.js');
// Pinterrest: we have to supply the current URL and page's description
var curURL = encodeURIComponent(location.protocol + '//' + location.host + location.pathname);
var curDesc = encodeURIComponent(document.title);
// Here we provide a thumbnail to Pinterrest,
// we get the image url from an anchor with a property rel=image_src.
var curImg = encodeURIComponent($('link[rel=image_src]').attr("href"));
$('#hpi').append('<a data-pin-config="above" href="//pinterest.com/pin/create/button/?url=' + curURL + '&media=' + curImg + '&description=' + curDesc + '" data-pin-do="buttonPin" ><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>');
jQuery.getScript('//assets.pinterest.com/js/pinit.js');
}
Notice that the html markup needed for each button in injected to the html document just before calling the correspondent script.
Now we have to call the previous function when the page loading is complete and the page is displayed to the user:
$(window).load(function () {
loadSocial();
});
Also take into consideration that if a script is using global variables, those variables needs to be declared outside the $(window).load function. for example this is the case for Google analytics asynchronous tracking code :
var _gaq = _gaq || [];
$(window).load(function () {
// Load Google Analytics
_gaq.push(['_setAccount', 'YOUR_ANALYTICS_ID']);
_gaq.push(['_trackPageview']);
jQuery.getScript(('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js');
});