La evolucion de ga.js y el mejor script de Google Analytics

(The english version)

Hay un muchos articulos que hablan sobre el problema de bloqueo del browser cuando carga archivos externos de js.  En resumen:  cuando el browser encuentra <script src=…, este bloquea el dibujado de la pagina, hasta que el archivo js es descargado y ejecutado.

Steve Souder presento un completo analisis sobre varias tecnicas para resolver este problema. De las cuales, actualmente yo estoy usando esta:

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

Pero encontre hace un tiempo que es mejor reemplazar el la sentencia de closure por un llamado a setTimeout, con parametro 0 milis. El setTimeout tiene un efecto exelente en IE. Descubri ese truco mirando el source de la home de google.com .  Mi snippet final es:

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

El widget de terceros mas usado en internet debe ser el script para el tracker de  Google Analytics, y hace unos meses google anuncio una mejora sobre el script que evitaba el bloqueo. Los cambios principales son: 1) mover el script al head, y 2) cambiar el codigo js por este:

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

El analisis completo aca.

Encontre varios articulos analizando ese cambio, por ejemplo Mathias quien hizo algunas mejoras

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'));

Otro articulo interesante lo hizo  HTTPWatch team, ellos concluyeron que el nuevo script no es mas rapido que el anterior. Pero yo creo que ellos cometieron el error de no realizar las pruebas en un ambiente mas real. Sino que probaron una sola pagina en ambientes ideales.

Sobre el script de Mathias yo hice el cambio del closure por el setTimeout. Mi script final es:

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

Otra buena idea que encontre es llamar el script de carga despues del evento onload, usando window.onload = function()…  pero esta idea tiene un gran problema y es que podes perder un gran porcentaje de tracks si los usuarios dejan la pagina muy rapido.  Pero es la manera mas rapida de cargar el script.  Asi que si no te importa perder algunos tracks de la pagina, este es el mejor metodo.

El script:

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

El complete analysis