Configurar informes sobre la velocidad de Carga de tu Web

Si estás aquí es porque quieres aprender la importancia de generar informes sobre la velocidad de carga de tu web.

¿Por qué es importante que sepas esto?

La velocidad o el tiempo de carga de una web, es sumamente crucial por varios aspectos: 

• Experiencia del usuario en tu web
• La retención del visitante
• Rendimiento general de tu página

Por cierto, antes de continuar, me gustaría recordarte que si lo deseas, puedes ver el contenido de este tema tan importante, en el video a continuación.

Fenomenal. Continuamos.

¿Y qué sucede si tenemos una página web con una carga lenta?. Bien. Algunas consecuencias:

• Perdemos usuarios o visitantes
• Nos afecta en el posicionamiento en Google
• Reducen las ventas en una ecommerce.

 Beneficios de generar informes de carga de tu sitio web

Parece “un detalle”, pero hacer hincapié en esto, puede cambiar el curso para siempre de tu sitio web y de tu negocio. La importancia de carga de tu sitio web, no es algo para tomar a la ligera. Aquí les dejo más beneficios:

1. Identificar si tu página tiene un bajo rendimiento y no lo sabías
2. Tomar medidas de optimización
3. Soluciones posibles a los obstáculos que se presentan

A través de este artículo, lo aprenderemos haciendo uso de Google Tag Manager.

¡Genial!. Una vez que ingreses a tu propiedad de GTM, lo primero que tenemos que hacer es dirigirnos a “etiquetas” en el menú de la izquierda. (Se supone que ya tienes instalado y en uso Google Analytics 4)

Tal como se ve en la imagen, debes instalar la etiqueta de Google Analytics 4 en tu contenedor de Google Tag Manager.

Bien. Ahora lo que necesitamos, es crear una variable para poder configurar informes sobre el tiempo de carga de tu web. 

Vamos a la opción ‘variables’ en el menú izquierdo, y luego creamos una ‘nueva’. Le ponemos un nombre, por ejemplo en mi caso “tiempo de carga de página”. Seleccionamos la configuración de la variable, y elegimos “Javascript personalizado”.

Copias el siguiente código:

function() {
if (window.performance && window.performance.getEntriesByType) {
var entries = window.performance.getEntriesByType("navigation");
if (entries.length > 0) {
var navTiming = entries[0];
var pageLoadTime = navTiming.loadEventEnd - navTiming.startTime;
return Math.round(((pageLoadTime / 1000) + Number.EPSILON) * 100) / 100;
}
}
}

Una vez que tienes el código copiado, volvemos a Google Tag Manager y lo pegamos.

Y luego debajo en la imagen seleccionamos al desplegar la opción: ‘convertir undefined a’. Y luego ingresamos “0” como el valor. Luego le damos ‘guardar’ en el botón azul arriba a la derecha.

Ahora lo que necesitamos crear, es un activador para que se dispare la etiqueta de tiempo de carga de la web.

Para esto, vamos a la opción ‘activadores’ del menú izquierdo, y luego seleccionamos ‘nuevo’. Como siempre, le colocamos un nombre, por ejemplo en mi caso “carga de página”. Luego hacemos clic en la ‘configuración del activador’, y seleccionamos “ventana cargada”.

Esto se disparará, después que una página se haya cargado por completo dentro de nuestro navegador. ¡Guardamos cambios!

¡Ahora debemos crear otro activador más! 😃

Seguimos exactamente los mismos pasos que antes para crear activador. Pero con la diferencia que en el nombre le ponemos “tiempo de carga de página menor a cero”

Por cierto cuando llegues a la configuración, debes optar por “evento personalizado”

Y en nombre del evento, colocamos lo siguiente:

Sí, así tal cual lo ves. Luego habilitas la opción que ves al lado, “utilizar una expresión regular”.

Y por último, debajo optamos por la opción “Algunos eventos personalizados”. Y tiene que quedarte con esta configuración:

¡Hacemos clic en guardar!

Crear la etiqueta de evento de Google Analytics 4

Vamos al menú izquierdo opción “etiquetas” y le colocamos el nombre ‘GA4 tiempo de carga páginas’

Y luego, en la configuración seleccionamos “Google Analytics evento de GA4”

Luego seleccionamos GA4 como nuestra etiqueta de configuración, y luego como nombre de evento pondremos lo siguiente:

Luego de esto, debajo, necesitamos agregar los parámetros. Añadimos una fila, y en el nombre del parámetro ponemos lo siguiente:

En el valor, seleccionamos la variable “tiempo de carga de la página”

Debajo de todo, en “activación” seleccionamos el activador que se llama  “carga de página”.

¿Cómo va todo? ¿Ya lo tienes?

Perfecto. En “añadir excepciones”, agregamos el disparador “tiempo de carga de página menor a cero”. ¿Recuerdas?

¿Te quedó así?

¡Clic en guardar!

Para hacer una prueba, puedes ir a “vista previa”, ingresas la URL de tu página y pones “Connect” en Google Tag Assistant.

Luego se cargará tu sitio web, y Tag Assistant te confirmará que estás conectado con tu sitio web.

Volviendo a Tag Assistant, seleccionamos la pestaña “windows loaded”, entonces podremos ver que nuestros Tags estarán cargados correctamente.

Lo vemos:

Si colocamos “value” arriba a la derecha, podremos ver y medir el tiempo de carga de página de nuestra web.

Luego de que corroboramos que todo esté bien, volvemos a Google Tag Manager y “publicamos los cambios” en ‘enviar’

Ahora el tiempo de carga de nuestro sitio web, se enviará a Google Analytics.

¡Genial!

Registrar el parámetro de tiempo de carga en Google Analytics 4

Entonces, dentro de GA4, en la opción ‘administrar’ debajo de todo en el menú izquierdo, hacemos clic y luego en ‘definiciones personalizadas’. Luego, en ‘métricas personalizadas’.

Tal como se ve en la imagen, ‘creamos una nueva’. Le ponemos un nombre y le ponemos el siguiente parámetro:

Por último, en ‘unidad de medida’, elegimos “segundos”. ¡Guardamos!

Creando informes de velocidad de carga de tu página web

¿Lo vemos en pasos? Una vez en Google Analytics 4, seguimos estos simples pasos:

• Navegamos a explorar
• creamos nuevo informe en blanco (le ponemos nombre)
• Le colocamos fecha
• Agregamos dimensiones y métricas que deseamos ver (por ejemplo ruta de página y clase de pantalla) 

Hacemos clic en importar arriba a la derecha

Agregamos métricas (vistas y tiempo de carga personalizada)

Hacemos clic en importar de nuevo.

Organizamos las dimensiones como filas y las métricas como valores

Luego de esto, podremos ver un informe bastante detallado. Pero hay una salvedad:

Tal como se ve en la imagen, el número 4,42 representa el tiempo de carga total de todas las páginas de la web.

Actualmente Google Analytics no presenta la opción para mostrar promedios para métricas personalizadas.

Para poder solventar esto último, podemos usar Looker Studio.

Entonces dentro de Looker Studio creamos un ‘nuevo informe’, conectamos con GA4, y luego ajustamos la info que tenemos en nuestra tabla.

Cambiamos ‘nombre del evento’ por ‘ruta de página’. ‘Vistas’ por ‘números de eventos’. Y agregamos la métrica ‘average tiempo de carga página’

Esta métrica está disponible por defecto dentro de Looker Studio.

Para tener datos precisos, podemos agregar un filtro. Seleccionamos “añadir un filtro”, le colocamos un nombre.

En ‘Incluir’ seleccionamos ‘nombre del evento’ ‘igual que’ y agregamos page_load__time

Esto asegura que solo se incluya en la tabla, las páginas donde se activó el evento “page_load_time”. ¡Guardamos cambios!

¡Y ahora podremos ver los tiempos de carga promedio!

¡Mira cómo quedó!

Recuerda que en Looker Studio, se muestra la métrica de tiempo de carga, en formato de horas, minutos, segundos. Esto se puede modificar en la opción ‘métrica’, en el lápiz, y colocar ‘numérica’ por ejemplo.

¡Guardar cambios!

Optimizar la velocidad de carga de una web es crucial para tus ventas, ecommerce, tus conversiones, y todo lo relacionado a tu negocio digital.

¡Felicidades por tu optimización colega!

Te recomiendo el siguiente artículo para que no cometas errores:

ERRORES FRECUENTES GOOGLE ANALYTICS 4

¡Hasta la próxima!