Medir el tiempo de carga de tu página con Analytics

Las posibilidades de Google Analytics empiezan a ser una caja de sorpresas de funcionalidades e incluso herramientas externas gracias al acceso al API que nos ofrece Google. En esta ocasión os presentamos una solución para medir el tiempo de carga de una página web y que sea reflejado en vuestras estadísticas para disponer de más información interesante.

El tiempo de carga de una página web es un punto que cada vez cobra más importancia para no solo los buscadores, también para los usuarios que están impacientes por ver cargados los contenidos y no quieren perder el tiempo. Para integrar este dato en tu Analytics solo tienes que utilizar el código que te mostramos más abajo que registrará este valor en milisegundos.

La forma de realizar este control es sencilla, se inicializa un contador para obtener el tiempo completo desde el inicio hasta que se finaliza al carga total, a través del evento onload(). El sistema no es perfecto ni demasiado exacto pero sirve como referencia para nuestras estadísticas.

Aquí tenéis paso por paso como implementar esta solución a vuestro Google Analytics.

Paso 1: Añadir javascript en la cabecera de tu página.

Lo primero que tenemos que hacer para poder capturar el tiempo de carga de una página es añadir un código en la cabecera del sitio que nos permitirá grabar la hora de arranque de la carga de la página. El código es el siguiente:

[codesyntax lang=»javascript»]
<html>
<head>
<script type=»text/javascript»>
//<![CDATA[
var page_load_start = new Date();
var _gaq = _gaq || [];
window.onload = function() {
var page_load_end = new Date();
var load_time = page_load_end.getTime() – page_load_start.getTime();
load_time = parseInt( load_time / 100 )*100;
_gaq.push([«_setCustomVar»,1,’landingPageTime’,load_time,2]);
_gaq.push([«_setAccount»,»UA-xxxxxxxx-y»]);
_gaq.push([«_trackPageview»]);
};
//]]>
</script>
<!– Here goes the rest of your head section –/>
</head>
[/codesyntax]

Este código ha sido copiado de la documentación de analytics. A continuación contamos un poco más las partes del código superior que utilizarás en tu web.

Captura de la hora de inicio e inicializar la etiqueta async de Google Analytics.

Este código en la cabecera de la web permite gestionar cuando se empieza a leer la carga de la página para tener una información aproximada que permita calcular el tiempo de carga al finalizar. Para ello se utiliza una etiqueta asíncrona de Analytics donde inicializamos la variable _gaq.

Confiramos un código onload para capturar la hora de parada y registrar el tiempo de carga de la página.

Con la configuración de este evento que llamamos cuando cargamos el cuerpo de la página. El tiempo mínimo será siempre de 100 milisegundos y en múltiplos de este.

Asignamos tiempo de carga a una variable personalizada y reportamos a Google Analytics.

Ahora que ya hemos cargado la página web y tenemos los datos, los registramos en Analytics. Para ello tenemos que remplazar el ID de nuestra cuenta GA, cambiar donde sale UA-xxxxxxxx-y por tus datos.

Paso 2: Añadir código asíncrono de Google Analytics en el pie de tu página.

Si nunca ha utilizado etiquetas asíncronas de Google Analytics puedes consultar más información sobre el proceso de carga en la introducción de etiqueta asíncrona en la documentación de Google.

Paso 3: Implementar y esperar a recibir datos.

Ahora que ya tienes instalado el código en tus páginas, solo tienes que poner en producción tu sitio. En unos días podrás consultar los datos, se paciente que a veces no es de un día para otro.

Paso 4: Analizar datos registrados para tu web.

Si ya está recibiendo datos, enhorabuena. Esperamos que los datos te sean útiles para tu análisis estadístico.

To get to your data, log into your Google Analytics account and go to the Visitors > Custom Variables section by navigating through the left hand menu. You should see something like this:

You’ll see our custom variable: landingPageTime and some summary statistics about it. If you don’t see this and it’s been 24 hours, you may have a problem with your tag (or you may have no visitors to your website). Go back to step 1 and make sure you installed the tag correctly.

If you click on landingPageTime, you’ll see the detailed report for the variable. It should look something like this:

Now this data might look a little confusing at first. Here’s how to read some of the more important columns:

Custom Variable: This column contains the actual page load time reported by the tag. So if it says “900″, that means 900 milliseconds. The rest of the row shows you statistics for all sessions where the landingPageTime was 900ms.

Visits: This tells you how many visits to your site had that landing page time. So if it says “100″, that means 100 people came to your site and experienced a page load time of 900ms.

Pages / Visit: This tells you how how many pages were viewed by users who experienced this row’s load time. To be honest, this data looks a little wonky on my own test site and I’m wondering if there’s something going wrong on the data collection. But theoretically, this should let you see if a faster loading time leads people to visit more pages.

Bounce Rate: This tells you the bounce rate for sessions that experienced this load time. I find this to be the most interesting column because it shows you if bounce rate changes when the load time changes.

Now the big problem I have here is that Google Analytics just isn’t designed to report intelligently on this kind of data. It treats our load time variable as a string, so the table does not sort properly. Also, the graph at the top of the page is pretty meaningless.

So what I do here is export the data to excel and finish my analysis there.

Gracias Andrés Nieto y Yottaa por esta información. La captura de imagen corresponde a la prueba de este código en Carrero.es durante 2 semanas antes de publicar este artículo.

Scroll al inicio