Optimisation des performances

Stratégies pour améliorer la performance sur site de TagCommander.

La performance sur site d'un site web est l'un des KPI les plus importants pour le SEO. Par conséquent, de plus en plus d'entreprises cherchent à optimiser la performance sur site via TagCommander. Cet article rassemble des sujets pour rendre TagCommander lui-même plus performant.

Réduire la taille du fichier TagCommander

Supprimer les propriétés Data Layer inutilisées

Chaque propriété Data Layer configurée dans les options de l'interface crée un peu de code JavaScript dans le Container pour initialiser la variable au cas où elle n'était pas présente dans le Data Layer sur le site tc_vars. Supprimer les variables inutilisées/anciennes rendra donc le fichier Container un peu plus petit (et, en prime, améliorera également la transparence de la configuration du Container).

Supprimer les variables internes inutilisées

Chaque variable interne configurée dans les options de l'interface est un extrait JavaScript, donc supprimer les variables internes permet de réduire la taille du fichier Container. Cela peut être fait en supprimant les variables internes inutilisées et aussi en spécifiant quelles variables sont utilisées dans quel Container. Ceci est particulièrement important pour les clients ayant un <head> et <body> Container et des clients qui ont plusieurs Containers pour différents sites web.

Ne vous répétez pas

Parfois, la même fonctionnalité d'un Tag est dupliquée dans plusieurs Tags. Dans ces cas, il est possible d'économiser une bonne quantité de code JavaScript et de réduire la taille du fichier Container en refactorisant la fonctionnalité commune dans une variable interne ou dans un Tag commun. Par exemple, de nombreux Tags sont constitués de deux parties. Une partie charge une bibliothèque JavaScript externe du fournisseur et une partie envoie l'événement réel au fournisseur. Par défaut, le code qui charge la bibliothèque JavaScript est souvent dupliqué dans chaque événement. Donc extraire la première partie dans un Tag de base permet de supprimer le JavaScript dupliqué.

Scinder les gros fichiers Container

De nombreux Tags sont déployés sur chaque page d'un site web même s'ils ne sont pas déclenchés. Par exemple, de nombreux fournisseurs ont des Tags séparés pour collecter des informations et un seul Tag qui est déclenché sur la page de confirmation. Il peut donc être pertinent de scinder le Container en deux parties — une pour les pages catalogue et une pour les pages entonnoir. Ainsi, les deux Containers ont une taille plus petite car ils n'incluent que les Tags pertinents pour leur partie du site.

Assurez-vous également d'implémenter les Tags dans le <head> Container uniquement si nécessaire car ces Tags ont généralement un impact plus important sur la performance en page que les Tags dans le Container `<body>`.

Mettre en place une configuration hybride TagCommander

Une configuration hybride permet de transférer l'impact sur la performance sur site vers l'infrastructure Server-Side TagCommander.

Rendre TagCommander asynchrone

Charger le Container de manière asynchrone

De nombreux crawlers de vitesse de page sur site mesurent le temps jusqu'à l'événement navigateur onload. Ainsi, si l'équipe IT charge le Container TagCommander de manière asynchrone sur l'événement onload il est possible de rendre le fichier TagCommander invisible pour certaines métriques de vitesse de page. Cela n'est généralement possible que pour les <body> Containers car <head> les Containers doivent être exécutés de manière synchrone pour les Tags d'A/B testing et de personnalisation qui ont un impact sur le contenu visuel du site.

Charger les Tags de manière asynchrone

JavaScript est pour la plupart un langage mono-thread, ce qui signifie que les scripts JavaScript de longue durée (comme un long processus dans une boucle) peuvent bloquer d'autres parties du JavaScript qui devraient s'exécuter immédiatement. Il est possible de placer des scripts JavaScript longs sur une exécuter plus tard avec une pile de priorité inférieure en les enveloppant dans un setTimeout avec un délai de 0 ms.

setTimeout(function() {
    // Mon code de Tag
}, 0);

Ceci doit être testé pour chaque Tag individuel car certains peuvent ne pas être compatibles avec cette approche.

Mis à jour

Ce contenu vous a-t-il été utile ?