Al fin nuestro navegador no se va a enganchar cargando el código JavaScript.
El sistema hará que las webs funcionen más rápido:
El mayor problema de cargar archivos JavaScript es que bloquea el renderizado de la página web y la descarga de otros recursos. En el nuevo modelo asíncrono de Google Analytics, se utiliza el elemento Script del DOM.
Google Analytics, con su archivo ga.js, es un ejemplo perfecto de un script que debiera cargarse de forma asíncrona, ya que no añade contenido alguno a la página, con lo cual, sería ideal cargarlo sin bloquear las imágenes y hojas de estilo que harán que los usuarios vean lo que realmente han venido a ver: nuestra página web.
Se ha mejorado la estabilidad:
¿Qué pasa si un script tarda mucho tiempo en cargarse, o falla su carga? El usuario se encuentra ante una página en blanco, ya que los scripts bloquean el renderizado de la web. Aunque Google Analytics tiene una infraestructura muy grande tras él, cualquier recurso, sobre todo de terceros, tiene que añadirse con cautela. Es una gran noticia que GA está proporcionando patrones que permite el renderizado de las webs mientras se carga ga.js.
¿Qué hay que hacer para incluir ga.js en modo asíncrono? cambia tu script para que sea de la forma siguiente:
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
ga.setAttribute('async', 'true');
document.documentElement.firstChild.appendChild(ga);
})();
- Lógicamente, tienes que sustituir "UA-XXXXX-X" por tu ID.
- Al cargarse ga.js de forma asíncrona, tiene que existir una forma para que algunas funciones de GA se puedan utilizar cuando el código se termina de cargar. Esto se hace introduciendo comandos en la cola del objeto de Google Analytics, _gaq.
- Una vez que todos los comandos callback se han puesto en cola, se carga el script ga.js. Esto se empaqueta en una función asíncrona para así evitar conflictos de namespace.
- Se crea un elemento "script" y su fuente "src" se pone al valor correcto de la URL de ga.js. Mirando más alla, en el soporte que se incluye en HTML5 a los scripts asíncronos, el atributo "async" se pone a "true", muy bueno! La ventaja más importante es que le dice al navegador que los siguientes scripts se pueden ejecutar de forma inmediata (no tienen que esperar a que se carge ga.js). La última línea añade el elemento script al DOM. Esto es lo que ejecuta la descarga de ga.js. En muchos códigos se hace document.getElementsByTagName(”head”)[0].appendChild, pero esto falla si el documento no tiene elemento head. Esta forma de hacerlo, es más robusta.
Comentarios