Category : Javascript | Author : Chtiwi Malek | First posted : 1/19/2013 | Updated : 2/5/2013
Tags : tutorial, onload, performance, jquery, social, snippet, js, javascript, seo, html, users
Increase your Site Load Time and Performance

Increase your Site Load Time and Performance

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');
});
About the author :
Malek Chtiwi is the man behind Codicode.com
34 years old full stack developer.
Loves technology; but also likes design, photography and composing music.
Comments & Opinions :
Thanks
great tips and easy to setup, thanks alot.
- by Joe on 1/21/2013
Inspired
I feel really inspired by you. How do I serve my website with my local mySql app and java?
- by Nuh Jibril on 2/11/2013
That's kind of out of the scope of this article is it not? by Brandon
FB not working
FB like button doen not disply on page even its code embeded in div in which I deined id "#hfb". 
Please suggest


- by Riddhi on 7/5/2013
FB not working
FB like button doen not disply on page even its code embeded in div in which I deined id "#hfb". 
Please suggest


- by Riddhi on 7/8/2013
Leave a Comment:
Name :
Email : * will not be shown
Title :
Comment :


» Member access
 
» Latest
» Random/Popular
© Codicode | Content and source © 2013