Comment réduire les fichiers JavaScript de GTM dans PageSpeed Insights

Les fichiers JavaScript (JS) de Google Tag Manager (GTM) sont très utiles pour suivre et analyser le comportement des visiteurs de votre site web. Cependant, un excès de fichiers JS peut affecter de manière significative les performances et les fonctionnalités de votre site.

Ces codes JS ralentissent le chargement de votre site web, ce qui dégrade l'expérience client. De plus, saviez-vous qu'une étude d'Amazon montre que chaque tranche de 100 ms de temps de chargement d'une page coûte 1 % de chiffre d'affaires ? Réduire les fichiers JS est donc crucial pour votre site web.

Dans cet article, nous vous présentons les solutions pour réduire le nombre de fichiers JS de GTM, de l'audit des conteneurs au passage au suivi côté serveur.

Le principal avantage de l'optimisation des fichiers JS dans GTM est l'amélioration significative de la vitesse de chargement du site web.

Chaque fichier JS nécessite une requête HTTP distincte pour se charger, et plus ces fichiers sont nombreux, plus il y a de requêtes. Pour les utilisateurs, cela entraîne des lenteurs dans le chargement du contenu du site web, ce qui peut se traduire par un taux de rebond plus élevé. Pour votre site lui-même, cela peut dégrader votre classement SEO et diminuer votre trafic.

Diminuer les fichiers JS réduira le nombre de requêtes HTTP, ce qui accélérera le chargement de votre site web.

Les fichiers GTM se trouvent généralement dans les sections suivantes des rapports de PageSpeed Insights :"

• Réduire l'impact du code tiers
• Réduire le JavaScript inutilisé de Google Tag Manager

Cliquez sur la section qui vous pose problème pour y accéder directement.

Le code JS tiers permet de configurer le suivi de différentes actions de l'utilisateur (clics, défilement, partage de contenu, etc.). Cependant, il impacte la vitesse du site web et représente souvent l'une des charges les plus lourdes sur la page web.

Pour corriger les fichiers GTM, nous vous conseillons les solutions suivantes :

Passez en revue toutes les balises de votre conteneur GTM, car certaines peuvent ne plus être nécessaires pour analyser les performances de votre site web. Cette étape simple permettra de réduire le nombre de codes tiers et la charge pesant sur votre site web.

Pour accomplir cette tâche, nous vous suggérons d'utiliser GTM.Tools. Cet outil vous permet d'inspecter votre conteneur, de modifier et de mettre à jour en masse le contenu de votre Workspace.

Les balises HTML personnalisées sont utiles pour certaines configurations de suivi spécifiques ; cependant, elles sont souvent trop lourdes et, lors de leur déclenchement, affectent le temps de chargement du site web. Examinez vos balises personnalisées et essayez de passer aux modèles de GTM, car ils sont bien plus optimisés.

Un CDN met en cache les données de votre site web et diffuse certaines pages depuis un serveur plus proche de vos visiteurs. Cela permet de distribuer les fichiers JS plus rapidement.

Certaines balises n'ont pas besoin d'être déclenchées dès le chargement de la page. Configurez le séquençage des balises pour les balises dont le déclenchement peut être retardé. Le séquençage des balises vous permet d'indiquer les balises à déclencher immédiatement avant ou après le déclenchement d'une balise « principale » donnée. Pour trouver cette option, rendez-vous dans les « Advanced Settings » des balises que vous souhaitez retarder.

Si réduire les Custom HTML Tags et/ou supprimer certaines balises ne vous convient pas, nous vous conseillons d'essayer le suivi côté serveur. 

Comment cela fonctionne-t-il ? En passant au suivi côté serveur, vous déplacez toutes les balises GTM du conteneur Web vers le conteneur serveur. Ces balises seront chargées dans le conteneur serveur au lieu de l'être dans les navigateurs des internautes. Le chargement de votre site web sera ainsi plus rapide.

Le code JS inutilisé est le code qui n'est pas nécessaire au rendu de la page (au chargement et à l'affichage de son contenu). Ce code augmente la taille de votre bundle JavaScript, ce qui ralentit le chargement du site web.

Le moyen le plus efficace de résoudre ce problème consiste à auditer votre conteneur GTM et à supprimer les balises inutiles.

Cependant, gardez à l'esprit que, très probablement, vous ne pourrez pas exclure totalement ces fichiers JS de cette section dans PageSpeed Insights. 

Certains types de variables font partie intégrante de GTM et sont nécessaires à son fonctionnement global. Ces variables incluent Auto Event Variable, DOM Element, Element Visibility, etc. Vous pouvez très bien ne pas avoir ajouté ces variables dans votre conteneur, mais les voir apparaître comme « code JS inutilisé » dans PageSpeed Insights.

Elles font partie de la bibliothèque GTM, et les supprimer peut corrompre le code et entraîner un dysfonctionnement, voire l'arrêt complet de GTM.

Pourquoi cela apparaît-il dans le « code JS inutilisé » s'il fait partie de la bibliothèque GTM et est indispensable au fonctionnement de GTM ? PageSpeed Insights le signale comme du code inutilisé car vous ne possédez pas ce type de variable dans votre conteneur. Il se trouve uniquement dans la bibliothèque GTM.

Comme vous pouvez le constater, le problème fondamental auquel vous pouvez faire face avec les fichiers JS de GTM est lié à des conteneurs désordonnés et surchargés. La solution essentielle consiste à surveiller la taille du conteneur et à supprimer à temps les balises inutiles.

Il existe deux façons de surveiller la taille du conteneur GTM :

Ajoutez l'extension Get Google Tag Manager Size à votre navigateur et utilisez-la simplement sur votre site web lorsque vous souhaitez le vérifier.

L'extension affichera la taille du conteneur et fournira des détails sur le nombre de variables, de balises et de déclencheurs.

Utilisez le lien ci-dessous pour vérifier la taille de votre conteneur GTM. À la place de « YOUR_ID » dans l'URL, ajoutez l'identifiant de votre conteneur (cliquez sur « Workspace » dans GTM, et vous verrez l'identifiant).

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

Une fois sur la page de résultat, copiez et collez-la dans TextEdit (pour Mac OS) ou Notepad (pour Windows OS). Vous pourrez alors voir la taille de ce fichier — il s'agit de la taille de votre conteneur GTM.

Quand vérifier la taille du conteneur GTM ?

La taille limite d'un conteneur est de 200 KB, mais GTM vous avertira si vous atteignez 140 KB. Il est bien entendu fortement recommandé de conserver des conteneurs bien plus légers que cette limite afin de ne pas impacter les performances du site web.

Nous vous suggérons de surveiller la taille du conteneur de temps à autre, en particulier après des modifications majeures et des configurations de suivi, afin de maîtriser l'impact du code GTM sur les performances de votre site web.

L'excès de fichiers JS de GTM peut considérablement dégrader le score de performance de votre site web dans PageSpeed Insights. Ces scripts ralentissent son chargement, ce qui entraîne un taux de rebond plus élevé et un moins bon classement SEO.

Les moyens les plus efficaces de réduire le nombre de fichiers JS de GTM consistent à contrôler leur taille, à auditer les conteneurs GTM et à supprimer les balises inutiles. Toutefois, si la réduction du nombre de balises ne suffit pas, nous vous conseillons d'envisager le suivi côté serveur plutôt que côté client. Grâce au côté serveur, toutes les balises GTM seront chargées dans le conteneur serveur au lieu du navigateur, ce qui accélère le chargement du site web.