The evolution of ga.js and The best google analytics snippet.

(Version en español)

A lot of posts show the blocking problem loading normal javascript files.  To sumarize:  when the browser finds <script src=…, it blocks executing and rendering until js file are downloaded and executed.

Steve Souder presented a complete analysis about the techniques to solve this issue for web performance. I’m using this to load async js files on sonico.com:

(function(d){
   s = d.createElement('script');
   s.src =  'file.js';
   s.type = 'text/javascript';
   (d.getElementsByTagName('head')[0]).appendChild(s);
})(document);

But, I figure out that is better to replace the closure statement by setTimeout funcion and set 0 milisecs. The setTimeout function has a nice performance over IE.  I discovered this trick while watching google.com home page source . So, my snippet is:

setTimeout(function(){
   s = document.createElement('script');
   s.src =  'file.js';
   s.type = 'text/javascript';
  (document.getElementsByTagName('head')[0]).appendChild(s);
},0);

The most common 3rd party widget is Google Analytics script, and some time ago google announced a new script improving the loading method. The main changes were: 1) move the script to the end of head tag 2) change the js code like this:

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www')   '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();

demo: http://tips.freedev.com.ar/demos/ga/normal_async.html

You can see the complete analysis here.

I found a few articles analysing this snippet, for example Mathias that makes some improvements

var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
(function(d, t) {
   var g = d.createElement(t),
   s = d.getElementsByTagName(t)[0];
   g.async = true;
   g.src = '//www.google-analytics.com/ga.js';
   s.parentNode.insertBefore(g, s);
}(document, 'script'));

Another interesting article was writed by HTTPWatch team, they concluded that the new script is not faster than the previous one. But, I think this might be due the fact that they are not testing on a real environment.

I took the Mathias script and change the closure by the setTimeout. My final script is:

var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
setTimeout(function() {
   var g = document.createElement('script'),
   s = document.getElementsByTagName('script')[0];
   g.async = true;
   g.src = '//www.google-analytics.com/ga.js';
   s.parentNode.insertBefore(g, s);
},0);

demo: http://tips.freedev.com.ar/demos/ga/timer_async.html

The complete analysis

Another good idea I found is load the script after onload event, using window.onload = function()…  but this idea has the big problem that you can lose tracks if the user goes to other page before the tracker do the mark. So, if you don’t care to lose a few hits, the best is the onload method.

The script:

demo: http://tips.freedev.com.ar/demos/ga/onload_async.html

the complete analysis