Google Analytics es un exelente servicio para poder ver el comportamiento de los visitantes de un site. Con solo copiar y pegar algun script podemos saber un muchas de cosas. Pero este servicio no nos dice nada sobre cuan rapido / lento es nuestro sitio para los visitantes, y como ya hemos hablado muchas veces, la velocidad es muy importante.
Entonces, como podemos usar google analytics para poder monitorear la performance real de un sitio?
Escribí un pequeño script que usa la función evenTrack de la API de GA y envia a GA las mediciones de performance. Usando esto, van a poder guardar y analizar de manera muy simple en la misma interfaz web de GA.
Pasos
1) Insertar este script después del la etiqueta <head> :
<script>
var _gameasures = [['start',(new Date()).getTime()]];
function addGAMearsure(mark){
_gameasures.push([mark,((new Date()).getTime()-_gameasures[0][1])]);
}
</script>
2) Insertar este script justo antes de la etiqueta </body>:
<script>addMeasure("Perceived Ready Time");function sendGAMeasures(){addMeasure("load");if(_gaq)for(var a=_gameasures.length,b=encodeURI(window.location);a-- >1;)_gameasures.push(["_trackEvent","Performance",b,_gameasures[a][0],_gameasures[a][1]])}if(typeof window.onload=="function"){var prevOnload=window.onload;window.onload=function(){prevOnload();sendGAMeasures()}};</script>
Opcional
Si quieres puedes agregar tus propias marcas y mediciones de manera Muuuuuuy facil, solo llamando a la funcion: addGAMearsure(’my mark’) Ej:
........
</head>
<body>
<script> addMeasure('Perceived ResponceTime'); </script>
El código completo (críticas y comentarios son bienvenidos):
// mark startTime
var _gameasures = [['start',(new Date()).getTime()]];
//
// Add measure
// @mark string
//
function addMeasure(mark){
_gameasures.push([mark,((new Date()).getTime()-_gameasures[0][1])]);
}
//
// add load event
//
function sendGAMeasures(){
//add final measure
addMeasure('load');
// if _qaq is defined means that google analytics is set ok
if(_gaq){
// set page name
// by default it get the page url, if you want you can change the value of pname
var len = _gameasures.length, pname = encodeURI(window.location);
// send all measures
while(len-- > 1){
_gaq.push(['_trackEvent', 'Performance', pname, _gameasures[len][0], _gameasures[len][1]]);
}
}
}
// set onload event checking if has been set previoully
if (typeof window.onload != 'function') {
_sendGAMeasures;
}else{
var prevOnload = window.onload;
window.onload = function(){
prevOnload();
sendGAMeasures();
};
}
Espero que esto les ayude a monitorear la velocidad de sus sitios. :)
Martin
. Mi snippet final es:
Descargar en paralelo el sprite de css
El nuevo Tip
En la forma normal de cargar el css y el sprite
El navegador empieza a descargar la imagen cuando encuentra una regla de sprite en el css que coincide con un tag del body.
body{ background-image:url(sprite.png); }En este caso el navegador descarga primero el css y luego el sprite, la descarga es 100% secuencial.Descargar Css y sprite en paralelo
setTimeout(function(){var s = document.createElement('image');(document.getElementsByTagName('head')[0]).appendChild(s);Conclusión