Cómo reducir los archivos JavaScript de GTM en PageSpeed Insights

Los archivos JavaScript (JS) de Google Tag Manager (GTM) son útiles para rastrear y analizar el comportamiento de los visitantes del sitio web. Sin embargo, un exceso de archivos JS puede afectar significativamente el rendimiento y la funcionalidad de su sitio web.

Estos códigos JS hacen que su sitio web cargue más despacio, lo que empeora la experiencia de los clientes. Además, ¿sabía que un estudio de Amazon demuestra que cada 100ms de tiempo de carga de la página cuesta un 1% en ingresos? Por lo tanto, reducir los archivos JS es crucial para su sitio web.

En este artículo, le mostraremos las soluciones para reducir el número de archivos JS de GTM, desde auditar contenedores hasta pasar al seguimiento del lado del servidor.

La principal ventaja de optimizar los archivos JS en GTM es la notable mejora en la velocidad de carga del sitio web.

Cada archivo JS necesita una solicitud HTTP independiente para cargarse, y un mayor número de estos archivos significa más solicitudes. Para los usuarios, esto provoca retrasos en la carga del contenido del sitio web que pueden traducirse en un mayor porcentaje de rebote. Directamente para su sitio web, puede conllevar un peor posicionamiento SEO y un menor tráfico.

Reducir los archivos JS disminuirá la cantidad de solicitudes HTTP, lo que hará que su sitio web cargue más rápido.

Los archivos de GTM suelen encontrarse en las siguientes secciones de los informes de PageSpeed Insights:

• Reducir el impacto del código de terceros
• Reducir el JavaScript no utilizado de Google Tag Manager

Haga clic en la sección con la que tenga problemas y vaya directamente a ella.

El código JS de terceros permite configurar el seguimiento de diferentes acciones de los usuarios (hacer clic, desplazarse, compartir contenido, etc.). Sin embargo, afecta la velocidad del sitio web y a menudo se convierte en una de las mayores cargas en la página web.

Para solucionar los problemas con los archivos de GTM, aconsejamos las siguientes soluciones:

Revise todas las etiquetas de su contenedor de GTM, ya que es posible que algunas ya no sean necesarias para el análisis del rendimiento del sitio web. Este sencillo paso ayudará a reducir la cantidad de códigos de terceros y la carga en su sitio web.

Para realizar esta tarea, sugerimos utilizar GTM.Tools. Aquí puede inspeccionar su contenedor, editar y actualizar de forma masiva los contenidos del Workspace.

Las etiquetas HTML personalizadas son útiles para ciertas configuraciones de seguimiento personalizadas; sin embargo, a menudo son demasiado pesadas y, cuando se activan, afectan el tiempo de carga del sitio web. Revise las etiquetas personalizadas que tiene e intente cambiar a las plantillas de GTM, ya que están más optimizadas.

Una CDN almacena en caché los datos de su sitio web y entrega determinadas páginas desde un servidor más cercano a sus visitantes. Esto permite servir los archivos JS con mayor rapidez.

Algunas etiquetas no necesitan activarse en el momento en que se carga la página. Configure la secuenciación de etiquetas para aquellas que puedan demorarse. La secuenciación de etiquetas le permite especificar qué etiquetas deben activarse inmediatamente antes o después de que se active una etiqueta «principal» determinada. Para encontrar esta opción, vaya a “Advanced Settings” en las etiquetas que desee retrasar.

Si reducir las etiquetas Custom HTML o eliminar algunas etiquetas no funciona en su caso, le aconsejamos probar el seguimiento del lado del servidor. 

¿Cómo funciona? Al cambiar al lado del servidor, traslada todas las etiquetas de GTM del contenedor web al contenedor del servidor. Estas etiquetas se cargarán en el contenedor del servidor en lugar de en los navegadores de los usuarios. Esto se traducirá en una carga más rápida del sitio web.

El código JS no utilizado es el código que no se necesita para renderizar la página (para cargar y mostrar su contenido). Este código incrementa el tamaño de su paquete de JavaScript, lo que provoca una carga más lenta del sitio web.

La forma más eficaz de abordar este problema es auditar su contenedor de GTM y eliminar las etiquetas innecesarias.

Sin embargo, tenga en cuenta que, muy probablemente, no podrá excluir por completo dichos archivos JS de esta sección en PageSpeed Insights. 

Algunos tipos de variables pueden formar parte del propio GTM y son necesarios para que GTM funcione en general. Dichas variables incluyen Auto Event Variable, DOM Element, Element Visibility, etc. Es posible que ni siquiera haya añadido estas variables a su contenedor, pero las verá como «código JS no utilizado» en PageSpeed Insights.

Forman parte de la biblioteca de GTM, y eliminarlas puede romper el código y provocar que GTM funcione de manera incorrecta o deje de funcionar.

¿Por qué aparece en «código JS no utilizado» si forma parte de la biblioteca de GTM y es fundamental para que GTM funcione? PageSpeed Insights lo marca como código no utilizado porque usted no tiene ese tipo de variable en su contenedor. Solo se encuentra en la biblioteca de GTM.

Como puede ver, el problema fundamental que puede encontrar con los archivos JS de GTM está relacionado con contenedores desordenados y sobrecargados. La solución clave es supervisar el tamaño del contenedor y eliminar a tiempo las etiquetas innecesarias.

Existen dos formas de supervisar el tamaño del contenedor de GTM:

Añada la extensión Get Google Tag Manager Size a su navegador y simplemente utilícela en su sitio web cuando desee comprobarlo.

La extensión le mostrará el tamaño del contenedor y le proporcionará detalles sobre el número de variables, etiquetas y activadores.

Utilice el siguiente enlace para comprobar el tamaño de su contenedor de GTM. En lugar de la parte «YOUR_ID» en la URL, añada el ID de su contenedor (haga clic en «Workspace» en GTM y verá el ID).

https://www.googletagmanager.com/gtag/js?id=YOUR_ID

Cuando obtenga la página de resultados, cópiela y péguela en TextEdit (para Mac OS) o en Notepad (para Windows OS). A continuación, podrá ver el tamaño de este archivo: ese es el tamaño de su contenedor de GTM.

¿Cuándo verificar el tamaño del contenedor de GTM?

El tamaño límite del contenedor es de 200 KB, pero GTM le advertirá si alcanza los 140 KB. Por supuesto, es muy recomendable mantener los contenedores muy por debajo de este límite para no afectar al rendimiento del sitio web.

Sugerimos monitorizar el tamaño del contenedor periódicamente, sobre todo después de cambios masivos y configuraciones de seguimiento, para que pueda controlar el impacto del código de GTM en el rendimiento de su sitio web.

El exceso de archivos JS de GTM puede perjudicar notablemente la puntuación de rendimiento de su sitio web en PageSpeed Insights. Estos códigos hacen que cargue más despacio, lo que provoca una mayor tasa de rebote y un peor posicionamiento SEO.

Las formas más eficaces de reducir el número de archivos JS de GTM son controlar su tamaño, auditar los contenedores de GTM y eliminar las etiquetas innecesarias. No obstante, si reducir el número de etiquetas no funciona, le aconsejamos considerar el seguimiento del lado del servidor en lugar del lado del cliente. Con el lado del servidor, todas las etiquetas de GTM se cargarán en el contenedor del servidor en lugar de en el navegador, lo que se traducirá en una carga más rápida del sitio web.