Le temps de chargement d’une page web est désormais un facteur crucial à plusieurs niveaux: SEO, UX, satisfaction client,… Mais connaissez vous le temps de chargement de vos pages web et surtout, les facteurs de ralentissements ? Dans cet article, nous verrons pourquoi il est important d’auditer le temps de chargement des pages et comment remédier simplement à des temps de chargement trop longs.
-
Définitions de tag publicitaire:
La définition commune d’un tag publicitaire, telle qu’est disponible sur abc-netmarketing.com est la suivante:
Un tag publicitaire est un ensemble de quelques lignes de codes inséré dans le code source de la page web support et qui est placé le plus souvent à l’endroit ou doit apparaître la publicité (pour les formats simples). C’est le tag publicitaire qui donne instruction au navigateur du visiteur d’effectuer une requête sur le serveur publicitaire pour pouvoir afficher l’objet publicitaire (bandeau ou autre).
Dans cette article nous nous intéresserons plus particulièrement aux tags javascript dédiés à la publicité et à la collecte d’informations sur les visiteurs.
-
Pourquoi auditer votre site ?
Le temps de chargement est devenu un facteur important de réussite des sites internet. Que ce soit au niveau de l’User eXperience (UX) ou du Search Engine Optimization (SEO), il est devenu crucial que les pages web s’affichent le plus rapidement possible. Le temps de chargement est d’ailleurs un critère important pour l’indexation par les moteurs de recherche (même s’il n’existe pas de communication officielle sur ce sujet).
Avec le déploiement de l’index Mobile First chez Google (voir l’article d’Abondance à ce sujet), il est important de proposer des pages web rapides à charger.
Lors du chargement d’une page, il convient de différencier plusieurs choses:
- Niveau d’importance de la page pour le site et pour l’activité.
- Chargement du Document Object Model (DOM).
- Chargement du style de la page.
- Chargement des images.
- Chargement des tags.
Commander Act a réalisé, en 2015, un audit des performances des sites de ces clients et le constat est assez intéressant:
- Le minimum de tags observés est 6
- Le maximum de tags observés est 97
- En moyenne, les clients de Commander Act ont 29 tags sur leurs sites
Lors de l’analyse des pages d’un site web, il est important de s’intéresser aux tags en javascript et de les classer en 2 catégories: les tags importants et les tags plus “accessoires”.
Les tags importants doivent être déclenchés le plus tôt possible pour ne pas corrompre leur but. Il s’agit principalement des tags analytics, des tags ayant un impact sur l’UX ou des tags tiers non différables. Les autres tags, plus “accessoires” peuvent eux être décaler dans leur déclenchement ou supprimer tout simplement. Nous verrons cette partie plus loin.
-
Comment auditer votre site ?
Ce que je vous propose aujourd’hui est de voir ensemble comment auditer des pages clé d’un site. La technique que je vous propose ne peut toutefois pas être utiliser pour auditer l’ensemble d’un site car cela s’avererait une tâche très fastidieuse car entièrement manuelle. Si vous souhaiter auditer l’ensemble d’un site, des outils payants existe tel que TagPerformance de Commander Act.
Pour l’analyse de pages clé, j’utilise les add on Ghostery et Performance Analyser ainsi que l’outil d’inspection des navigateur (clic droit > “Inspecter”). Dans cet outil, pour cet audit, j’utilise principalement l’onglet “Réseau”.
Pour obtenir les premières informations, il vous suffit d’ouvrir cet onglet puis de relancer la page. Vous obtenez ainsi le chargement de la page sous forme de “waterfall” et surtout, vous pouvez constater, en bas de la page, les informations suivantes:
- Le nombre de requêtes.
- Le volume de données transférées.
- Le temps nécessaire pour charger l’ensemble des éléments (page, javascript, ….).
- Le temps nécessaire pour charger le DOM.
- Le temps nécessaire pour charger la ressource principale et les ressources dépendantes. Il s’agit ici de la page entièrement chargée
Voici un exemple d’information pour un site de presse.
L’information du temps de chargement de la page peut être confirmée par Ghostery; En effet, l’outil, lors du chargement de la page et des tags, détecte le temps de chargement complet de la page (hors tags).
Avec l’outil Performance – Analyser, vous pouvez obtenir la répartition des requêtes par type de fichier et ainsi déterminer le poids du javascript.
Suite à l’audit, vous pouvez effectuer des tests sur les tags grâce à Ghostery. Avec l’add on, vous pouvez choisir les tags à bloquer et ainsi déterminer l’impact de la suppression du déclenchement de ce tag sur le temps de chargement global. Par exemple, sur un site e-commerce français, voici les résultats si on bloque l’ensemble des tags publicitaires sur la home page:
- Page chargé en 6.96 secondes soit une baisse de 40%
- Fin du chargement en 17.01 secondes soit une baisse de 41%
Bien sûr, il s’agit d’un cas extrême où l’ensemble de tags publicitaires ont été bloqué mais cela montre le potentiel d’une amélioration des tags.
-
Comment améliorer les performances du site ?
Une fois que vous avez auditer la performance de votre site et notamment, la répartition du temps de chargement par type de fichier, vous pouvez passer à l’optimisation des tags javascript. Pour cela, il existe plusieurs possibilité en fonction des tags:
-
Désactivation du tag:
le tag est-il vraiment utile ou le fonctionnement du site peut -il s’en passer ? En fonction de la réponse à cette question, vous pouvez ainsi désactiver les tags inutiles sur l’ensemble du site.
-
Echantillonnage / Déduplication du tag:
Le tag est nécessaire mais est-il nécessaire dans tous les scénarii ? Ainsi, certains en fonction des règles de déduplication mises en place, certains tags peuvent ne pas être tirés et alléger ainsi le temps de chargement. Ex: Si vous avez décidé de ne pas attribuer une vente à l’affiliation de la régie X si le parcours de conversion contient avant cela une touche d’affiliation de la régie Y, alors, vous pouvez paramétrer votre gestionnaire de tag pour ne pas déclencher le tag de la régie X.
-
Différer le lancement du tag
Il est possible aussi de différer le lancement d’un tag ou de le lancer de façon asynchrone. De plus en plus d’éditeurs proposent leurs tags en version asynchrone, ce qui signifie que le tag se lance en parallèle des autres scripts et non les uns à la suite des autres. Vous pouvez aussi différer le lancement du tag à la fin du chargement de la page grâce à l’attribut HTML <script src= »code.js » defer></script>.
Pour plus d’information aux sujets du lancement en différé, je vous invite à consulter l’article “Les attributs async et defer pour <script>”
-
Alléger le code du tag
Enfin, une dernière alternative est de travailler à l’allégement du tag javascript. Pour cela, il existe plusieurs techniques:
- Compresser le javascript.
- Retirer le code inutile.
- Optimiser l’encodage
Toutefois, il est plus compliqué de mettre en place ces solutions car il faut pouvoir travailler avec l’éditeur du tag. Si vous souhaitez travailler sur cette piste, je vous conseille l’article “The Cost of Javascript”.