Potencial tu Sitio Web: Optimiza Google Analytics para un Rendimiento Impecable

Autor: rioyi | Lectura: 4 minutos | Jun 23, 2024

Descubre cómo Google Analytics puede mejorar o perjudicar la velocidad de tu página web. Aprende técnicas sencillas para integrar esta poderosa herramienta sin sacrificar la experiencia del usuario y mejora tu SEO al mismo tiempo.

Potencial tu Sitio Web: Optimiza Google Analytics para un Rendimiento Impecable

Optimización del Rendimiento de tu Sitio Web con Google Analytics

Imagina que tu sitio web es una biblioteca mágica, llena de información esperando ser descubierta por tus visitantes. Pero para que esta biblioteca funcione a la perfección, necesitas entender cómo los usuarios interactúan con ella. Aquí es donde entra Google Analytics, tu bibliotecario digital, listo para ayudarte a optimizar el rendimiento de tu sitio web.

Problemas de Rendimiento con la Etiqueta de Google Analytics

Desde sus inicios, Google Analytics ha usado una etiqueta JavaScript para rastrear el comportamiento de los usuarios. Aunque esto parece lógico, tiene implicaciones en el rendimiento de tu sitio web. El uso de JavaScript puede limitar la capacidad de priorizar la carga del contenido esencial de tu página, lo que puede hacer que se cargue más lentamente.

Etiqueta JavaScript vs. Script Nativo

Anteriormente, Google Analytics utilizaba una etiqueta JavaScript asíncrona, que no permitía una flexibilidad técnica en la priorización. Afortunadamente, con la nueva versión de Google Analytics 4 (GA4), se aprovechan mejor los estándares HTML, aunque sigue ejecutándose de manera asíncrona.

Carga Asíncrona vs. Defer

La carga "async" permite que el script se descargue mientras se renderiza la página, pero su ejecución puede bloquear la representación de la página. Google recomienda colocar su etiqueta al principio del <head>, lo cual compite con los recursos esenciales necesarios para una carga rápida.

Google Tag Manager (GTM)

El uso de Google Tag Manager (GTM) para encapsular el script de Google Analytics añade complejidad y latencia de red adicional, lo que puede bloquear la renderización de las páginas y degradar la experiencia del usuario.

Cómo Optimizar Google Analytics

Para disfrutar de los beneficios de Google Analytics sin sacrificar el rendimiento de tu sitio web, sigue estos consejos:

1. Usa el Atributo "Defer" y "Fetchpriority": Emplea una etiqueta <script> con "defer" para que el script no bloquee la carga de la página, y "fetchpriority='low'" para indicar que no es crucial.

<!-- Google tag (gtag.js) -->
<script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX" defer fetchpriority="low"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

2. Carga del Script en el Pie de Página: Coloca el código al final de la página antes de </body> para asegurar que los scripts importantes se carguen primero.

3. Uso de Indicaciones de Recursos: Usa dns-prefetch y preconnect para anticipar y optimizar conexiones de red, mejorando la velocidad de carga del script.

<link rel="dns-prefetch" href="https://www.googletagmanager.com">
<link rel="dns-prefetch" href="https://www.google-analytics.com">

4. Carga del Script desde tu Propio Dominio: Sirve el script de Google Analytics directamente desde tu dominio mediante un proxy o caché para reducir la latencia de red.
5. Postponer la Ejecución con Interacción del Usuario: Retrasa la ejecución del script hasta que el usuario interactúe con el sitio (clic, desplazamiento, etc.) para dedicar inicialmente los recursos del navegador a la renderización de la página.

["keydown", "mousedown", "mousemove", "touchmove", "touchstart", "touchend", "wheel"].forEach(function(e) {
    window.addEventListener(e, firstInteraction, { once: true, passive: true });
});

var userInteracted = false;

function firstInteraction(event) {
    if (event && !userInteracted) {
        let load_on_interaction = ["https://www.googletagmanager.com/gtm.js?id=G-XXXXXXXXXX"];
        let head = document.getElementsByTagName("head")[0];
        load_on_interaction.forEach(function(e) {
            var script = document.createElement("script");
            script.setAttribute("src", e);
            script.setAttribute("defer", "defer");
            script.setAttribute("fetchpriority", "low");
            head.appendChild(script);
        });
        userInteracted = true;
    }
}

Alternativas a Google Analytics

Si Google Analytics te parece complicado, existen alternativas más simples y ligeras como:

Matomo: Una plataforma de análisis web de código abierto que prioriza la privacidad y el control de datos.
Plausible Analytics: Con una etiqueta ligera de solo 1kb, Plausible mejora significativamente las métricas de rendimiento web y cumple con el RGPD sin necesidad de cookies.

Conclusión

Optimizar el rendimiento de tu sitio web con Google Analytics es posible siguiendo estos simples pasos. Con Google Analytics, puedes entender mejor cómo los usuarios interactúan con tu sitio y hacer mejoras informadas para ofrecer una mejor experiencia a tus visitantes. Recuerda, una página web rápida y eficiente no solo mejora la experiencia del usuario, sino que también beneficia el SEO, ayudando a tu sitio a posicionarse mejor en los motores de búsqueda.

Fuente: https://agencewebperformance.fr/en/google-analytics-performance/

¿Disfrutas mi contenido?

¡Considera invitarme un café para apoyarme a manter los servidores!

Google Tools