Métricas del tiempo de carga de página «gratis»

UPDATED: Script con opción para usarse con GA asíncrono

UPDATED (2011/5/8): Google ya lo ofrece de serie… http://www.google.com/support/analyticshelp/bin/answer.py?hl=en&answer=1205784&topic=1120718

Buenas de nuevo¡!

Una de las formas que estamos utilizando para dar precio a los servicios de mejora de rendimiento en aplicaciones Web es muy simple y a la vez te define el ROI de buenas a primeras, aunque esto si, el proceso de ponernos de acuerdo es un poco más largo. Pero es que soy de la opinión, que mejor un cliente contento que recibe por lo que paga y ha estado de acuerdo cuando tenía la posición de fuerza, que no un cliente que paga (en principio todo el mundo asume sus compromisos) pero no estás satisfecho con el resultado del trabajo realizado

Así que la típica oferta acaba con una propuesta del estilo:

  • Si conseguimos X% de mejora -> son X’ €
  • Si conseguimos Y% de mejora -> son Y’ €
  • Si conseguimos Z% de mejora -> son Z’ €

Hasta aquí todo bien, pero de dónde partimos, cómo establecemos una línea base que las dos partes estemos de acuerdo, pues buscando un tercero que audite… y os preguntareis, ¿esto no será carísimo?

Pues no, con un poco de Javascript y Google Analytics tenemos información del tiempo de carga (que no de generación) de cada página para todos los usuarios, con todos sus CSS, JS,imágenes,etc…


var plstart = new Date();

window.onload = function() {
    var plend = new Date();
    var plload = plend.getTime() - plstart.getTime();
    // determine the thresholds
    if (plload < 1000)
    lc = "Very Fast";
    else if (plload < 3000)
    lc = "Fast";
    else if (plload < 5000)
    lc = "Medium";
    else if (plload < 10000)
    lc = "Sluggish";
    else if (plload < 20000)
    lc = "Slow";
    else
    lc = "Very Slow";
    var fn = document.location.pathname;
    if (document.location.search)
    fn += document.location.search;
    try {
        // Sincrono // pageTracker._trackEvent("Page Load", lc + " Loading Pages", fn, Math.round(plload / 1000));
        // Asincrono // _gaq.push(['_trackEvent', 'Page Load', lc + ' Loading Pages', fn, Math.round(plload / 1000)]);
    }
    catch (err) {
    }
}

Lo que nos acaba dando los resultados de los tiempos por cada visita a cada página y los podemos explotar de varias formas. Por ejemplo aquí se muestra una gráfica de la relación entre Velocidad de conexión y continente con su media de tiempo de descarga

O los tiempos de carga totales por página, los datos son los de este Blog y es normal que la / donde se muestran casi todos los artículos tarde más en cargar que sólo un artículo en concreto

Así que ya veis con poco coste (o CERO) podéis tener información de cómo se comporta vuestra aplicación con toda la potencia de segmentación que aporta Google Analytics

Y cómo al Cesar lo que es del Cesar, tenéis más información en el origen del script

Saludos y hasta la siguiente

UPDATE: En el mismo momento que estaba escribiendo este post, Picasa, el repositorio de imágenes de Blogger estaba teniendo problemas http://status.blogger.com/, así que los que vinisteis a leer el artículo os recibimos con errores y tiempo de carga excesivo. Aquí podéis ver la diferencia que ha provocado el problema en la carga de imágenes externas a la experiencia del usuario