Mejora la velocidad y el SEO en Google con los activadores retrasados de Tag Manager

En este post vamos a usar varias herramientas, así que te las enumero todas y puedes venir a buscar los enlaces cuando los necesites. Si eres experto en Webflow, lo más probable es que las uses a diario, pero vas a necesitar:

• Google PageSpeed Insights
• Google Lighthouse (sin enlace para esta: abre Chrome, pulsa Ver, Desarrollador y luego Herramientas para desarrolladores, y busca la pestaña Lighthouse en las DevTools. Es básicamente lo mismo que PageSpeed, pero con otros datos útiles. Más información aquí.)
• Pingdom
• GTmetrix
• ThinkWithGoogle
• Experte.com Actualización: Janis, de experte.com, leyó el post y nos escribió para hablarnos de una estupenda herramienta gratuita que tienen, con la que puedes rastrear todo tu sitio y ejecutar una prueba de velocidad masiva en cada página. Muy buena, y te ahorrará un montón de tiempo si tienes muchas páginas que revisar. También te permite comprobar una lista concreta de URL y saltar a los resultados oficiales de PageSpeed si quieres ver las recomendaciones y demás.

Todas estas herramientas hacen cosas bastante parecidas, medir la velocidad de tu página, pero conviene comparar los resultados de distintas herramientas.

Antes de empezar, una advertencia: no necesitas este tutorial si no tienes problemas y no tienes un montón de etiquetas de seguimiento publicitario en Tag Manager como nosotros. Usamos este método mucho en nuestros proyectos de Webflow para retrasar etiquetas y mejorar la velocidad del sitio, ya que en Webflow no tienes demasiado control a la hora de añadir código y decidir cuándo se ejecuta. Eso no quiere decir que no debas usar este método en cualquier otro sitio que tenga un montón de etiquetas que se disparan en las vistas de página o que simplemente están incrustadas en tu código. Así que empecemos por responder por qué lo necesitarías al usar Google Tag Manager y el seguimiento de conversiones, las etiquetas de remarketing y similares de redes publicitarias como Facebook (Meta), Google Ads, LinkedIn, Twitter (ahora X), Pinterest y otras, además de otras herramientas como los mapas de calor de Hotjar o Microsoft Clarity. (Por cierto, si no tienes mapas de scroll, de calor y de clics y los quieres, instala Microsoft Clarity. Es una gran herramienta gratuita de mapas de calor. Hemos escrito un post práctico sobre eso aquí.)

Por otro lado, si usas código de plataformas como Facebook, Google Ads y demás en tu sitio y no usas Google Tag Manager, deberías plantearte seriamente quitarlo y usar Tag Manager para implementar ese código. Somos un estudio pequeño de Webflow y, como diseñadores de Webflow, siempre queremos las cosas ordenadas, limpias y simples, y eso es justo lo que Tag Manager ofrece. Puedes ver lo básico sobre cómo instalar Tag Manager, cómo añadir tu Google Analytics a través de Tag Manager y cómo configurar conversiones básicas en los posts enlazados, y nuestra visión general de por qué deberías usar Google Tag Manager en Webflow explica el panorama completo. Tag Manager hace que añadir códigos de seguimiento a tu sitio sea muy sencillo y fácil de gestionar. Más adelante haremos más tutoriales sobre cómo añadir más seguimiento publicitario y conversiones. Si hay algo concreto que quieras que cubramos, escríbelo en los comentarios.

Entonces, ¿por qué hacemos este tutorial y los pasos de abajo para acelerar las cosas? Vale, adelante: abre los enlaces de la lista, introduce las páginas que quieres analizar y ejecuta las pruebas de velocidad. Prueba a hacerlo en modo Incógnito en Chrome para que tus extensiones no interfieran con cosas como Lighthouse. Si tienes un montón de códigos de seguimiento, puede que veas avisos sobre LCP, INP, CLS (o FID en informes más antiguos) y demás, y sugerencias de diferir parte del código para ir más rápido. Cuando hayas ejecutado estas pruebas, deja esas pestañas abiertas. Volveremos para ver si las cosas han mejorado, si hay menos quejas sobre diferir cosas y demás, y si tus puntuaciones han subido cuando terminemos y repitamos las pruebas.

Primero, ¿qué es LCP? Pues son las siglas de Largest Contentful Paint. Listo. Qué va, no del todo: ¿qué demonios es eso? Básicamente, es el momento en que puedes ver lo que hay en tu página, es decir, cuándo ha dejado de cargar todo y es visible en el viewport. Para ser un poco más precisos, es lo que tarda en aparecer en pantalla el elemento más grande que ves al abrir la página, normalmente una imagen principal o un bloque grande de texto. Google quiere que eso ocurra en menos de 2,5 segundos.

Una aclaración rápida sobre esos otros acrónimos: FID (First Input Delay) era el Core Web Vital que medía la rapidez con que una página responde a un clic o un toque, pero el 12 de marzo de 2024 Google lo sustituyó por INP (Interaction to Next Paint). Si las herramientas que usas todavía muestran FID, están trabajando con datos antiguos. En cualquier caso, los scripts de seguimiento pesados perjudican a ambos, porque el navegador está ocupado ejecutándolos en lugar de responder a tu visitante.

Lo normal es que quieras que el LCP sea rápido (bueno, quieres que todo sea rápido), pero ¿por qué iban a ralentizarlo los códigos de seguimiento? Todo depende de cómo cargan esos fragmentos de código. Básicamente hay dos formas: de manera síncrona y de manera asíncrona. En la primera, una cosa carga después de otra y todo tiene que esperar a que cargue lo anterior antes de empezar. Así que probablemente no sea lo ideal, ¿verdad? No quieres que la imagen de cabecera y el texto esperen a que cargue primero un script de seguimiento solo porque está en el head de tu página. Aquí es donde entra lo asíncrono. En este caso las cosas cargan en paralelo, así que nada espera a lo anterior. El problema es que, aunque ahora todo puede cargar cuando quiere, aumenta el ancho de banda necesario porque cargas un montón de cosas a la vez, y también aumenta la carga del navegador del usuario, porque está renderizando y haciendo un montón de cosas al mismo tiempo.

Así que, aunque Tag Manager es genial, carga de forma asíncrona, de modo que los elementos de tu página y todas las etiquetas que has añadido cargan al mismo tiempo y compiten por los recursos, lo cual no es tan bueno. Pero ¿cómo lo arreglamos sin quitar todas las etiquetas? Retrasamos lo que no es esencial cargar de inmediato, y eso es lo que vamos a hacer. Disparamos lo importante al instante con el clásico activador All Pages, y el resto, lo que es importante para ti pero no necesitas enseguida, un poco más tarde, para que lo demás que es importante en la página pueda cargar primero. Lo haremos añadiendo un activador, código personalizado en una etiqueta y otro activador personalizado para disparar las etiquetas "menos importantes para cargar primero".

Vamos a ponernos manos a la obra:

Paso 1: Decide qué es lo más importante y qué no

Este es probablemente el quebradero de cabeza. Lo que solemos hacer es echar un vistazo a Tag Manager y ver qué tenemos ahí dentro, qué necesita cargar primero de verdad y qué podemos "retrasar". Nosotros seguimos cargando primero nuestras etiquetas de Google Analytics 4 con un activador normal de All Pages. Cosas como las etiquetas de Facebook y las etiquetas de remarketing de Google Ads son importantes, pero uno o dos segundos más no van a arruinar a nadie, y si tienes un montón de ellas, suelen ser justo lo que estas herramientas, sobre todo Google PageSpeed Insights y Lighthouse, te echan en cara.

Paso 2: Crea tu etiqueta Full Loaded

Ahora vamos a crear una etiqueta de código personalizado y un activador que generarán un evento, el cual dará tiempo a la página para cargar antes de disparar las etiquetas que en el Paso 1 decidimos que podían esperar un poco.

Abre Tag Manager, ve a etiquetas y pulsa Nueva.

Ponle un nombre a la etiqueta, elige HTML personalizado como Tipo de etiqueta y pega el código. El código está en nuestro CodePen, así que abre el pen Delayed Triggers en CodePen (de Jakes van Eeden), copia el código de la pestaña JS y pégalo en la etiqueta.

Si prefieres verlo escrito, esto es todo lo que hace: espera 1,5 segundos y luego envía un evento llamado afterLoad al dataLayer.

<script>
  (function() {
    try {
      // Wait for 1.5 seconds and push an event to the data layer
      window.setTimeout(
        function() {
          dataLayer.push({'event': 'afterLoad'});
        },
        1500
      );
    } catch (err) {}
  })();
</script>

Cuando se dispare esta etiqueta, el código personalizado que acabas de pegar se ejecutará y creará un evento en el dataLayer de la página, que esperará 1,5 segundos. Puedes aumentarlo si quieres, pero 1,5 debería bastar, y esta etiqueta solo se activará cuando se dispare el evento del activador Window Loaded.

Ahora selecciona el activador. Aquí tienes que crear un activador nuevo en lugar de usar el habitual All Pages, porque intentamos dar tiempo a que la página cargue primero. Así que elige Vista de página como tipo y luego Window Loaded. Después ponle un nombre a tu activador y guarda todo.

Ahora tendrás una etiqueta que creará un evento en el dataLayer al dispararse y que solo se activará con el evento Window Loaded.

Paso 3: Crea el activador de evento personalizado que usarás en todas las etiquetas que quieras retrasar

Ve a activadores y pulsa Nuevo.

Ponle un nombre al activador, selecciona Evento personalizado como tipo de activador y afterLoad como Nombre del evento. afterLoad distingue entre mayúsculas y minúsculas. Guarda y listo.

Ahora puedes usar este activador de Evento personalizado como el activador seleccionado para todas las etiquetas que haya que retrasar un poco.

Pero ¿qué está pasando? Hagamos un resumen.

A diferencia de la mayoría de los activadores All Pages, la etiqueta que creaste al principio ahora espera a que se dispare el activador Window Loaded. Cuando eso ocurre, espera 1,5 segundos antes de enviar al dataLayer un evento llamado afterLoad. En ese momento se dispara tu activador Fully Loaded y activa todas las etiquetas a las que lo hayas añadido. Esto da tiempo a que todo lo demás cargue y retiene muchos de los scripts de los que Google PageSpeed suele quejarse. Así que, además de ayudar a mejorar tus puntuaciones, ofrece una mejor experiencia de usuario y reduce las penalizaciones de las herramientas que vigilan este tipo de cosas.

No tienes que seguir el camino que seguimos nosotros, dejando que nuestra etiqueta de GA se dispare en All Pages. También se puede retrasar, simplemente depende de lo precisas que quieras que sean tus analíticas, y todo queda a tu elección. Ya puestos, dispara con el evento personalizado cualquier etiqueta que no necesites de inmediato, si te parece bien el retraso.

Lo último: publica el contenedor, comprueba que todo funciona bien previsualizando el sitio en Tag Manager para asegurarte de que todo se sigue disparando, y luego vuelve a las pestañas que dejaste abiertas al ejecutar las pruebas. Ejecuta las pruebas de nuevo. Ahora debería haber una pequeña mejora, según cuántas etiquetas hayas retrasado, pero no hagas esto solo por conseguir una mejor puntuación. También es bueno para la experiencia de usuario, y recuerda www.experte.com para las pruebas masivas.

Preguntas frecuentes sobre cómo retrasar etiquetas en Google Tag Manager

¿Google Tag Manager ralentiza mi sitio web?

Puede. Tag Manager en sí carga de forma asíncrona, así que no bloquea la página, pero cada etiqueta que contiene sigue siendo un script que compite con tus imágenes, tu texto y todo lo demás por el ancho de banda y la atención del navegador. Un contenedor repleto de etiquetas de publicidad y de mapas de calor es lo que hace que Google PageSpeed Insights se queje. Retrasar las que no son esenciales, como hemos visto, es la solución.

¿Cómo retraso una etiqueta en Google Tag Manager?

Crea una etiqueta HTML personalizado que envíe un evento afterLoad al dataLayer cuando se dispare el activador Window Loaded (Paso 2), crea un activador de evento personalizado llamado afterLoad (Paso 3) y cambia ese activador en cada etiqueta que quieras retener. Previsualiza el contenedor y luego publícalo.

¿Retrasar etiquetas perjudicará mis analíticas?

Solo un poco, y solo en las etiquetas que retrasas. Quien abandone la página antes de que la ventana haya cargado y hayan pasado los 1,5 segundos no disparará las etiquetas retrasadas. Por eso mantenemos Google Analytics 4 en el activador normal All Pages y retrasamos cosas como las etiquetas de remarketing, donde uno o dos segundos no suponen una diferencia real.

¿Esto mejorará mi puntuación de Google PageSpeed?

Debería ayudar, sobre todo cuando PageSpeed señala scripts de terceros, pero espera una pequeña mejora y no un milagro. Haz las pruebas tanto en Móvil como en Escritorio, más de una vez, y trata la puntuación como una guía. Las páginas más rápidas son el verdadero premio.

¿Tienes preguntas o comentarios sobre cómo mejorar la velocidad de página? Escríbenos en los comentarios y recuerda: cuando ejecutes las pruebas, sobre todo en Lighthouse, haz tanto Móvil como Escritorio más de una vez para comprobar si hay diferencia.

No te pierdas la sección How-To de nuestro blog para más tutoriales. Si prefieres prescindir de Tag Manager para las analíticas, también hemos escrito sobre cómo añadir Google Analytics 4 con Cloudflare Zaraz, y si quieres hacer seguimiento de clics cuando ya tengas tus etiquetas en orden, aquí te explicamos cómo hacer seguimiento de clics en botones en Google Analytics con Tag Manager. También publicamos hace poco un post sobre cómo aumentar la velocidad del sitio usando Webflow con Cloudflare para almacenar en caché y acelerar tu proyecto de Webflow, y la versión más reciente de ese consejo está en optimizar Webflow con Cloudflare: imágenes, recursos y caché en 2026, así que échales un vistazo.