.webp)
%203.svg){kind=logo}
L'article examine l'impact de Google Tag Manager (GTM) sur la vitesse de chargement des pages Web et propose des solutions pour améliorer les performances. GTM est souvent vanté pour optimiser la vitesse des pages, mais son véritable impact varie selon l'utilisation et la configuration des balises. Une série de tests révèle que même les balises asynchrones peuvent ralentir les pages, bien que l'impact soit plus faible lorsqu'elles sont implémentées via GTM par rapport à un ajout direct au code source. L'article met en évidence l'importance de retarder les balises moins critiques, de limiter les manipulations du DOM et de réaliser des audits réguliers des conteneurs de balises. Il propose également des stratégies comme le suivi côté serveur pour alléger la charge sur les navigateurs. En fin de compte, il s'agit de trouver un équilibre entre les performances de la page et les besoins commerciaux, sans pour autant sacrifier la précision des données. Pour une analyse approfondie et des conseils pratiques, lisez l'article complet.
Tout LIRE 👇
L’impact de Google Tag Manager sur la vitesse de chargement de votre site Web peut varier considérablement. GTM est souvent cité comme un outil pratique pour optimiser l'efficacité de votre site, mais ses effets réels dépendent de la manière dont il est utilisé et configuré. Les balises asynchrones peuvent également avoir un impact sur les performances, bien que cet impact soit moindre lorsque ces balises passent par GTM plutôt que d'être directement ajoutées au code source.
Mes Méthodes de Test
Pour mesurer les timings de vitesse des pages, j'ai utilisé webpagetest.org et l’outil d’audit de vitesse de site intégré de Chrome, Lighthouse. Voici les configurations que j'ai utilisées:
- Localisation de test : Irlande (EC2, Chrome, Firefox) pour les tests de bureau et Oneplus 5 pour les tests mobiles
- Connexions : 3G rapide et 3G lente
- Trois tests par exécution
Les métriques mesurées incluent le Document complete et le Fully loaded de webpagetest.org, ainsi que le First Meaningful Paint, Time to Interactive et First CPU Idle de Lighthouse.
Codes de Suivi Utilisés
Les codes de suivi suivants ont été inclus dans mes expériences:
- Tag de pageview Google Analytics (gtag.js)
- Code principal de balise Facebook Pixel (page view)
- Tag de conversion Reddit Pixel
- Tag de suivi des pages Quora
- Tag LinkedIn Insights
- Tag Twitter Universal (page view)
- Tag de remarketing Google Ads (gtag.js)
- Code de suivi principal Hotjar
Principales Conclusions
Les scripts asynchrones ont toujours un impact sur la vitesse
Les scripts asynchrones chargent de manière concurrente avec d'autres composants de la page, donc même s'ils ne bloquent pas directement le rendu de la page, ils sollicitent toujours des ressources informatiques, ce qui peut ralentir le processus global de chargement.
Ce n’est pas GTM lui-même, c’est ce que vous y mettez
Un conteneur GTM vide a un impact minimal sur la vitesse, mais ce que vous y ajoutez peut varier les résultats. Par exemple, 8 balises de suivi dans GTM ont ralenti de ~3 secondes la vitesse sur une connexion 3G rapide, et de ~10 secondes sur une connexion 3G lente.
Les balises codées en dur ralentissent davantage la page
Les balises de suivi ajoutées directement au code source ralentissent plus la page par rapport à leur implémentation via GTM.
Le moment où une balise se déclenche compte
Faites déclencher vos balises de suivi le plus tard possible, idéalement après que tous les autres composants de la page sont chargés, pour réduire leur impact sur la vitesse de chargement initiale.
Les balises de suivi ne sont pas les seules responsables
Les balises qui manipulent le DOM peuvent également affecter la vitesse de chargement des pages. Des tests ont montré que même les manipulations simples du DOM peuvent augmenter le temps nécessaire pour interagir avec la page.
Conseils pour Minimiser l'Impact de GTM
1. Auditez régulièrement votre conteneur
Vérifiez et retirez les balises des fournisseurs abandonnés. Cela allégera le conteneur et améliorera possiblement la vitesse des pages.
2. Retardez les balises moins cruciales
Retardez les balises à déclencher après le chargement des composants principaux du site pour optimiser la vitesse de la page.
3. Déclenchez certaines balises uniquement sur des pages spécifiques
Réduisez l’activation des balises aux seules pages qui en ont besoin pour minimiser leur impact global.
4. Évitez les manipulations lourdes du DOM
Les manipulations complexes du DOM consomment beaucoup de ressources. Une fois testées, faites intégrer les améliorations validées par les développeurs pour une meilleure efficacité.
5. Utilisez le suivi côté serveur
Le suivi côté serveur peut réduire la charge de travail des navigateurs. Cela nécessite une configuration plus complexe mais peut être bénéfique.
6. Testez la vitesse des pages après chaque changement
Utilisez Lighthouse et webpagetest.org pour évaluer l'impact de vos changements. Testez également sur des connexions lentes pour une image complète.
7. Gardez votre conteneur léger
Supprimez les éléments inutiles pour maintenir le conteneur lean. Des outils comme gtmtools.com peuvent aider à repérer les éléments orphelins.
En conclusion, bien que Google Tag Manager puisse ralentir les sites, cet impact peut être atténué avec une utilisation et une configuration stratégiques. Équilibrez performance et précision des données pour servir au mieux les besoins commerciaux de votre entreprise.
