Améliorer la vitesse et le SEO Google grâce aux déclencheurs retardés de Tag Manager

Nous allons utiliser plusieurs outils dans cet article, alors je vous les liste tous ici et vous pourrez récupérer les liens au moment voulu. Si vous êtes un expert Webflow, vous les utilisez probablement tous les jours, mais il vous faudra :

• Google PageSpeed Insights
• Google Lighthouse (pas de lien pour celui-ci : ouvrez Chrome, cliquez sur Affichage, Développeur, puis Outils de développement, et rendez-vous dans l'onglet Lighthouse. C'est en gros la même chose que PageSpeed, mais avec d'autres analyses intéressantes. Plus d'infos ici.)
• Pingdom
• GTmetrix
• ThinkWithGoogle
• Experte.com Mise à jour : Janis, de experte.com, a lu cet article et nous a contactés pour nous présenter un excellent outil gratuit qui permet d'explorer tout votre site et de lancer un test de vitesse groupé sur chaque page. Très pratique, et un vrai gain de temps si vous avez beaucoup de pages à vérifier. Il permet aussi de tester une liste précise d'URL et d'accéder aux résultats officiels de PageSpeed si vous souhaitez consulter les recommandations et le reste.

Tous ces outils font à peu près la même chose, à savoir mesurer la vitesse de vos pages, mais il est utile de comparer les résultats de plusieurs d'entre eux.

Avant de commencer, une précision : vous n'avez pas besoin de ce tutoriel si vous ne rencontrez aucun problème et que vous n'avez pas un tas de balises de suivi publicitaire dans Tag Manager comme nous. Nous utilisons beaucoup cette méthode sur nos projets Webflow pour retarder les balises et améliorer la vitesse du site, car Webflow ne laisse pas beaucoup de contrôle sur l'ajout de code et le moment où il se déclenche. Cela ne veut pas dire que vous ne devriez pas appliquer cette méthode à tout autre site qui a un paquet de balises se déclenchant à l'affichage des pages ou simplement intégrées dans son code. Commençons donc par répondre à la question : pourquoi en avez-vous besoin avec Google Tag Manager, le suivi des conversions, les balises de remarketing et autres éléments des réseaux publicitaires comme Facebook (Meta), Google Ads, LinkedIn, Twitter (désormais X), Pinterest et compagnie, ainsi que d'autres outils comme les cartes de chaleur de Hotjar ou de Microsoft Clarity ? (Petite parenthèse : si vous n'avez pas de cartes de défilement, de chaleur et de clics et que vous en voulez, installez Microsoft Clarity. C'est un excellent outil de cartes de chaleur, gratuit. Nous avons rédigé un tutoriel à ce sujet ici.)

Autre remarque : si vous utilisez du code provenant de plateformes comme Facebook, Google Ads et d'autres dans votre site sans passer par Google Tag Manager, pensez sérieusement à le retirer et à utiliser Tag Manager pour l'implémenter. Nous sommes un petit studio Webflow et, en tant que designers Webflow, nous voulons toujours des choses nettes, propres et simples, et c'est précisément ce que Tag Manager apporte. Vous trouverez les bases de l'installation de Tag Manager, de l'ajout de votre Google Analytics via Tag Manager et de la configuration des conversions de base dans les articles liés, et notre présentation expliquant pourquoi utiliser Google Tag Manager dans Webflow donne une vision d'ensemble. Tag Manager rend l'ajout de codes de suivi à votre site très simple et facile à gérer. Nous publierons d'autres tutoriels sur l'ajout de suivis publicitaires et de conversions dans de prochains articles. Si vous voulez que nous abordions un sujet précis, dites-le dans les commentaires.

Alors pourquoi ce tutoriel et les étapes ci-dessous pour accélérer les choses ? Allez, ouvrez les liens de la liste, saisissez les pages que vous voulez analyser et lancez les tests de vitesse. Essayez de les exécuter en navigation privée dans Chrome, pour que vos extensions ne perturbent pas des outils comme Lighthouse. Si vous avez beaucoup de codes de suivi, vous verrez peut-être des avertissements sur le LCP, l'INP, le CLS (ou le FID dans les anciens rapports) et des suggestions de différer certains codes pour gagner en vitesse. Une fois ces tests lancés, laissez les onglets ouverts. Nous y reviendrons à la fin pour voir si les choses se sont améliorées, s'il y a moins de reproches sur les scripts à différer et si vos scores ont progressé quand nous relancerons les tests.

D'abord, qu'est-ce que le LCP ? Eh bien, c'est l'abréviation de Largest Contentful Paint. Voilà. Zut, ça n'aide pas vraiment : c'est quoi, au juste ? En gros, c'est le moment où l'on voit ce qu'il y a sur votre page, donc quand le chargement s'est calmé et que le contenu est visible dans la fenêtre d'affichage. Pour être plus précis, c'est le temps qu'il faut pour que le plus gros élément visible à l'ouverture de la page, généralement une image d'en-tête ou un gros bloc de texte, s'affiche à l'écran. Google veut que cela se produise en moins de 2,5 secondes.

Un mot rapide sur ces autres acronymes : le FID (First Input Delay) était le Core Web Vital qui mesurait la rapidité avec laquelle une page réagit à un clic ou à un toucher, mais le 12 mars 2024, Google l'a remplacé par l'INP (Interaction to Next Paint). Si les outils que vous utilisez affichent encore le FID, ils reposent sur des données plus anciennes. Dans les deux cas, les scripts de suivi lourds nuisent aux deux indicateurs, car le navigateur est occupé à les exécuter au lieu de répondre à votre visiteur.

En règle générale, on veut que le LCP soit rapide (enfin, on veut que tout soit rapide), mais pourquoi les codes de suivi le ralentiraient-ils ? Tout tient à la manière dont ces bouts de code se chargent. Il y a en gros deux façons : de manière synchrone et de manière asynchrone. Dans le premier cas, les éléments se chargent l'un après l'autre et chacun doit attendre que le précédent soit chargé avant de démarrer. Pas terrible, n'est-ce pas ? Vous ne voulez pas que l'image et le texte de votre en-tête attendent le chargement d'un script de suivi simplement parce qu'il se trouve dans le head de votre page. C'est là qu'intervient l'asynchrone. Ici, les éléments se chargent en parallèle, donc aucun n'attend celui qui le précède. Le problème, c'est que si chacun peut se charger quand il le souhaite, cela augmente la bande passante nécessaire puisque plusieurs éléments se chargent en même temps, et cela alourdit aussi la charge du navigateur de l'utilisateur, qui doit afficher et traiter tout cela simultanément.

Donc, même si Tag Manager est excellent, il se charge de façon asynchrone : les éléments de votre page et toutes les balises que vous avez ajoutées se chargent en même temps et se disputent les ressources, ce qui n'est pas idéal. Mais comment y remédier sans supprimer toutes les balises ? On retarde ce qui n'a pas besoin de se charger immédiatement, et c'est ce que nous allons faire. Nous déclenchons ce qui est important tout de suite avec le bon vieux déclencheur All Pages, et le reste, ce qui compte pour vous mais dont vous n'avez pas besoin tout de suite, un peu plus tard, pour que le reste de la page, plus important, se charge d'abord. Pour cela, nous allons ajouter un déclencheur, du code personnalisé dans une balise et un autre déclencheur personnalisé qui lancera les balises « pas si importantes à charger en premier ».

Alors, plongeons-nous dans le vif du sujet :

Étape 1 : Décidez de ce qui est le plus important et de ce qui l'est moins

C'est probablement le casse-tête. Ce que nous faisons en général, c'est jeter un œil à Tag Manager pour voir ce qui s'y trouve, ce qui doit vraiment se charger en premier et ce que l'on peut « retarder ». Nous continuons le plus souvent à charger nos balises Google Analytics 4 en premier, sur un déclencheur All Pages classique. Des balises comme celles de Facebook et le remarketing Google Ads sont importantes, mais une seconde ou deux de plus ne ruineront personne, et si vous en avez toute une série, ce sont généralement elles que ces outils, en particulier Google PageSpeed Insights et Lighthouse, pointent du doigt.

Étape 2 : Créez votre balise Full Loaded

Nous allons maintenant créer une balise de code personnalisé et un déclencheur qui généreront un événement, ce qui laissera à la page le temps de se charger avant que nous ne déclenchions les balises que nous avons jugées différables à l'étape 1.

Ouvrez Tag Manager, allez dans Balises et cliquez sur Nouveau.

Donnez un nom à la balise, choisissez HTML personnalisé comme type de balise et collez le code. Le code se trouve dans notre CodePen, alors ouvrez le pen Delayed Triggers sur CodePen (par Jakes van Eeden), copiez le code de l'onglet JS et collez-le dans la balise.

Si vous préférez le voir noir sur blanc, voici tout ce qu'il fait : il attend 1,5 seconde, puis envoie un événement appelé afterLoad au 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>

Lorsque cette balise se déclenche, le code personnalisé que vous venez de coller s'exécute et crée un événement dans le dataLayer de la page, qui attendra 1,5 seconde. Vous pouvez allonger ce délai si vous le souhaitez, mais 1,5 devrait suffire, et cette balise ne se déclenchera qu'une fois l'événement du déclencheur Window Loaded survenu.

Sélectionnez maintenant le déclencheur. Vous devez en créer un nouveau ici plutôt que d'utiliser le déclencheur All Pages habituel, puisque nous cherchons à laisser d'abord la page se charger. Choisissez donc Page View comme type, puis Window Loaded. Donnez ensuite un nom à votre déclencheur et enregistrez le tout.

Vous avez maintenant une balise qui créera un événement dataLayer lorsqu'elle se déclenchera et qui ne se déclenchera que sur l'événement Window Loaded.

Étape 3 : Créez le déclencheur d'événement personnalisé à utiliser sur toutes les balises à retarder

Rendez-vous dans Déclencheurs et cliquez sur Nouveau.

Donnez un nom au déclencheur, sélectionnez Événement personnalisé comme type de déclencheur et afterLoad comme nom d'événement. afterLoad est sensible à la casse. Enregistrez, et c'est terminé.

Vous pouvez désormais utiliser ce déclencheur d'événement personnalisé comme déclencheur sélectionné pour toutes les balises qui doivent être un peu retardées.

Mais que se passe-t-il exactement ? Récapitulons.

Contrairement à la plupart des déclencheurs All Pages, la balise que vous avez créée au début attend maintenant que le déclencheur Window Loaded se produise. Dès que c'est fait, elle patiente 1,5 seconde avant d'envoyer au dataLayer un événement appelé afterLoad. À ce moment-là, votre déclencheur Fully Loaded se déclenche et lance toutes les balises auxquelles vous l'avez associé. Cela laisse au reste de la page le temps de se charger et retient bon nombre des scripts dont Google PageSpeed se plaint d'habitude. Ainsi, en plus d'aider à améliorer vos scores, cela offre une meilleure expérience utilisateur et réduit les pénalités infligées par les outils qui surveillent ce genre de choses.

Vous n'êtes pas obligé de suivre notre approche consistant à laisser notre balise GA se déclencher sur All Pages. Elle peut elle aussi être retardée, tout dépend de la précision que vous souhaitez pour vos statistiques, et c'est à vous de décider. D'ailleurs, déclenchez avec l'événement personnalisé toute balise dont vous n'avez pas besoin immédiatement, si ce délai vous convient.

Dernière étape : publiez le conteneur, vérifiez que tout fonctionne bien en prévisualisant le site dans Tag Manager pour vous assurer que tout se déclenche toujours, puis retournez aux onglets laissés ouverts lors des tests. Relancez les tests. Vous devriez constater une légère amélioration, selon le nombre de balises retardées, mais ne le faites pas uniquement pour obtenir un meilleur score. C'est aussi bon pour l'expérience utilisateur, et n'oubliez pas www.experte.com pour les tests groupés.

Questions fréquentes sur le retard des balises dans Google Tag Manager

Google Tag Manager ralentit-il mon site ?

Cela peut arriver. Tag Manager lui-même se charge de façon asynchrone, donc il ne bloque pas la page, mais chaque balise qu'il contient reste un script qui se dispute la bande passante et l'attention du navigateur avec vos images, vos textes et tout le reste. Un conteneur rempli de balises publicitaires et de cartes de chaleur est ce qui fait râler Google PageSpeed Insights. Retarder les balises non essentielles, comme décrit plus haut, est la solution.

Comment retarder une balise dans Google Tag Manager ?

Créez une balise HTML personnalisé qui envoie un événement afterLoad au dataLayer après le déclenchement de Window Loaded (étape 2), créez un déclencheur Événement personnalisé nommé afterLoad (étape 3), puis remplacez le déclencheur de chaque balise que vous voulez retenir par celui-ci. Prévisualisez le conteneur, puis publiez.

Retarder les balises nuira-t-il à mes statistiques ?

Seulement un peu, et uniquement pour les balises que vous retardez. Toute personne qui quitte la page avant que la fenêtre ne soit chargée et que les 1,5 seconde ne soient écoulées ne déclenchera pas les balises retardées. C'est pourquoi nous gardons Google Analytics 4 sur le déclencheur All Pages normal et retardons des balises comme celles de remarketing, pour lesquelles une seconde ou deux ne change vraiment rien.

Cela améliorera-t-il mon score Google PageSpeed ?

Cela devrait aider, surtout lorsque PageSpeed signale des scripts tiers, mais attendez-vous à une légère amélioration plutôt qu'à un miracle. Testez à la fois sur mobile et sur ordinateur, plusieurs fois, et considérez le score comme un repère. Des pages plus rapides sont la vraie récompense.

Vous avez des questions ou des commentaires sur la façon d'améliorer la vitesse de vos pages ? Écrivez-nous dans les commentaires, et n'oubliez pas : lorsque vous lancez les tests, surtout dans Lighthouse, exécutez-les sur mobile et sur ordinateur, plusieurs fois, pour voir s'il y a une différence.

N'hésitez pas à consulter la section Tutoriels de notre blog pour d'autres guides. Si vous préférez vous passer de Tag Manager pour l'analyse, nous avons aussi écrit un article sur l'ajout de Google Analytics 4 avec Cloudflare Zaraz, et si vous voulez suivre les clics une fois vos balises en ordre, voici comment suivre les clics sur les boutons dans Google Analytics avec Tag Manager. Nous avons également publié récemment un article sur l'accélération de votre site en utilisant Webflow avec Cloudflare pour mettre en cache et accélérer votre projet Webflow, et la version la plus récente de ces conseils se trouve dans l'article sur l'optimisation de Webflow avec Cloudflare : images, ressources et mise en cache en 2026, alors jetez-y un œil.