Cet article est le premier d'une série de trois pour appréhender la mesure de l’empreinte environnementale d’un site internet. Vous retrouverez dans ces articles mes reflexions, des définitions, des méthodes et des outils pour parvenir à une mesure fiable et compréhensible.
Je vais diviser le travail en trois étapes :
Alors que la question peut sembler triviale, la réponse ne l’est pas du tout. En effet, on pourrait se dire que le poids d’une page est simplement le poids en kilo-octets (Ko) ou mega-octets (Mo) des ressources qui sont chargées et affichées sur la page.
Par exemple, si une page est composée d’un texte et d’une image, son poids correspondra aux ressources nécessaires pour la charger : un fichier HTML, une police d’écriture, une image et potentiellement un fichier CSS. On peut appeler ça son contenu initial.
Cependant le web a beaucoup évolué ces dernières années, et une page internet contient une grande part de contenu dynamique. Autrement dit, une fois le contenu initial chargé, un contenu supplémentaire est chargé dynamiquement soit par des interactions utilisateurs soit par d’autres déclencheurs.
Et ce n’est pas la seule nuance à prendre en compte. Voici quelques autre éléments qui peuvent affecter le poids d’une page :
En conclusion, mesurer le poids d'une page web moderne nécessite de prendre en compte une multitude de facteurs dynamiques et contextuels. Cela va bien au-delà du simple calcul des ressources initialement chargées et inclut une compréhension approfondie des technologies et des pratiques actuelles du développement web.
Il existe une liste assez longues d’outils en ligne qui permettent de mesurer le poids d’une page web. En voici quelques uns :
Mais il en existe un, probablement le plus fiable : l’inspecteur de votre navigateur. Attention, en fonction du navigateur il ne mesure pas de la même manière. D’après le très bon travail effectué dans cet article de Device Atlas, l’inspecteur de Chrome est le plus fiable. Aussi, utiliser cet outil va me permettre de distinguer la nature des ressource chargées. Ce sera donc mon point de départ pour mesurer le poids d’une page.
L’objectif maintenant est de pouvoir l’utiliser à grande échelle et de ne pas avoir à regarder manuellement le poids total des ressources chargées pour afficher la page.
Face à la complexité que nous venons de voir pour mesurer le poids d'une page, et sachant que l'inspecteur de Chrome est l'outil le plus fiable, j'ai décidé de créer un outil qui automatise exactement ce que nous ferions manuellement : ouvrir Chrome, naviguer sur une page, observer les ressources chargées dans l'onglet Network, et noter les résultats.
Mon outil fonctionne en trois phases distinctes, chacune avec un objectif précis :
Phase 1 : Préparation et navigation
L'outil lance une instance de Chrome via Puppeteer, configure le viewport selon le type d'appareil souhaité (mobile ou desktop), et établit une connexion avec le Chrome DevTools Protocol. Cette API est exactement celle qu'utilise l'inspecteur de Chrome pour capturer les données réseau. Ensuite, il navigue vers l'URL cible et attend que la page atteigne un état "stable" - c'est-à-dire que les principales ressources soient chargées.
Phase 2 : Simulation d'interactions utilisateur
C'est ici que réside toute la complexité du contenu dynamique. L'outil simule un comportement utilisateur réaliste :
Phase 3 : Attente et collecte
L'outil attend que l'activité réseau se stabilise. C'est crucial car avec tous les trackers, widgets et publicités, une page moderne ne "finit" jamais vraiment de charger. Il surveille les requêtes réseau et attend quelques secondes de calme avant de considérer l'analyse terminée.
Pendant toute cette orchestration, l'outil capture en temps réel chaque requête réseau via le Chrome DevTools Protocol. Pour chaque ressource, il enregistre :
Cette approche garantit que je capture exactement les mêmes données que celles affichées dans l'onglet Network de Chrome.
L'outil prend en compte les différents facteurs que nous avons identifiés :
Une fois toutes les ressources capturées, l'outil les analyse et les catégorise automatiquement. Il utilise une logique hybride qui examine d'abord le type MIME de la réponse HTTP, puis se rabat sur l'extension du fichier si nécessaire.
Cette catégorisation permet d'identifier rapidement les gros consommateurs : est-ce que cette page est lourde à cause d'images non optimisées ? De trop de JavaScript ? De polices importées ?
Un des défis les plus subtils était de savoir quand arrêter la mesure. L'outil surveille l'activité réseau et applique une stratégie d'attente intelligente : il considère que la page a "fini" de charger quand aucune nouvelle requête n'est émise pendant plusieurs secondes consécutives.
L'outil propose trois niveaux d'analyse :
Cette approche me permet d'obtenir une mesure qui prend en compte tous les facteurs de complexité du web moderne : contenu dynamique, interactions utilisateur, spécificités des appareils, et même les nuances du cache.
Plus important encore, l'outil utilise exactement la même base technique que l'inspecteur de Chrome, garantissant des mesures cohérentes et reproductibles. Je peux maintenant analyser automatiquement des centaines de pages avec la même précision qu'une analyse manuelle, tout en gardant la possibilité d'adapter le niveau d'analyse selon le type de site.
Le code source complet de cet outil est disponible sur GitHub : https://github.com/GauvainThery/green-web-compass
Dans le prochain article, nous verrons comment utiliser cette base solide pour passer à l'échelle supérieure : mesurer non plus une page isolée, mais le poids complet d'un site web - et nous allons le mettre en perspective avec tous ses utilisateurs sur une période donnée.