Réduire le poids d’une page web : quels sont les éléments les plus impactants ?

Reading Time: 12 minutes

Il y a de cela quelques années déjà, j’ai eu la chance de participer à la conception du MOOC de l’INRIA sur les impacts (entre autres environnementaux) du numérique. À cette occasion, une activité avait été créée par Benjamin Ninassi, dans le but de permettre au participant de classer les éléments d’une page web en fonction de leur poids. L’intérêt ici est notamment d’aider les participants à constituer leur propre modèle mental de ce qui constitue une page web et des impacts respectifs de chaque élément qui la compose. Il s’agit là d’une étape essentielle lorsque l’on veut se pencher sur l’écoconception web. C’est d’ailleurs pour cela que j’utilise régulièrement cette activité en formation mais aussi pour sensibiliser à la sobriété éditoriale.

L’objectif premier de cet article est de valider le classement proposé dans cette activité par de la mesure mais aussi d’aller plus loin. Cet article a été réalisé en collaboration avec l’INRIA (merci Benjamin !) et l’activité du MOOC sera modifiée en conséquence prochainement.

Méthodologie

Afin de pouvoir mesurer les différents éléments qui constituent une page web, nous avons commencé par créer une page HTML/CSS aussi basique que possible qui sert de référence pour les mesures. Cette page a un fond entièrement noir. Ensuite, nous avons décliné cette page en autant de versions qu’il y a d’éléments à mesurer. Pour chaque élément à mesurer, une page HTML est donc créée à partir de cette page de référence, à laquelle on ajoute seulement l’élément à mesurer. Le CSS est créé dans un fichier à part, renseignant à minima le fond entièrement noir. Ce fichier n’est pas minifié (suppression des caractères non-nécessaires à l’interprétation du code) car l’apport sur un fichier aussi court est négligeable.

Ensuite, un parcours simple est automatisé en GDSL (le langage d’automatisation de Greenspector) afin de simuler le comportement standard d’un utilisateur : chargement de la page, pause de 30s, scroll jusqu’en bas de la page puis à nouveau pause de 30s. Ensuite, une fois les mesures réalisées sur le banc de mesure, nous procédons à la génération d’un dashboard et à la projection environnementale. Ce sont ensuite ces résultats que nous utilisons pour analyser les impacts des différents éléments mesurés et les classer.

Concernant les médias intégrés dans la page à titre d’exemple pour la mesure, nous avons autant que possible repris les éléments utilisés dans l’activité du MOOC. Cette dernière proposait à l’origine un fil Twitter qui apparaît depuis vide. Avec l’INRIA, il a été décidé de le remplacer par un fil Facebook (celui de l’INRIA) à la fois dans l’activité et dans l’échantillon mesuré ici.

Concernant les éléments dynamiques (carte interactive, fichier audio ou vidéo), nous n’avons pas mesuré ici leur utilisation (lecture ou interaction) mais seulement leur chargement et leur affichage. En effet, nous nous intéressons en priorité au poids que représente leur présence sur une page, donc l’impact qu’ils auront pour tous les internautes qui visualisent cette page, qu’ils utilisent ou non ces composants. Leur utilisation augmenterait néanmoins grandement les impacts générés, en termes de requêtes et données transférées mais aussi de CPU et décharge de batterie.

Les mesures ont été effectuées sur Samsung Galaxy S9, en WIFI.

Différentes hypothèses ont été prises pour la projection environnementale :

La méthodologie pour la projection environnementale est décrite dans cet article dédié.

Classement des éléments d’une page en fonction leur poids

Attention, cet article contient des spoilers. En effet, il se base sur le résultat attendu pour l’activité “Comparer le poids des éléments d’une page web”. Si vous n’avez pas encore fait cette activité, faites-la dès maintenant.

Dans l’activité du MOOC, le classement proposé est le suivant (du composant ayant le poids le plus élevé à celui ayant le poids le plus faible) :

  1. Vidéo Haute Définition
  2.  Vidéo Basse Définition 
  3. Podcast audio 
  4. Image Brute 
  5. Carte OpenStreetMap 
  6. Un fil de réseau social 
  7. Image allégée 
  8. Texte seul 

A l’issue des mesures que nous avons effectuées, les données transférées lors du chargement des pages correspondantes donnent les résultats suivants : 

Données transférées au chargement des pages pour les éléments de l’activité 

On retrouve donc plus ou moins le classement proposé dans l’activité. La principale différence réside dans l’ordre du fil de réseau social et de la carte OpenStreetMap. Il convient en effet de noter que le poids de ces éléments dépend de plusieurs facteurs et en particulier du réseau social sélectionné ainsi que du contenu intégré ici (message, fil de messages, etc). Il en va de même pour les autres éléments mesurés ici mais l’ordre de grandeur reste donc tout à fait correct.

Nous pouvons donc ici valider le classement du poids des éléments tel que proposé dans l’activité du MOOC de l’INRIA. Nous pourrions tout à fait nous arrêter ici mais voyons maintenant pour aller plus loin. Pour cela, regardons ce qui se passe au-delà du chargement de la page ainsi que d’autres métriques et indicateurs.

Autres impacts des éléments d’une page web

Nous restons donc sur les huit éléments proposés dans l’activité.

Le dashboard généré via Greenspector Studio liste plusieurs autres métriques et indicateurs.  
Le premier score calculé concerne la performance. Toutefois, sur des pages aussi légères, le chargement est trop rapide pour qu’on puisse différencier les éléments de façon significative en raison du “bruit”, notamment le TTFB (Time to First Byte = délai avant réception du premier élément) qui peut légèrement varier d’une itération à l’autre.

Données transférées au-delà du chargement initial

Commençons par regarder les données transférées au-delà du chargement de la page : pause de 30 secondes, scroll en bas de la page puis nouvelle pause de 30 secondes.

Données transférées sur l’ensemble de la mesure pour les éléments de l’activité 

On constate ici que les données transférées en-dehors du chargement initial sont à peine visibles, sauf dans le cas du fil Facebook. En effet, on voit ici un important volume de données transférées pendant la pause qui suit le chargement du fil Facebook (ceci sera analysé par la suite).

Énergie consommée

Sur l’ensemble des étapes mesurées, l’énergie consommée en fonction des éléments est la suivante :

On constate que l’ordre reste globalement cohérent à quelques exceptions près (nous y reviendrons plus tard) mais surtout une importante surconsommation d’énergie dans le cas du fil Facebook.

Fil Facebook

La page contenant le fil Facebook est de loin la plus impactante du point de vue de l’énergie. S’il est logique que le scroll et le chargement soient impactants (car ces étapes impliquent à minima une modification de l’affichage), c’est tout de suite plus étonnant pour les pauses. En effet, lorsque l’utilisateur est inactif, l’affichage n’est normalement pas modifié. Il reste donc à regarder si des requêtes “parasites” surviennent. Dans l’interface web de Greenspector Studio, on obtient la représentation suivante : 

Visualisation CPU et données transférées pendant la pause après scroll sur la page contenant le fil Facebook 

Sur une étape de pause “normale”, aucun transfert de données n’a lieu (en-dehors d’éventuelles requêtes liées à la télémétrie du navigateur Chrome). Si, en plus, l’affichage n’est pas modifié, on s’attend à voir une sollicitation CPU stable et basse et aucune donnée transférée. Ce n’est pas le cas ici. Les premiers transferts de données (à gauche) sont corrélés à de forts pics de CPU, ce qui semble être un reliquat de chargement (ou un chargement asynchrone). Les pics CPU qui suivent semblent plutôt être de l’ordre du tracking.

Extrait des requêtes HTTP capturées dans l’onglet Réseau des DevTools de Firefox 

Lors de l’intégration d’un contenu provenant d’un service externe, il est courant que des requêtes soient émises à intervalles réguliers vers le site source pour l’informer du comportement utilisateur et des interactions avec le contenu intégré.

Vous pouvez à ce sujet consulter l’article dédié à l’intégration de services tiers sur une page web : https://greenspector.com/fr/service-tiers-youtube/ 

Intégration du fichier audio

La page contenant le fichier audio est moins impactante que celles contenant des images, ce qui est en contradiction avec ce qu’on a pu observer pour les transferts de données. De même, le texte apparaît plus impactant pour l’énergie que le fichier audio ou les images. Tous ces contenus ne provoquent pas de changement de l’affichage une fois chargés et juste visualisés. En revanche, sur un écran AMOLED (comme celui du S9 utilisé ici), l’affichage du texte est plus impactant que les images et le fichier audio choisis car le fond est noir mais le texte blanc. Sur ce type d’écran (et c’est la raison d’être du mode sombre du point de vue de la consommation d’énergie), un pixel noir est beaucoup moins coûteux à afficher qu’un pixel blanc. Nous sommes donc ici sur un cas limite mais qui permet de comprendre d’où provient l’impact d’une page en consultation seule.

Vous pouvez à ce sujet consulter l’article dédié à l’impact de la couleur sur la consommation énergétique : https://greenspector.com/fr/faut-il-changer-son-fond-decran-pour-consommer-moins-de-batterie/ 

Conclusion intermédiaire

Pour les éléments de l’activité du MOOC, la mesure des données transférées vient confirmer le classement attendu, avec seulement un léger bémol lié au contenu de réseau social intégré.

Toutefois, si on regarde plutôt l’énergie consommée, on constate qu’une bonne partie de l’impact du fil Facebook intervient après le chargement, via des requêtes régulières à des services tiers (et le chargement de vidéos). Ceci souligne la nécessité d’aller au-delà de la mesure des requêtes, données transférées et du DOM mais aussi de mesurer ce qui se passe après le chargement initial, au risque de passer entre autres à côté des services tiers (et des éléments dont le chargement est différé, souvent pour des raisons de performance).

Voyons maintenant pour ajouter à la liste initiale de nouveaux éléments qu’on trouve souvent sur le web.

Autres éléments intégrés dans une page web

En complément des éléments proposés dans l’activité du MOOC, nous nous sommes penchés sur d’autres items : 

La méthodologie de mesure et création des pages de l’échantillon est exactement la même que celle exposée plus haut.

Voyons ici les résultats obtenus.

Données transférées lors du chargement initial

A l’issue des mesures que nous avons effectuées, les données transférées lors du chargement des pages correspondantes donnent les résultats suivants :

Données transférées au chargement des pages pour l’ensemble des éléments 

En complément du classement constaté plus haut pour les éléments issus de l’activité, on note le GIF, plus volumineux que l’image brute (ce qui est bien sûr ici lié au contenu choisi pour intégration).

Le tableau est moins volumineux que le texte car il contient moins de caractères (moins de phrases de contenu factice ont été introduites dans le tableau que dans la page servant à mesurer l’impact du texte seul). Nous verrons plus loin que la surconsommation, dans le cas du tableau, est ailleurs. L’animation apparaît ici plutôt légère (quelques lignes de HTML et de CSS).

A noter que les éléments ajoutés ici n’entraînent pas de transferts de données additionnels au-delà de l’étape de chargement initial. Si l’on regarde l’ensemble des étapes de mesures, le fil Facebook reste donc bien le plus impactant.

Données transférées sur toutes les étapes pour l’ensemble des éléments 

Énergie consommée

Les résultats obtenus ici sont les suivants : 

Énergie consommée sur l’ensemble de la mesure pour les éléments 

Lorsque l’on se limitait aux éléments de l’activité du MOOC, nous avions constaté quelques différences avec le classement initialement proposé. En particulier, le fil Facebook se démarquait nettement comme le plus impactant du point de vue de l’énergie.

Ici, on remarque que l’animation CSS est de loin la plus impactante du point de vue de l’énergie. On retrouve ensuite le fil Facebook puis le GIF animé. Cet ordre est notable : en effet, contrairement au GIF animé qui modifie en continu l’affichage, le fil Facebook apparaît plutôt statique lorsque l’utilisateur est inactif. Comme évoqué précédemment, sa surconsommation d’énergie vient plutôt de ce qui ne se voit pas : les requêtes à destination de Facebook et le préchargement des vidéos.

Le tableau HTML natif est légèrement plus impactant que le texte simple du point de vue de l’énergie, même s’il contient moins de caractères. Ainsi, dès l’affichage, le tableau sollicite légèrement plus le CPU (nous y reviendrons plus loin).

Ceci avait déjà été évoqué dans le cadre de l’article sur les sites sobres : https://greenspector.com/fr/un-site-sobre-est-il-necessairement-moche/ 

Lorsqu’un élément sur une page entraîne des modifications en continu ou presque de l’affichage, l’impact énergétique peut être conséquent. Nous verrons dans la dernière partie de cet article en quoi ceci influe sur les impacts environnementaux.

Conclusion intermédiaire

Les trois éléments ajoutés s’intègrent sans surprise au classement initial si l’on s’en tient aux données transférées. Toutefois, du point de vue de l’énergie, l’animation CSS et le GIF animé ont un impact considérable. Ceci souligne la nécessité, pour de la mesure, de ne pas se limiter aux requêtes HTTP, données transférées et au DOM. L’utilité de cette dernière métrique pour la projection environnementale reste discutable. Les cas présentés ici sont d’ailleurs de bonnes illustrations de cas où le DOM est très léger mais où les impacts sont très importants. 

Ceci est détaillé dans un autre article du blog : https://greenspector.com/fr/le-dom-comme-metrique-de-suivi-de-sobriete-du-web/ 

Pour finir, nous allons utiliser une autre méthodologie de mesure et collecter des données afin d’avoir une vision plus globale des différents éléments.

Mesure des pages via un benchmark “classique”

Pour cette nouvelle série de mesures, nous sommes partis du même échantillon de pages mais avons utilisé un benchmark classique. Ainsi, chaque page est mesurée sur une durée de 70s, en utilisant les étapes suivantes : 

  • Le chargement de la page 
  • Une étape de pause avec la page affichée au premier plan  
  • Une étape de pause avec la page affichée à l’arrière-plan  
  • Le scrolling sur la page 

Pour en savoir plus sur le benchmark, consultez cette page : https://greenspector.com/fr/comment-est-calcule-lecoscore-dans-le-cas-dun-benchmark-web-ou-mobile/  

Il en ressort les résultats suivants : 

Agrégation des résultats du benchmark des éléments (classés par quantité de données transférées) 

Pour ce qui est des données transférées, on retrouve ce qui a déjà été observé. Sachant qu’il est plus difficile de départager l’animation CSS, le texte et le tableau HTML car les quantités de données transférées sont très faibles. 

Pour ce qui est de l’énergie, on note quelques légères variations mais surtout les surconsommations pour l’animation CSS, le GIF et le fil Facebook sont d’autant plus claires. 

Côté CPU, on retrouve ici les trois mêmes éléments qui sont beaucoup plus consommateurs que les autres. À la suite de ce trio de tête, on trouve le tableau HTML qui, malgré la faible quantité de données nécessaires à son chargement, s’avère être impactant pour le CPU. 

De son côté, Alexander Dawson a commencé à creuser la question de l’impact de différents éléments standard HTML et CSS : https://websitesustainability.com/cache/files/research23.pdf [PDF de 384 ko, EN].

 Pour les requêtes HTTP, on retrouve sans surprise en tête le fil Facebook et la carte OpenStreetMap. Il s’agit en effet ici de l’intégration d’éléments dynamiques fournis par des services-tiers, ce qui nécessite davantage de fichiers pour fonctionner. A noter que les requêtes vers et depuis Facebook se font en continu ou presque, jusqu’à atteindre plus de 170 requêtes en tout au bout de quelques minutes d’inactivité de l’utilisateur (comme nous avons pu le voir plus haut).

Concernant les équivalents en émissions de gaz à effet de serre, c’est bel et bien le fil Facebook qui est ici le plus impactant (en raison de sa forte consommation de données et de CPU), suivi d’assez loin par l’animation CSS, les vidéos BD et HD puis par le GIF animé. À titre indicatif, l’occupation des sols ainsi que l’eau sont également indiquées (voir à ce propos l’article sur la projection environnementale : https://greenspector.com/fr/methodologie-calcul-empreinte-environnementale/ ). Le classement pour ces deux autres indicateurs, reste globalement identique, sauf pour l’occupation des sols où l’animation CSS, le fil Facebook et le GIF animé apparaissent plus impactants que les vidéos BD et HD, à priori en raison des surconsommations CPU et batterie engendrées.

Conclusion intermédiaire

Ces nouvelles mesures, avec une méthodologie légèrement différente, soulignent une fois de plus la nécessite de prendre en compte différentes métriques mais aussi les écarts observables lors de l’évaluation sur plusieurs indicateurs environnementaux.

Conclusion globale

Si l’on reste sur le même périmètre (données transférées lors du chargement initial), les mesures confirment le classement des éléments proposé par l’activité du MOOC de l’INRIA. Le seul point à discuter reste l’intégration d’un élément de réseau social. Sur l’échantillon choisi ici, l’intégration du fil Facebook est plus impactante que la carte interactive issue d’OpenStreetMap (sans même compter les autres impacts identifiés au-delà du chargement initial ou les données liées à l’énergie).

Si l’on va au-delà de ce périmètre de mesure (en regardant également d’autres métriques et indicateurs environnementaux), le classement peut être amené à changer, en particulier à cause des impacts au niveau de l’énergie consommée.

Enfin, l’ajout de nouveaux éléments intégrables sur une page web vient forcément modifier le classement mais permet surtout d’affiner le modèle mental évoqué en introduction du présent article. En particulier, l’animation CSS et le GIF animé (ainsi que le tableau HTML dans une moindre mesure) soulignent l’impact sur des métriques qui ne sont aujourd’hui pas mesurées par la plupart des outils alors qu’elles ont un rôle prépondérant pour les impacts environnementaux. Par exemple, l’impact du CPU sur la décharge de batterie du terminal peut entraîner l’accélération à terme du renouvellement de celui-ci donc les impacts environnementaux majeurs liés à cette opération. Ce constat remet directement en question le modèle mental largement adopté pour les impacts environnementaux du numérique qui conduit certains à “compenser” la diète qu’ils s’imposent sur les données transférées par la mise en place d’animations. Par extension, ceci rejoint notamment les questionnements sur l’impact des différents formats et codecs pour certains contenu (où la réduction de poids peut être compensée par une surcharge de calcul qui vient réduire voire annuler les gains environnementaux).

Même s’il est normal de commencer avec un modèle mental simple, cet article vise également à souligner la nécessité d’affiner celui-ci afin d’avoir tous les éléments en main pour effectuer des choix éclairés. En espérant que certains des résultats présentés ici y contribuent. 

En conclusion, deux classements sont proposés ici. 

Le premier ne s’appuie que sur les données transférées lors du chargement initial, comme prévu initialement dans l’activité (du moins impactant au plus impactant) :

  1. Tableau 
  2. Texte 
  3. Animation 
  4. Image allégée 
  5. Carte interactive 
  6. Intégration d’un contenu de réseau social 
  7. Image brute 
  8. GIF animé 
  9. Fichier audio 
  10. Vidéo basse définition 
  11. Vidéo haute définition

Le deuxième classement s’appuie directement sur la projection en termes d’émissions de gaz à effet de serre sur l’ensemble des étapes de mesure (ce qui implique de revenir aux métriques pour expliquer mais aussi d’être transparent sur le modèle de projection environnementale) :  

  1. Texte 
  2. Tableau 
  3. Image allégée 
  4. Carte interactive 
  5. Image brute 
  6. Fichier audio 
  7. GIF animé 
  8. Vidéo basse définition 
  9. Vidéo haute définition 
  10. Animation 
  11. Intégration d’un contenu de réseau social