Estás en... Home > Otras cosas > Medir el tiempo de respuesta de tu sitio web con boomerang

Tiempo de respuesta según el servidor

Medir el tiempo de respuesta de un sitio web nos puede aportar información importante para mejorar la satisfacción de nuestros visitantes. Cuanto más tarda una página en cargar, más probable es que el visitante abandona. La forma más fácil para medir el tiempo de respuesta son programas que analizan los logs de nuestro servidor. El log de un servidor web nos da el tiempo que ha tardado en enviar la respuesta a una petición al navegador del visitante.

Este tiempo es un dato interesante para mejorar el rendimiento de nuestro servidor pero sólo con estos logs es imposible saber cuanto tiempo el visitante ha tenido que esperar hasta que la página estuviera en un estado funcional. Con el tiempo de los logs sabemos cuanto tiempo tardó el servidor en enviar el HTML al navegador, pero desconocemos el tiempo para parsear el HTML, cargar todos los estilos, javascripts e imágenes y ejecutar los javascripts del head de la página. Sólo cuando el navegador haya completado todo esto podemos estar seguros de que el visitante puede usar la página.

Medir el tiempo percibido por el usuario

Como el tiempo para tener la página en un estado utilizable depende de gran parte del navegador del visitante tenemos que usar Javascript para medirlo. El equipo de Exceptional Performance de Yahoo (también autor de YSlow) acaba de publicar la librería boomerang para medir el rendimiento de nuestro sitio web como lo percibe el visitante.

Boomerang mide los tiempos de carga de la siguiente manera:

1. Al salir de una página web (por ejemplo pinchando en un enlace) boomerang guarda la dirección actual y la hora (tiempo1) en un cookie.
2. Si en la página a donde ha navegado el usuario también hemos cargado la librería de boomerang, se mide la hora (tiempo2) al recibir el evento onLoad. Este evento se lanza cuando todos los objetos del documento están en el DOM y todas las imágenes se han cargado.
3. Entonces boomerang compara el 'Referer' de la página actual con la dirección guardada en el paso 1. Si no coinciden es probable que el usuario ha visitado otra página y tenemos que descartar el tiempo medido. Si las dos direcciones coinciden, podemos calcular el tiempo percibido por el usuario simplemente calculando tiempo2 - tiempo1.
4. Según la configuración de boomerang, envía este tiempo calculado a nuestro servidor o ejecuta una función de javascript nuestra pasando el tiempo como parametro.

Integrar boomerang en tu sitio web

Podemos descargar boomerang en http://github.com/yahoo/boomerang/archives/master. Descomprimimos el archivo y subimos el archivo boomerang.js a nuestro servidor. Entonces insertamos el siguiente código en las páginas para las que queremos medir los tiempos de respuesta.

<script src="boomerang.js" type="text/javascript"></script>
<script type="text/javascript">
// Con el siguiente código mostramos el tiempo de respuesta en la misma página en el elemento con ID 'resultados'.
BOOMR.subscribe('before_beacon', function(o) {
  var html = "", t_name, t_other, others = [];
  if(o.t_done) { html += "Esta página ha tardado " + o.t_done + " ms en cargar<br>"; }
   
  var r = document.getElementById('resultados');
  r.innerHTML = html;
});
      
BOOMR.init({
  BW: { enabled: false }
});
</script>

El código de arriba primero carga la librería boomerang. Luego, utilizando la función BOOMR.subscribe definimos una función a la que boomerang llamará después de calcular el tiempo de respuesta. Esta función recibe un objeto como parametro. En el atributo t_done de este objeto encontramos el tiempo de respuesta en mili-segundos. Al final del código de arriba simplemente configuramos boomerang. La linea de BW: { enabled: false } desactiva una extensión de boomerang para medir el ancho de banda del usuario. 

Si hemos insertado correctamente el código de arriba en nuestras páginas (no olvidéis de crear un elemento vacío con ID 'resultados', ya que el javascript no lo crea automáticamente) podemos ver el tiempo de respuesta en cada página y podemos tener una impresión del funcionamiento de boomerang.

Enviar los tiempos tomados a nuestro servidor

Lo que tenemos por ahora no es mucho mas que lo que ofrecen extensiones como Firebug o YSlow. Lo que nos interesa es enviar los tiempos tomados a nuestro servidor. Para esto tenemos que cambiar la configuración de boomerang cambiando el código de arriba por el siguiente:

<script src="boomerang.js" type="text/javascript"></script>
<script type="text/javascript">
BOOMR.init({
  beacon_url: "http://tu.servidor.es/ruta/a/un/archivo_o_script.gif",
  BW: { enabled: false }
});
</script>

El código de arriba ya no contiene la función especial para inserta el tiempo de respuesta en la página. Hemos añadido la linea de 'beacon_url' a las opciones de boomerang. Después de haber tomado el tiempo bommerang hará una petición a este URL, pasando como parametro el tiempo de respuesta. Abajo podemos ver un ejemplo de como aparecería una de estas peticiones en el log de nuestro servidor:

192.168.1.187 - - [01/Jul/2010:11:48:43 +0200]  "GET ruta/a/un/archivo_o_script.gif?v=0.9&t_done=521&u=http%3A%2F%2Ftu.servidor.es%2Fpage2%2F&r=http%3A%2F%2Ftu.servidor.es%2Fpage1%2F HTTP/1.1" 200 49

Podemos ver que boomerang ha insertado el tiempo de respuesta en el parametro 't_done' de la petición. Si en vez de una imagen usamos un pequeño programa podemos insertar los tiempos de respuesta directamente en un archivo o en nuestra BBDD. Sin embargo, si nuestro sitio web tiene mucho tráfico, es mejor usar una imagen pequeña, y cada hora/día extraer los tiempos de respuesto del log de nuestro servidor web.