Catégorie : Sobriété du web

RGESN / loi REEN : de quoi parle-t-on ? 

Posted on by Laurent DEVERNAY
Reading Time: 12 minutes

Le sujet des impacts environnementaux du numérique ne cesse de prendre de l’ampleur depuis quelques années. En particulier en France, où il bénéficie de la mise en place rapide d’un contexte légal structurant. Celui-ci avait été abordé dans un autre article du blog de Greenspector : https://greenspector.com/fr/le-cadre-legislatif-de-lecoconception-de-services-numeriques/  


En tant qu’entreprise cherchant à réduire les impacts environnementaux et sociétaux du numérique, Greenspector a forcément à cœur d’explorer en détail ce sujet. Nous vous proposons donc ici de reprendre brièvement la loi REEN (Réduction de l’empreinte environnementale du numérique) pour ensuite nous intéresser au RGESN (Référentiel général d’écoconception de services numériques). 

Cadre de la loi REEN 

La loi REEN impose aux villes et intercommunalités de plus de 50 000 habitants de définir leur stratégie liée au Numérique Responsable d’ici 2025. Celle-ci inclut nécessairement des éléments liés à l’écoconception de services numériques. Toutefois, les collectivités se retrouvent souvent confrontées à un premier obstacle : le sujet de l’écoconception de services numériques est encore relativement récent. Ainsi, il peut être difficile de s’y retrouver, qu’il s’agisse de choisir un outil de mesure ou un guide ou référentiel permettant d’avancer efficacement sur le sujet.  

C’est pourquoi un autre volet de la loi REEN est attendu de pied ferme par beaucoup : la définition des obligations légales d’écoconception de services numériques. Celle-ci devrait se faire sous la forme de 2 items :  

  • Le RGESN que nous allons voir plus en détail dans cet article 
  • Un décret d’application qui définit qui est soumis à ces obligations et avec quelles contraintes (quels types de services numériques, quels délais pour la mise en œuvre, quels livrables attendus, etc.).  

Le référentiel pour tous les lier : le RGESN 

Ses origines 

En 2020, l’INR (Institution du Numérique Responsable) réunit une centaine (!) d’experts pour travailler sur un référentiel pour l’écoconception des services numériques. L’objectif : offrir des recommandations qui couvrent tous types de services numériques, sur toutes les étapes du cycle de vie et pour toutes les personnes impliquées. Bref, une approche holistique. Le chantier est colossal mais approche de l’arrivée à l’été 2021. Il donnera naissance au GR491, qui compte aujourd’hui 61 recommandations et 516 critères. Il devrait prochainement être une fois de plus mis à jour. Il constitue à ce jour une référence unique au monde sur laquelle s’appuyer.  

Juste avant la mise en ligne de ce référentiel, la DINUM (Direction interministérielle du numérique) intervient. Son objectif est simple et tout à fait pertinent : s’appuyer sur les travaux réalisés pour pouvoir construire son propre référentiel. C’est ainsi que, à l’automne 2021, deux référentiels voient le jour : le GR491 et le RGESN.  

Le RGESN a déjà été décliné en deux versions : la première proposée par la DINUM puis une nouvelle version proposée en consultation publique par l’ARCEP (Autorité de régulation des communications électroniques, des postes et de la distribution de la presse) fin 2023.  

La version finale a été mise à disposition le 17 mai 2024.  

Son rôle 

Les versions existantes du RGESN référentiel soulignent déjà ses spécificités. Dans le cas de l’accessibilité, le RGAA (Référentiel général d’amélioration de l’accessibilité) permet de contrôler l’accessibilité d’un service numérique en s’appuyant sur des critères issus des WCAG (Web Content Accessibility Guidelines) émises par le W3C (World Wide Web Consortium). Le cadre légal français impose de plus d’afficher la conformité notamment via une déclaration d’accessibilité mais aussi de publier un schéma pluriannuel de mise en accessibilité numérique de l’entité. Tous ces éléments sont consultables ici : https://accessibilite.numerique.gouv.fr/  

Dans le cas du RGESN, la notion de déclaration d’écoconception est incluse directement dans le référentiel et son contenu détaillé au fil des critères. En revanche, ce référentiel ne s’appuie pas sur un référentiel international. En effet, les WSG (Web Sustainability Guidelines : Web Sustainability Guidelines (WSG) 1.0 [EN]) ont été publiées par le W3C après le RGESN. En conséquence, les WSG s’appuient en partie sur le RGESN et non l’inverse.  

Dans le cas du RGESN, l’ambition n’est pas tant de “vérifier” qu’un service numérique est écoconçu que de vérifier qu’une démarche d’écoconception a bien été mise en place. Il devient ainsi possible d’embarquer toutes les parties prenantes sur le sujet (y compris l’hébergeur, les fournisseurs de services tiers mais aussi questionner la stratégie voire le modèle économique) et de s’inscrire dans une démarche d’amélioration continue. Cette approche est ambitieuse mais aussi liée au fait qu’il est compliqué voire impossible d’établir factuellement (via des critères purement techniques) si un service numérique est écoconçu ou non. Il s’agit plutôt de s’assurer qu’il s’inscrit bien dans une démarche d’écoconception.  

Son contenu 

La V1 (celle de la DINUM) 

Dans sa première version, le RGESN propose 79 recommandations réparties en 8 familles :  

Chaque recommandation se présente sous la forme suivante :  

  • Objectif 
  • Mise en œuvre 
  • Moyen de test ou de contrôle 

Ainsi, par exemple, la première recommandation du référentiel a pour nom “1.1 Le service numérique a-t-il été évalué favorablement en termes d’utilité en tenant compte de ses impacts environnementaux ?” 

  • Son “Objectif” est de s’assurer que le service numérique que l’on cherche à écoconcevoir contribue bien aux Objectifs de Développement Durable (ODD). 
  • Pour cela, la section “Mise en œuvre” propose quelques pistes pour vérifier cela ainsi que les éléments à préciser dans la déclaration d’écoconception.  
  • Le “Moyen de test ou de contrôle” résume ce sur quoi s’interroger pour s’assurer que ce critère est satisfait.  

On arrive ici sur l’une des limites de cette version du référentiel : l’objectif est louable mais il manque de moyens concrets de vérification et de mise en œuvre.  

D’autres points sont soulevés par des experts du sujet mais l’outil reste important et nombreux sont ceux qui s’en emparent pour le tester sur le terrain.  

Le référentiel définit certains éléments pour structurer la démarche d’écoconception notamment via :  

  • La désignation d’un référent 
  • La rédaction d’une déclaration d’écoconception (avec tous les détails relatifs à son contenu) 
  • La mise en place d’une stratégie de mesure. En particulier, la définition d’un budget environnemental en visant entre autres une compatibilité plus large du service en termes de navigateurs, systèmes d’exploitation, types de terminaux et connectivité. 

Les outils qui accompagnent le référentiel (une extension de navigateur, des templates de tableur Excel comme grille d’audit) sont les bienvenus mais parfois insuffisants sur le terrain. Notamment pour pouvoir mener plusieurs audits sur des services numériques différents ou pour pouvoir construire un plan d’action complet.  

Afin de tenir compte de tout cela, intervient la version du RGESN proposée par l’ARCEP.[PDF, 1,6 Mo] 

La V2 (celle de l’ARCEP d’octobre 2023) 

Cette version a été soumise en consultation publique deux ans après la première version.  

Elle apporte quelques modifications significatives :  

  • On passe de 79 à 91 critères, notamment via l’ajout d’une section “Apprentissage” (relative au machine learning) qui introduit 5 nouveaux critères. 
  • En plus d’”Objectif”, “Mise en œuvre” et “Moyen de test ou de contrôle”, 3 nouveaux attributs apparaissent :  
  • Niveau de difficulté 
  • Niveau de priorité 
  • Critères de non-applicabilité 

Du fait de l’ajout du niveau de priorité, les recommandations sont au préalable regroupées par priorité. 20 d’entre elles sont identifiées comme prioritaires, en particulier toutes celles liées à la nouvelle section Apprentissage. 

Au-delà de ces apports, la nouvelle version se démarque de la précédente en étant davantage opérationnelle : elle vise à fournir des éléments concrets pour faciliter la mise en place des recommandations.  

On retrouve par exemple le même critère 1.1 mais présenté de façon plus complète :  

  • Action identifiée comme prioritaire et facile à mettre en place, pas de cas de non-applicabilité 
  • Objectif plus ou moins identique 
  • Davantage d’informations de contexte pour aller plus loin dans la démarche de vérification des apports du service numérique en termes d’impacts environnementaux (et sociétaux) 
  • Des outils concrets de contrôle : le questionnaire des Designers Éthiques et l’arbre de conséquences tel que formalisé par l’ADEME (Agence de l’Environnement et de la Maîtrise de l’Energie). On retrouve d’ailleurs cet arbre de conséquences par la suite, dans le critère 2.1, dans le cadre des revues de conception.  

Le critère relatif à la déclaration d’écoconception disparaît. Cette dernière n’en reste pas moins essentielle et son contenu défini au fil de différentes recommandations.  

Un autre élément qui se dessine au fil de cette nouvelle version du référentiel est la mise en place d’une stratégie de mesure via la définition d’indicateurs environnementaux (a minima énergie primaire, émissions de gaz à effet de serre, consommation d’eau bleue et épuisement des ressources abiotiques) ainsi que d’une stratégie pour leur réduction et d’un budget environnemental via des seuils. Cette stratégie de mesure devrait également inclure des éléments relatifs à la vérification du bon fonctionnement du service numérique sur des terminaux et systèmes d’exploitation anciens (voire navigateurs anciens) ainsi qu’en connexion dégradée. Via les modifications apportées à la recommandation 4.4, cette stratégie de mesure doit s’étendre à des parcours utilisateurs.  

C’est notamment sur ce sujet de la stratégie de mesure que Greenspector peut intervenir, aussi bien pour la construction de la stratégie que pour sa mise en place. Via la mesure proprement dite mais aussi la définition des indicateurs environnementaux, leur calcul de même que pour la définition des parcours et des terminaux et conditions de connexion. Ainsi, la démarche peut aujourd’hui s’appliquer aussi bien sur les sites web que les applications mobiles et les objets connectés.  

Certains nouveaux critères font le lien avec le RGPD (Réglement général sur la protection des données), le RGS (Référentiel général de sécurité), l’IoT (Internet of Things donc les objets connectés) et l’open source. Aussi, la recommandation 2.6 impose de prendre en compte les impacts environnementaux de briques logicielles telles que l’IA et la blockchain. Ceci dit, cette recommandation aurait tout à fait pu trouver sa place directement dans la section Stratégie. 

La section Contenus apporte de nombreux éléments sur les formats et modalités de compression des contenus, ce qui permet d’aller encore plus loin sur les aspects techniques d’une démarche de sobriété éditoriale. 

De nouveaux critères apportent également des éléments sur la blockchain mais aussi sur le lancement asynchrone de traitements complexes. 

Tout ceci va clairement dans le bon sens. Nul doute que la consultation publique aura permis de récupérer énormément d’éléments pour tendre vers un excellent référentiel mais aussi les outils qui doivent l’accompagner (en améliorant l’extension de navigateur mais surtout le template Excel pour mener les audits de conformité et les suivre dans le temps via un plan d’action).  

Il ressort d’ores et déjà de ces ajouts et précisions que la réalisation d’un audit RGESN prendra davantage de temps qu’avec la V1, ce qui est important pour prendre en compte les critères dans leur ensemble et ainsi lever le plus possible les éventuelles ambiguïtés. Si les intentions du RGESN V1 étaient déjà bonnes, le référentiel se dote dès sa V2 des éléments nécessaires pour faciliter son adoption et sa mise en œuvre. Cette version témoigne également d’une grande maturité sur le sujet et en fait une ressource donc la lecture permet déjà de faciliter la montée en compétences.  

La version finale (celle publiée le 17 mai 2024 par l’ARCEP)

Cette nouvelle version est disponible ici : Environnement | Arcep

On note déjà quelques modifications cruciales par rapport aux versions précédentes :

  • La disponibilité d’une version en ligne (même s’il manque des permaliens pour chaque bonne pratique) : RGESN – en ligne
  • La disponibilité d’une version en anglais [PDF, 2.8 Mo, en anglais]. A noter que cette version a aussitôt ou presque été référencée dans les Web Sustainability Guidelines du W3C (World Wide Web Consortium).
  • Comme annoncé, les réponses à la consultation publique sont également téléchargeables.

A première vue, cette version finale est plutôt proche de cette qui avait été proposée en consultation publique par l’ARCEP. C’est déjà une très bonne nouvelle pour ceux qui avaient déjà commencé à s’emparer du sujet.

La déclaration d’écoconception doit désormais mentionner des éléments sur presque l’ensemble des critères du référentiel. La nouvelle grille d’audit permet le calcul du score d’avancement. Elle est très dense mais aussi très complète. Il est regrettable de ne pouvoir générer la déclaration d’écoconception qu’au format PDF (le format HTML ou un autre format facilement éditable auraient été préférables). L’idéal pourrait être à terme de proposer un outil similaire à celui proposé pour les audits d’accessibilité : https://ara.numerique.gouv.fr/

On retrouve les 9 familles de critères de la version précédente (la famille « Apprentissage » devient « Algorithmie »). On compte au total 78 critères.

En cause ici, la fusion de certains critères. Le risque est alors de complexifier leur validation. C’est notamment le cas du critère 8.1 qui demande que l’hébergeur partage ses indicateurs environnementaux, ses engagements environnementaux et ratifie le Code de Conduite Européen [lien en anglais]. C’est aussi le cas du 6.5 qui incite à charger progressivement les contenus mais aussi le code, ce qui correspond souvent à deux chantiers techniques différents. Le problème est d’avoir en conséquence des critères plus difficiles à valider mais surtout avec un niveau de granularité inapproprié où l’état d’un critère (typiquement « non-validé ») ne permet pas d’estimer (voire de récompenser) finement les efforts réalisés. Pour ceux qui souhaiteraient creuser davantage ce sujet, je vous invite à explorer la façon dont Opquast définit ses règles.

De nouveaux critères font leur apparition :

  • 5.5 – Le service numérique propose-t-il un mode « écoute seule » pour ses vidéos ?
  • 4.14 – Le service numérique évite-t-il le recours à des procédés manipulatoires dans son interface utilisateur ?
  • 9.5 – Le service numérique optimise-t-il l’occurrence de mise à jour et de réentraînement des modèles en fonction de ses besoins et des cibles utilisatrices ?
  • 9.7 – Le service numérique utilise-t-il une stratégie d’inférence optimisée en termes de consommation de ressources et des cibles utilisatrices ?

L’ancien critère 5.5 (format des fichiers audio) disparaît.

En conséquence, certains critères changent de numéro (le 1.8 sur le référent écoconception devient 1.3) en plus de (nombreux) nouveaux détails ajoutés dans le contenu de certains critères. Ainsi, la validation des critères est davantage guidée. A terme, la publication des déclarations d’écoconception ainsi que les éventuelles listes de diffusion dédiées au sujet (au même titre que ce qui est proposé pour le RGAA) devraient permettre de lever les ambigüités restantes.

De même, certains critères sont déplacés. En particulier, les critères liés aux matériels ciblés (dont système d’exploitation et version de navigateur ainsi que design adaptatif) et au type de connexion utilisable sont regroupés dans la famille Spécifications.

Chaque critère se voit doter des mêmes attributs que sur la précédente version (priorité, difficulté, non-applicabilité, Objectifs, Mise en oeuvre et Moyen de test ou de contrôle), auxquels viennent s’ajouter les métiers concernés. On note au passage une nouvelle répartition des priorités avec 30 critères sur 78 identifiés comme prioritaires.

On note également que le calcul du score d’avancement a été légèrement modifié. En particulier, les critères non-applicables ne contribuent plus directement au score. Sur la version précédente, les critères non-applicables étaient ajoutés au même titre que les critères validés. Ils sont désormais directement retirés du total cible.

Plus généralement, l’appui sur la mesure est de plus en marqué, notamment pour de l’A/B testing (comparer par la mesure les impacts de composants, fonctionnalités ou choix d’implémentation).

Au final, si le nombre total de critères diminue, la complexité de validation de certains d’entre eux augmente et certains regroupement de critères apparaissent discutables.

Il n’en reste pas moins que cette nouvelle version apporte son lot de précisions qui sont les bienvenues.

Qu’attendre de la suite ? 

Le RGESN est appelé à évoluer au fil du temps et peut-être même à trouver une déclinaison au niveau de l’Europe. Il s’agira sans nul doute d’un outil essentiel pour structurer les démarches d’écoconception de services numériques. Ainsi, les pratiques de chacun pourront évoluer sur ce sujet.  

Les outils qui l’accompagnent ont bien progressé dans la version finale mais pourraient aller encore plus loin.

Le référentiel impose entre autres la publication d’une déclaration d’écoconception complète, ce qui permet de sensibiliser plus largement mais aussi de confronter les pratiques. Donc de faire évoluer ce domaine d’expertise.  

La grande inconnue reste le décret d’application à venir, qui doit poser le cadre d’application de la loi REEN en s’appuyant sur le RGESN. Il reste à ce propos plusieurs inconnues. Si l’on se base sur ce qui est fait pour l’accessibilité (et en particulier à la suite du décret d’octobre 2023), des questions restent en effet en suspens :  

  • L’utilisation du RGESN sera-t-elle limitée au web ou étendue à d’autres types de services numériques (applications mobiles, mobilier urbain, etc) ? A minima, il serait important d’embarquer les applications mobiles en complément des sites et applications web. 
  • Quelles seront les sanctions ? 
  • Quels seront les délais pour la mise en place ? 
  • Quelles structures seront concernées ? Les structures publiques seront a priori les premières concernées mais, comme pour l’accessibilité, il serait intéressant de viser aussi les entreprises. Certaines, d’ailleurs, ont déjà commencé à s’emparer du sujet car elles ont reconnu l’intérêt de ce référentiel pour guider leurs démarches d’écoconception de services numériques. 
  • Quels seront les moyens mis en place officiellement pour faciliter la prise en main du RGESN (formation, guides, outils, etc.) ? 

D’autres questions plus générales se posent. Notamment, comment certaines entreprises et certains professionnels feront évoluer leurs pratiques et leurs offres, peut-être pour une partie d’entre eux en évoluant vers des rôles d’auditeurs (voire en formant les futurs auditeurs). Il reste également à espérer que la définition plus complète de l’écoconception de services numériques permettra l’émergence de formations certifiantes (donc de référentiels de compétences validés par France Compétences). 

Un point d’inquiétude subsiste sur la nature déclarative des recommandations. L’avantage du RGAA est de proposer une approche technique voire factuelle (même si certains critères restent parfois sujets à interprétation). Dans le cas du RGESN, les critères sont moins factuels et moins faciles à vérifier, ce qui peut parfois les faire reposer sur l’objectivité de l’auditeur. Reste aussi ouverte la question de la définition de méthodes pour valider certains critères par des mesures. Il reste à voir, à terme, comment le suivi dans le temps du référentiel sera assuré (liste de diffusion par exemple). D’ailleurs, la création d’un « Forum des parties prenantes de l’écoconception numérique » piloté par l’ADEME et l’ARCEP a été annoncée. Il reste à espérer que ce moyen de partage du savoir sera disponible en ligne et plus seulement limité au présentiel sur Paris.

Il sera également intéressant de voir comment tous ces éléments trouveront un écho au-delà de la France et comment le RGESN pourra s’articuler avec l’éventuelle mise en place de nouvelles normes et autres référentiels. 

Et Greenspector dans tout ça ? 

Le RGESN s’impose comme un socle inédit mais surtout indispensable pour améliorer nos propres pratiques et accompagner au mieux nos clients. D’autant plus dans la mesure où ils seront bientôt confrontés à l’obligation d’utiliser ce référentiel.  

Pour cela, plusieurs actions ont été menées à bien :  

  • Intégrer la V1 du RGESN dans notre propre référentiel interne de bonnes pratiques. La version finale du référentiel est prise en compte dès maintenant dans nos accompagnements et sera très bientôt intégrée à notre référentiel de bonnes pratiques. 
  • Incorporer le RGESN dans les formations que nous proposons : présenter le référentiel et son contexte et proposer des activités autour de celui-ci, notamment via la mise en œuvre rapide et encadrée d’un audit RGESN. Les autres référentiels sont également présentés afin de les comparer ainsi que leurs cas d’usage. 
  • Nous effectuons régulièrement des audits RGESN pour des clients et centralisons les informations qui nous permettent de tracer les taux de conformité mais aussi leur évolution dans le temps. De plus, ces audits nous permettent de faire évoluer notre utilisation du RGESN. 
  • Nous nous appuyons systématiquement sur le RGESN lors des audits et revues de design. En complément, notre offre Ecobuild évolue. L’objectif de cette offre est à l’origine d’accompagner une équipe projet dès le début via de la formation, des revues de design, des audits, du monitoring et plus largement de l’expertise. Nous proposons désormais d’appuyer cette offre sur le RGESN, ce qui permet d’aller plus loin encore pour mettre en place ou consolider la démarche d’écoconception de nos clients.  
  • Au-delà de l’approche permettant d’utiliser le RGESN pour auditer/améliorer un site, nous l’utilisons également dans le cadre d’un accompagnement sur une solution de création de sites afin d’avoir des leviers plus globaux mais aussi d’amorcer une réflexion autour des critères RGESN qui peuvent être pris en compte directement à ce niveau. Ce type de raisonnement pourrait par la suite s’étendre à d’autres outils comme WordPress, Drupal et autres CMS. L’intérêt ici est multiple :  
    • Sensibiliser les clients et utilisateurs sur le sujet du RGESN 
    • Rassurer les clients en prenant en charge une partie des critères, ce qui pourrait à terme avoir un caractère différenciant (on peut imaginer à terme des clients qui opteraient vers des solutions “conformes au RGESN” afin de répondre plus facilement aux obligations légales sur le sujet) 
    • Mettre en place les moyens pour que des sites moins impactants soient créés par les utilisateurs/clients  

Conclusion 

Le RGESN s’impose déjà comme un incontournable pour l’écoconception de services numériques mais aussi pour structurer les démarches d’écoconception. En tant que tel, il devrait aider chacun à monter en compétences sur le sujet. Il reste à voir en quoi le cadre légal facilitera cette évolution et induira à terme des changements que l’on espère en profondeur dans les structures concernées. 

Analyse environnementale des outils d’Analytics : utilisation, impact et choix responsable 

Posted on by Maëva Rondeau
Reading Time: 12 minutes

Contexte

L’évolution constante des réglementations, telles que le RGPD (Règlement général sur la protection des données) et la loi REEN (Réduction de l’empreinte environnementale numérique), met en évidence un changement de paradigme dans le monde numérique. Les entreprises et les organisations sont de plus en plus conscientes de l’importance de la conformité réglementaire et de la nécessité de réduire leur impact environnemental. Cela a des implications profondes sur les outils et technologies utilisés, notamment en ce qui concerne les solutions d’analyse web.

D’autant qu’aujourd’hui, ces outils sont massivement utilisés pour scruter nos comportements et leurs impacts sont souvent sous-évalués au regard d’autres sujets comme la publicité par exemple. Ce sont des enjeux forts car le tracking est omniprésent dans les parcours et pages des services numériques. De plus, analyser les zones fréquentées par l’utilisateur via l’analytics permet de cibler les points par lesquels l’utilisateur passe souvent et donc ses impacts principaux. Ce tracking favorise également la détermination de l’utilité des fonctionnalités, favorisant la désactivation des éléments fonctionnels non utilisés. Ainsi, une utilisation judicieuse de l’analytique peut présenter des avantages environnementaux en évitant des impacts généralisés. L’optimisation et la modération dans son utilisation sont cruciales pour minimiser les impacts systémiques.

Bien choisir ses outils et adopter une bonne stratégie de tracking semble donc être un axe clé dans une démarche Numérique Responsable de son service numérique. 

Dans cet article, nous allons explorer leurs impacts environnementaux de différentes solutions destinés au tracking dans les pages web (web tracking) afin d’avoir quelques repères sur l’impact généré par ce tracking mais aussi pouvoir faire un choix de manière avisée sur les solutions à implémenter en regard de leur niveau de sobriété. 

Pourquoi utiliser des Analytics ? 

Le web tracking, également connu sous le nom de suivi web, est l’activité de collecte de données sur les interactions des utilisateurs sur Internet, notamment leurs visites de sites web, leurs clics, leurs comportements de navigation et bien plus encore. Il permet aux entreprises et aux organisations d’analyser et de comprendre le comportement des utilisateurs en ligne, de mesurer l’efficacité de leurs campagnes marketing et de personnaliser les expériences utilisateur. 

L’analyse web se concentre sur la mesure et l’interprétation des données d’utilisation des sites web, offrant ainsi aux exploitants une vision détaillée de l’activité en ligne de leurs visiteurs. Cette pratique englobe un large éventail d’informations, telles que : 

  • Le nombre de visiteurs au fil du temps, distinguant les visiteurs réguliers des nouveaux arrivants, ainsi que la durée de leur visite et les pages consultées 
  • Les sources de trafic : qu’il soit direct (lorsqu’un utilisateur saisit directement l’adresse du site), provenant d’autres sites web, de publicités ou via des moteurs de recherche 
  • La localisation géographique des visiteurs 
  • Les détails techniques, tels que le système d’exploitation, la résolution d’écran et la version du navigateur web des visiteurs 
  • Et encore bien d’autres informations, en fonction de l’outil retenu 

L’idée initiale de l’analyse web est de collecter et analyser ces informations pour un certain nombre de motivations :

  • Personnalisation de l’expérience utilisateur : en rassemblant des données collectées dans des profils d’utilisateurs, ceux-ci sont ensuite utilisés pour personnaliser les publicités. Au lieu de montrer des publicités aléatoires aux utilisateurs, les informations de leur profil, par exemple leur âge, leur sexe et les sites qu’ils ont visités dans le passé, sont utilisées pour choisir un contenu correspondant à leurs intérêts. Les annonceurs peuvent ainsi concentrer leur budget sur les consommateurs susceptibles d’être influencés. 
  • Sécurité : les forces de l’ordre et les services de renseignement peuvent utiliser les technologies de suivi du web pour espionner des individus. L’identification unique des individus sur Internet est importante dans la lutte contre l’usurpation d’identité et pour la prévention de la fraude à la carte de crédit par exemple. Ce sujet reste étroitement lié à la notion de vie privée, en raison des dérives possibles. 
  • Tests de convivialité des applications web ou compréhension du comportement utilisateur : en observant les étapes suivies par un individu lorsqu’il essaie de résoudre une certaine tâche sur une page web, les problèmes d’utilisation peuvent être découverts et corrigés. 
  • Mesure de la performance et des objectifs : l’objectif est de maximiser les revenus, par exemple en évaluant les pages qui génèrent le plus de revenus, les bannières publicitaires qui génèrent le plus de trafic ou les étapes du processus de commande au cours desquelles les clients sont perdus. 

Ces motivations aident à la prise de décision basée sur les données. En effet, les données collectées grâce au web tracking aident les entreprises ou autres entités à prendre des décisions fondées sur des statistiques prouvées. Les informations sur le comportement des utilisateurs aident à identifier les problèmes potentiels, à repérer les opportunités d’amélioration et à orienter les décisions relatives aux investissements en marketing, à l’expérience utilisateur et à d’autres aspects de l’activité en ligne. C’est notamment ainsi que l’impact du SEO (Search Engine Optimization) ou du SEA (Search Engine Advertising) peuvent être évalués. 

Cependant, récupérer une telle masse d’informations engendre à la fois du trafic de données et leur stockage pour une analyse quotidienne ou sur la durée mais implique également des traitements du côté de l’utilisateur, que ce dernier utilise ou non le service numérique en question. Cela se fait aussi au risque de bloquer temporairement le chargement d’un site web ou de ne pas respecter le consentement de l’utilisateur.  

Il est donc nécessaire en tant propriétaire exploitant de sites, de réfléchir à l’impact économique, social et environnemental de ces solutions de tracking. 

S’il est important de collecter des données d’utilisation du service numérique, il faut se contenter de l’essentiel (ce qui va dans le sens du RGPD : Règlement général sur la protection des données). 

D’autant que les services externes ont tendance à alourdir les sites, notamment via des scripts non-désirés collectant par exemple des données utilisateurs. On citera par exemple Google Analytics, Google Recaptcha (détection de bots), Google Maps et FontAwesome.

Quels critères pour faire son choix ?

Alors quels critères prendre en compte lors d’un choix d’outil d’analytics? Quelles sont les solutions qui permettent de faire cette collecte éclairée ? 

Nous ne reviendrons pas sur l’ensemble des critères de besoins d’utilisation en termes d’ergonomie, de support technique, de fonctionnalités, etc. Bien sûr, cela reste un point primordial dans ce choix mais qui diffèrent selon les organisations. 

Il est important de prioriser les outils qui respectent rigoureusement les réglementations en matière de protection des données, telles que le RGPD. Les données sensibles des utilisateurs doivent être sécurisées et traitées de manière confidentielle. 

Lors de la sélection d’outils d’analytics, il est crucial de maintenir une expérience d’utilisation fluide et accessible pour tous les utilisateurs. 

Il est également important de tenir compte de l’empreinte écologique de l’outil. Les données collectées correspondent-elles au besoin énoncé ? L’outil doit également pouvoir évoluer avec les avancées technologiques et les changements dans le paysage de l’analytique. Les serveurs et centres de données ont-ils des sources d’énergie renouvelables et sont-ils gérés durablement ?  

Nous avons d’ailleurs publié un article au sujet des engagements environnementaux des offres d’hébergement web. 

Il peut être difficile d’avoir accès à toutes ces informations mais cela peut aider à affiner la recherche de solutions plus respectueuses. Si l’outil est transparent quant à la manière dont il collecte, traite et utilise les données, cela traduit un engagement des valeurs de l’entreprise. Les utilisateurs doivent avoir une compréhension claire de comment sont utilisées leurs données.

Sélection des solutions et définition du périmètre de mesure

Nous avons pris le soin de sélectionner 3 outils analytics qui sont accessibles gratuitement. Voici notre sélection : 

  • Google Analytics 
  • Matomo
  • Plausible

Méthodologie

Choix des solutions étudiées

Le choix des solutions à analyser a été effectué en prenant en compte plusieurs critères clés, tels que la popularité sur le marché ainsi que son coût. L’objectif était de sélectionner des solutions représentatives du paysage actuel de l’analyse web, afin d’obtenir des résultats pertinents et significatifs. 

Il convient de noter que cette étude expérimentale ne vise pas à promouvoir une solution spécifique, mais plutôt à fournir une évaluation objective basée sur des données concrètes. Les résultats de cette étude pourront servir de référence et d’outil d’aide à la décision pour les acteurs du numérique cherchant à optimiser leurs analyses web tout en tenant compte des enjeux environnementaux et de vie privée. 

Selon les statistiques d’utilisation fournies par HTTP Archive et l’outil d’identification de service tiers de Patrick Hulce, les solutions d’analyse web Google Analytics, Matomo et Plausible sont les plus populaires.

 Google Analytics  Matomo Plausible 
Occurrences d’utilisation 9 887 783 11 610 17 628 

Préparation de l’étude

Dans le cadre de cette étude comparative des solutions d’analyse web, une étape nécessaire consiste à mesurer les performances d’une page de référence qui n’a aucune solution d’analyse web implémentée et de mesurer cette même page avec les pages implémentant les solutions de web tracking. Cette approche nous permet d’évaluer l’impact spécifique de chaque solution en termes de performance et de consommation (énergie, data, …) de la page. Il est important de noter que nous avons délibérément exclu les utilisations plus avancées telles que l’utilisation de Tag Manager ou la configuration avancée des données collectées. De plus, nous avons pris en compte au possible la réalité de l’impact du traitement et du stockage des données collectées côté serveurs, celui-ci étant projeté par notre modèle détaillé dans cet article. Exclue également la partie administrative de ces outils et l’analyse des dashboards. 

Il est à noter que Matomo propose également une solution qui tourne uniquement côté serveur, ce qui permet d’éviter les soucis vis-à-vis du RGPD (Règlement général sur la protection des données) en plus de réduire l’impact environnemental sur la partie cliente.  Nous n’avons pas évalué cette solution. 

Nous avons déployé une page web simple de référence ainsi que 3 pages identiques sur lesquelles nous avons implémenté les 3 solutions respectives. La page de référence est un écran noir avec un texte de police standard et dépourvue de script.

Définition du parcours utilisateur

Pour mesurer l’activité des outils d’Analytics, nous avons établi le parcours suivant :

  • Etape 1 : lancement de l’application du navigateur 
  • Etape 2 : lancement de l’url de la page à mesurer 
  • Etape 3 : pause (30 sec) 
  • Etape 4 : scroll de la page 

Le parcours consiste à lancer l’application du navigateur (ici Chrome) et saisir l’url de la page à mesurer (référence ou avec solution implémentée). Ensuite le parcours déroule en faisant une pause de 30 secondes pour mesurer ce qui se passe en cas d’inactivité de l’utilisateur. Enfin, un scroll est effectué pour détecter l’envoi de requêtes supplémentaires décrivant le comportement de l’utilisateur.

Contexte de mesure

  • Samsung S7, Android 10  
  • Réseau : 3G : ici utilisé pour étendre les performances de tests et permettre davantage de points de mesures 
  • Luminosité : 50% 
  • Tests réalisés sur au moins 5 itérations pour fiabiliser les résultats 

Hypothèses retenues pour les projections environnementales

  • Localisation utilisateurs : 2% France, 98% Monde 
  • Localisation serveurs : 100% monde (à défaut d’avoir les informations pour chacune des applications) 
  • Appareils utilisés : 60% smartphone, 38% PC, 2% tablette
 Google Analytics  Matomo Plausible 
Localisation utilisateurs 98% Monde 2% France 
Localisation serveurs 100% Monde 
Appareils utilisés  60% smartphone, 38% PC, 2% tablette 

L’empreinte environnementale dépend de la localisation des serveurs de l’application, de leur type, de la localisation des utilisateurs et du type d’appareils qu’ils utilisent. Nous avons pris le parti d’étudier tous les utilisateurs ce qui correspond à une répartition de 2% en France et 98% pour le reste du monde. Ce ratio est tiré du rapport Digital report de We are Social. Le rapport mondial précise que 5,16 milliards de personnes sont utilisatrices d’internet et l’édition française indique que 53,96 millions de français sont des utilisateurs d’internet. 

Pour la répartition globale des appareils utilisés, le rapport de l’année précédente énonce une répartition d’environ 60% pour les smartphones, 38% pour les PC et 2% pour les tablettes.

Quel impact environnemental ?

En réalisant nos mesures réelles d’impact environnemental pour chacune des solutions d’analyse web, on peut directement faire le calcul avec les statistiques d’utilisation et l’impact unitaire de l’outil seul sur une visite (chargement, pause et scroll) auquel nous avons soustrait l’impact de la page de référence. L’impact unitaire présenté ci-dessous est le delta entre la page présentée noir avec analytics et la page noire de référence sans analytics implémenté.

Solution Impact unitaire par parcours (g CO2e) Impact pour 10 visites/jour de chaque instance sur une année 
Google Analytics 0,069 2 490 T CO2e 
Matomo 0,012 508 kg CO2e 
Plausible 0,039 2,5 T CO2e 

Pour chacune des solutions d’analytics, nous avons pris l’hypothèse que chacun des sites disposant des solutions a une fréquence de visite de 10 par jour. 

Pour Google Analytics, qui produit 0,069 g CO2e par parcours, génère presque 2 500 tonnes de CO2e à l’échelle de ses 9 887 783 occurrences sur une année. 

Plausible, elle a un impact unitaire au chargement de 0,039 g CO2e donc 2,5 T CO2e sur une année pour 17 628 occurrences. 

Enfin, Matomo qui compte 11 610 occurrences avec un impact de 0,012 g CO2e par parcours produit 508 kg CO2e par an. 

On peut spécifier que l’écart est très faible car les pages sont très sobres mais on ne constate que peu d’écart entre une solution très tournée vers le business comme Google Analytics, et Plausible, censée offrir une solution plus légère en termes d’impact environnemental. La plus grosse part de l’impact se fait au niveau du volume d’utilisation des solutions d’analytics. 

Si la différence au niveau des impacts unitaires est très faible, à même taux d’utilisation, certaines solutions sont bien plus sobres écologiquement.  

L’intérêt est donc de limiter l’usage de ceux-ci et de privilégier les solutions à plus faible impact. 

Par exemple, si les services web utilisant Google Analytics transféraient leur usage d’analytics sur Matomo, l’impact environnemental en serait fortement diminué : si les visites des presque 10 millions d’occurrences de Google Analytics ont un impact de 2 490 T CO2e, en utilisant l’alternative Matomo, cet impact serait de 433 T CO2e. C’est 6 fois inférieur à l’impact de Google Analytics ! 

D’autant que Matomo propose une solution server-side. En dehors des bénéfices coté vie privée en n’ayant aucun intermédiaire niveau collecte des données et performance améliorée pour les visiteurs du site web, les émissions de gaz à effet de serre sont elles aussi diminuées.

Pour comparer

Gerry McGovern, expert dans le domaine de l’expérience utilisateur et auteur de plusieurs livres sur la conception digitale et notamment World Wide Waste, fait le calcul du coût environnemental de l’utilisation de Google Analytics. 

Il estime que : 

  • 21,6 ko de données sont transférés à Google par visite 
  • 50 M de sites utilisent Google Analytics d’après Marketing Land en 2015 (ce qui ne correspond pas à nos estimations) 

Pour un total estimé de 10 visites par jour par site web utilisant Google Analytics, cela représente 500M de pages vues et donc près de 10 800Go transférés par jour ou 4M Go/an. 

D’après ses recherches, 1Go = 4,2 g CO2eq. Ainsi la pollution de la solution Google Analytics s’élève à 16556kg/an. 

On note donc que pour un usage au plus simple de l’outil sur une page très sobre, les estimations de Gerry McGovern sont très faibles en comparaison de l’impact que nous avons mesuré. 

Cependant, cette estimation est réalisée en prenant en compte seulement le poids des données pour faire une projection d’impact carbone, ce qui diffère de notre méthodologie. 

Pour aller plus loin… 

Au-delà des considérations générales d’impact environnemental, une analyse technique approfondie des requêtes générées par les outils d’analytics peut fournir des informations sur la manière dont ces solutions opèrent et interagissent avec les sites web (poids des requêtes, chargement différé, services tiers, etc). 

Voici les valeurs des mesures pour du parcours (chargement, pause, scroll) des 3 pages web auquel nous avons soustrait les valeurs de référence : 

 Performance (s) Vitesse de décharge de batterie (µAh/s) Données mobiles (Ko) 
Google Analytics 2,3 21 955 145,9 
Plausible 1,6 3 604 29,1 
Matomo 0,4 15 272 9,2 

Sans grande surprise, c’est Google Analytics le plus consommateur et le moins performant qui est suivi de Plausible puis de Matomo. En effet, sur 150Ko de données échangées sur le parcours, le fichier Javascript chargé d’envoyer la requête vers le serveur de Google pèse plus de 90 ko. C’est 66 fois plus élevé que Plausible. Matomo compte lui, plus de 40ko pour cette requête.

Page avec GA implémenté – Inspecteur Firefox, onglet network
Page avec GA implémenté – Inspecteur Firefox, onglet network 

D’autre part cela laisse penser que plus le fichier JS est volumineux, plus il récupère d’informations sur l’utilisateur même si cela ne constitue pas nécessairement une corrélation directe. D’autres facteurs, tels que les traitements côté client ou l’optimisation du code, peuvent également influencer la performance et la collecte de données.

Ici, un gros volume de données est transmis à la plateforme Google Tag Manager qui n’est pourtant pas implémenté dans le code. L’écart est flagrant avec Matomo qui transfère un faible volume de données par rapport à son concurrent. 

De plus, Google Analytics et Matomo transfèrent tous deux des cookies.

A la base, les cookies ont été conçus pour un simple besoin : conserver les informations de connexion d’un utilisateur sur un site donné, ils ne sont donc pas problématiques en soit, mais ils servent en fait à bien des besoins publicitaires, marketing et autres pour permettre un contenu plus ciblé en fonction du comportement de l’utilisateur.

Ainsi, il est important de regarder la taille et la date d’expiration de ces cookies. Pour Google, les cookies se démarquent facilement avec leur préfixe _ga tandis que les cookies de Matomo se repèrent grâce au préfixe _pk. Les cookies de Google ont une taille totale de 80 octets et expirent seulement 13 mois plus tard ce qui correspond à la date d’expiration des cookies publicitaires. Ceux de Matomo comptent pour 56 octets et un des 2 cookies chargés expire le jour même. Dans les 2 cas on peut questionner la pertinence de ces cookies sur des pages aussi sobres. 

On l’a vu, Google Analytics est la solution la moins performante et la plus impactante écologiquement, d’autant que la requête vers Google Analytics est chargée en asynchrone. Bien que le chargement asynchrone soit une bonne pratique de performance courante pour ne pas retarder l’affichage de la page, cela peut en effet masquer l’impact environnemental réel de cette solution. 

Dans notre processus de mesure, nous avons cherché à obtenir une vue complète du chargement de Google Analytics. Il est important de souligner que Google a mis en place diverses stratégies pour minimiser son impact sur la performance des sites web. Cependant, malgré ces efforts, nos données de mesure révèlent que les impacts en termes d’énergie et de transfert de données restent plus élevés pour GA par rapport à ses concurrents.

Les limites de notre étude 

Les résultats de notre étude présentent des limites. Les pages mesurées sont premièrement très simples en termes de fonctionnalités et de visuels ce qui implique un scénario simple également ce qui n’est pas forcément représentatif des sites web disposant d’outils d’analytics. De plus, de par leur sobriété, ces pages sont très légères et les mesures effectuées peuvent donc entrer dans la marge d’erreur de notre outil de mesure. Enfin, nous n’avons que peu d’informations sur les facteurs variants de l’impact environnemental (localisation des serveurs par exemple). 

Pour conclure 

En conclusion, notre étude sur les différents outils d’analyse web met en évidence des nuances intéressantes quant à leur impact environnemental. Il est important de noter que nos analyses ont été effectuées sur une page sobre et un cas d’utilisation très basique, ce qui limite considérablement les écarts d’impact. Cependant, même dans ce contexte, nous constatons des volumes de données élevés avec des techniques d’efficience différant certains chargements. Ceci pour toujours plus d’analyse du comportement utilisateur avec un fort impact environnemental en prime. 

Sources : 

https://wearesocial.com/fr/blog/2023/01/digital-2023/ :  rapport digital 2023, We are social  

https://wearesocial.com/fr/blog/2023/02/digital-report-france-2023-%f0%9f%87%ab%f0%9f%87%b7/ : rapport digital 2023 France, We are social 

https://wearesocial.com/fr/blog/2022/01/digital-2022-une-nouvelle-annee-de-croissance-exceptionnelle/ : rapport digital 2022, We are social 

https://gerrymcgovern.com/ : Gerry Mc Govern 

https://gerrymcgovern.com/calculating-the-pollution-cost-of-website-analytics-part-1/ : Article Calculating the pollution cost of website analytics 

https://www.thirdpartyweb.today/

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

Posted on by Laurent DEVERNAY
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, basé sur une utilisation standard du composant mesuré (voir plus loin). 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.

Nous avons ici pris le parti de mesurer les éléments choisis en fonction de l’usage qui en est fait :

  • Image (brute et allégée), animation (CSS), image animée (GIF) : chargement et pause
  • Fichier audio, vidéo (BD et HD) : chargement, pause, lecture
  • Fil Facebook, tableau, texte : chargement, pause, scroll, pause
  • Carte interactive : chargement, pause, zoom, pause

L’idée générale est d’aller au-delà du simple chargement de la page pour refléter ce qu’en font les utilisateurs mais aussi d’aller vers d’autres métriques liées aux impacts environnementaux.

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é avec quelques écarts liés aux contenus choisis pour chaque catégorie. 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 ne sont la plupart du temps pas négligeables. En particulier, dans le cas de la lecture de vidéo et d’audio (comme on pourrait s’en douter) mais aussi pour le fil Facebook.

É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 le fil Facebook qui, bien que moins impactant que la vidéo, l’est davantage que les autres éléments (notamment le lecteur audio).

Fil Facebook

La page contenant le fil Facebook est parmi les plus impactantes 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. En-dehors d’un pic fort de CPU, corrélé à du transfert de données, les pics CPU 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é. On le voit ici dans le cas de Facebook mais sachez que la plupart des réseaux sociaux procèdent ainsi (à ce propos, je vous recommande de tester l’intégration d’un contenu Linkedin…).

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/ 

Différences de consommation énergétique pour les contenus

Le texte apparaît plus impactant pour l’énergie que la carte interactive 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 la carte interactive 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é (qui apparaît plus impactant que la carte interactive).

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. 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). Aussi, il s’agit là (au risque d’insister) d’être au plus proche du comportement des utilisateurs.

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, assez volumineux en soi (même si cela dépend une fois de plus de l’élément choisi).

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.

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. Après les vidéos, on trouve le fil Facebook puis l’image animée. 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 une fois de plus 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 du CPU, 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. À 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 (de loin) 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 l’évoquer plus haut).

Concernant les équivalents en émissions de gaz à effet de serre, l’animation et l’image animée sont les plus impactants, suivis par le fil Facebook (en raison de sa forte consommation de données et de CPU). À 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.

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. GIF animé 
  8. Fichier audio 
  9. Vidéo basse définition
  10. Image brute  
  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. Fichier audio 
  6. Image brute 
  7. Vidéo basse définition 
  8. Vidéo haute définition 
  9. Intégration d’un contenu de réseau social 
  10. GIF animé 
  11. Animation 

Impact environnemental des sites web des exposants au GreenTech Forum 2023

Posted on by Thibault TUFFIN
Reading Time: < 1 minute

À l’occasion du GreenTech Forum 2023, Greenspector a évalué l’écoscore de sobriété et de performance des sites web des partenaires et exposants de l’évènement.

L’ambition du GreenTech Forum est de promouvoir le numérique responsable afin de permettre aux organisations publiques et privées de réduire leur impact environnemental. L’écosystème du numérique des partenaires présentera ses solutions, des retours d’expériences. Mais qu’en est-il de sites web de tous les acteurs partenaires en terme d’impact de la vitrine de l’offre de service ?

Résultats de l’évaluation de la sobriété des sites exposants du GreenTech Forum

En moyenne, un site exposant du GreenTech Forum obtient un impact carbone de 0,33 gEqCO2. 37 / 62 sites web se trouvent en dessous de cette moyenne, ce qui traduit une très bonne tendance générale mais avec une forte variation. Le premier de ce classement consomme 3,5 fois moins que le dernier site.

Métriques évaluées ou mesurées par Greenspector
(60 secondes)		Moyenne
Impact carbone (g eqCO2)0,33 gEqCO2
Ressource en eau (Litres)0,05 Litres
Occupation des sols (cm²)0,61 cm²
Consommation d’énergie (mAh)5,27 mAh
Données échangées (Mo)2,61 Mo
Mémoire consommée (Mo)786 Mo
Nombre de requêtes web55
ClassementversionEcoscoreEnergieDonnées échangéesMémoireRequêtesCarbon Impact (gEqCO2)Empreinte Eau (Litres)Empreinte Sol (cm2)
1https://kleis.ch/894,790,55560,80140,230,040,53
2https://commown.coop/774,410,37781,0680,200,040,49
3https://hubblo.org/fr/774,880,15554,14260,240,040,55
4https://www.specinov.fr/764,530,25680,25160,210,040,50
5http://lewebvert.fr/764,770,20828,38200,230,040,53
6https://fresquedunumerique.org/754,360,89676,91330,240,040,49
7https://thegreencompagnon.com/744,680,47861,89140,220,040,52
8http://laruchequicode.com/744,620,40722,78230,230,040,52
9https://www.treebal.green/744,580,43819,20270,230,040,52
10https://smart-consultant.fr/734,560,65659,92150,220,040,51
11https://greenspector.com/fr/accueil/734,680,42638,41360,250,040,53
12https://www.fruggr.io/735,191,42849,56160,260,050,58
13https://algorila.com/724,810,32769,02180,230,040,53
14https://nuageo.fr/724,870,35853,77210,230,040,54
15https://greenoco.io/714,881,62760,39390,280,050,56
16https://www.appyuser.com/715,342,50690,71520,330,060,61
17https://aguaro.io/fr704,091,09655,25380,240,040,47
18https://infogreenfactory.green/694,590,38784,44220,220,040,51
19https://aeonics.io/694,460,51715,91260,230,040,50
20https://conserto.pro/694,750,33733,29180,230,040,53
21https://evea-conseil.com/fr684,516,48724,53980,420,060,55
22https://www.esaip.org/664,541,11720,32410,260,040,52
23https://www.chg-meridian.fr/665,271,99872,71270,290,050,59
24https://lecko.fr/greet/664,832,46927,45570,320,050,56
25https://www.planet-techcare.green/664,862,14865,60630,320,050,57
26https://groupe-isia.com/654,980,87618,44230,250,050,56
27https://www.wedolow.com/655,051,37873,91420,290,050,58
28https://www.luminess.eu/655,063,02699,61380,310,050,58
29https://mind7.com/645,191,40980,03280,270,050,58
30https://www.cisco.com/site/fr/fr/index.html644,561,80768,97800,320,050,54
31https://mavana.earth/634,750,81691,11530,280,050,55
32https://www.alterway.fr/634,800,70790,25530,280,050,55
33https://connexing.co/634,934,50670,17410,340,050,57
34https://www.fairphone.com/fr/625,103,29836,86700,360,060,60
35https://www.monsitevert.fr/605,261,25797,13240,270,050,59
36https://www.preo-ag.com/fr605,442,32942,09570,340,060,63
37https://carbonscore.fr/595,831,67691,48160,290,050,65
38https://www.apl-datacenter.com/fr/584,831,58855,30750,320,050,57
39http://www.magellan-consulting.eu574,926,75847,681430,500,070,62
40http://ijo.tech/565,251,62885,77300,280,050,59
41https://www.capefoxx.com/565,312,36708,23490,320,050,61
42http://agence-lucie.com/565,532,99558,45990,410,060,66
43https://www.soprasteria.com/fr/accueil555,189,43895,83350,430,060,60
44https://holomea.com/614,962,77964,7934,000,300,050,56
45https://www.formulemagique.com/535,451,05888,90840,350,060,64
46https://www.easyvirt.com/515,552,51900,221020,400,060,66
47https://www.colibris.app/506,822,61894,97590,400,070,78
48https://www.weeedoit.com/495,322,52847,771030,390,060,64
49https://www.fujitsu.com/fr/496,117,54816,09950,510,070,73
50https://www.ecologic-france.com/475,332,15941,95330,300,050,60
51https://www.wecount.io/476,723,15719,61430,390,070,76
52https://sopht.com/465,322,81852,101280,430,070,65
53https://www.sentrysoftware.com/437,9615,15935,47870,710,100,94
54https://www.scaledynamics.com/416,813,77876,22830,450,070,79
55https://www.hp.com/fr-fr/home.html386,332,02774,44720,390,070,73
56https://www.technogroup.com/386,2912,71756,05910,600,080,75
57https://www.escapegameenligne.com/376,223,66819,641340,490,080,76
58https://alternative-group.com/367,606,29772,08880,540,080,89
59https://harington.fr/355,937,05987,21740,460,070,70
60http://www.ecodair.org/347,913,71730,611030,520,090,92
61https://greenly.earth/fr-fr296,475,64944,982450,670,100,85

Pour chacun de ses sites web, mesurés sur un smartphone S9 (Android 10), les mesures ont été réalisées avec Greenspector Studio, permettant la réalisation de tests automatisés. Les mesures ont été réalisées le 15 novembre 2023.

Détail des scénarios :
– Chargement de la page d’accueil du site web
– Inactivité du site web en premier-plan
– Scroll
– Inactivité du site web en arrière-plan

Chaque mesure est la moyenne de 3 mesures homogènes (avec un écart-type faible). Les consommations mesurées sur le smartphone donné selon un réseau de type wifi peuvent être différentes sur un PC portable avec un réseau filaire par exemple. Pour chacune des itérations, le cache est préalablement vidé.

Consultez notre méthodologie d’évaluation de l’impact environnemental.

Quel est l’impact environnemental d’ouvrir ou non les liens dans un autre onglet ?

Posted on by Laurent DEVERNAY
Reading Time: 6 minutes

Introduction

Les plus anciens se souviennent peut-être d’une époque lointaine où les navigateurs ne proposaient pas encore d’ouvrir du contenu dans plusieurs onglets. L’apparition de cette possibilité a fait naître un débat qui n’a jusque-là pas trouvé de réponse définitive : faut-il ou non ouvrir les liens par défaut dans un autre onglet ?

Les chiffres clés

Les résultats obtenus pour l’ouverture des liens dans un autre onglet sont synthétisés ainsi :  
L’impact global est de 1.9 gCO2eq, 0,4 L d’eau consommée et 4.1 cm2 d’occupation des sols.  

Les résultats obtenus pour l’ouverture des liens dans le même onglet sont synthétisés ainsi :  
L’impact global est de 1.8 gCO2eq, 0,3 L d’eau consommée et 3.9 cm2 d’occupation des sols. 

Sur un site web, le comportement par défaut lors du clic sur un lien est de l’ouvrir dans l’onglet où se trouve déjà l’internaute. Pour revenir à la page initiale, le plus simple est donc d’utiliser la fonctionnalité de retour en arrière du navigateur (ou celle du téléphone). Ceci peut être vu par certains internautes comme un désagrément. Au moins deux solutions sont possibles :  

  • Côté utilisateur : garder la touche Ctrl appuyée pour ouvrir le lien dans un autre onglet ou cliquer avec la roulette de la souris ou autre 

Dans tous les cas, target=”_blank” doit s’accompagner d’attributs supplémentaires pour des raisons de sécurité, de la façon suivante :  

<a href=”https://greenspector.com/fr/le-petit-bout-de-la-lorgnette/” target=”_blank” rel=”noopener noreferrer”> 

Les valeurs “noopener” (https://html.spec.whatwg.org/multipage/links.html#link-type-noopener [EN]) et “noreferrer” (https://html.spec.whatwg.org/multipage/links.html#link-type-noreferrer [EN]) permettent de s’assurer des informations de contexte ne sont pas transmises au clic sur le lien. En apparence redondantes, elles sont ici mentionnées ensemble afin de prendre en charge certains navigateurs (très) anciens : https://stackoverflow.com/a/57630677 [EN]. 

La discussion sur le fait d’ouvrir ou non les liens dans un autre onglet (ou dans une autre page) ne date pas d’hier et les arguments sont nombreux. On en retrouve une bonne partie ici : https://www.badsender.com/en/2023/01/27/target-blank-links-email/ [EN] 

Du point de vue des impacts environnementaux, il y a également matière à discussion. Ouvrir dans un autre onglet pourrait conduire à multiplier inutilement les onglets ouverts, donc à augmenter les impacts environnementaux (en sollicitant davantage le terminal). Inversement, ouvrir le lien dans la même page pourrait rallonger le parcours utilisateur sur le site d’origine en risquant de lui faire perdre sa progression après être revenu en arrière (saisie d’informations, lecture en cours d’un article, etc).  

Comme toujours, il est important de revenir aux vraies raisons qui motivent ce choix, notamment s’il s’agit d’améliorer les statistiques de son propre site en le gardant ouvert pendant que l’utilisateur explore d’autres liens (ce qui n’est pas une bonne façon de faire). 

À défaut de trouver la réponse idéale à cette problématique, nous avons décidé d’avoir recours à la mesure pour apporter un éclairage supplémentaire.  

Méthodologie 

Une page de test aussi sobre que possible a été créée. Elle comporte deux liens menant vers la même page. Le premier s’ouvre dans le même onglet, le deuxième dans un autre onglet.  

En vue de la mesure, deux scripts GDSL ont été créés pour automatiser le parcours et effectuer les mesures :  

  • Un script qui consiste à cliquer sur le lien qui s’ouvre dans un autre onglet puis revenir au premier onglet (trois fois de suite) 
  • Un script qui consiste à cliquer sur le lien qui s’ouvre dans le même onglet puis revenir en arrière via le navigateur directement (trois fois de suite) 

Dans chacun de ces parcours, on retrouve les mêmes étapes :  

  1. Chargement de la page de test 
  1. Pause de 30s sur la page de test 
  1. Chargement de la page destination (clic sur le lien) 
  1. Pause de 30s sur la page destination 
  1. Retour en arrière 
  1. Pause de 30s sur la page d’origine 

    Les étapes 3 à 6 sont répétées 3 fois chacune, dans cet ordre.  

Dans tous les cas, la page de destination du lien est la même. L’idée était ici de choisir une page légère mais avec suffisamment de contenu pour que les mesures soient significatives. Nous avons donc choisi un article du blog Greenspector : https://greenspector.com/fr/le-petit-bout-de-la-lorgnette/ Au-delà de la première itération, le cache limite les requêtes effectuées en s’appuyant sur les éléments stockés côté client (comme pour toute page web pour peu qu’elle soit correctement configurée). 

Les mesures sont effectuées sur la dernière version en date du navigateur Chrome sur un téléphone Samsung S9 avec la luminosité réglée à 50%, en WIFI. Une dizaine d’itérations de mesures ont été effectuées pour chaque script.  

Les mesures ont été effectuées entre le 24 et le 29 août 2023. Suite à ces mesures, un dashboardcampagne (agrégation des données issues des outils Greenspector) a été généré, notamment pour pouvoir comparer les étapes de mesure et calculer un Ecoscore global basé sur les scores de Performance, Données transférées et Energie.  

En vue de la projection environnementale, on pose les hypothèses suivantes :  

  • 100 % des utilisateurs et serveurs en France 
  • 100% de serveurs complexes 
  • 51% des utilisateurs sur smartphone, 3% sur tablette, 46% sur PC (stats moyennes pour la France) 

Résultats 

Les résultats obtenus pour l’ouverture des liens dans un autre onglet sont synthétisés ainsi :  

L’impact global est de 1.9 g CO2e, 0,4 L d’eau consommée et 4.1 cm2 d’occupation des sols.  

Les résultats obtenus pour l’ouverture des liens dans le même onglet sont synthétisés ainsi : 

L’impact global est de 1.8 g CO2e, 0,3 L d’eau consommée et 3.9 cm² d’occupation des sols. 

Dans un premier temps, il apparaît donc que l’ouverture des liens dans le même onglet est légèrement plus avantageuse d’un point de vue environnemental. En particulier, il apparaît que le parcours est beaucoup plus court lors de l’ouverture dans le même onglet. En effet, il est plus facile de revenir en arrière via le bouton présent sur les téléphones Android que de passer par la liste des onglets ouverts.  

On peut supposer que le fait de garder des onglets ouverts soit davantage impactant du point de vue de la batterie du téléphone. Creusons désormais cela plus en détail.  

Le diagramme suivant présente la consommation énergétique des différentes étapes :  

En bleu, on trouve l’ouverture de liens dans un autre onglet. En noir, l’ouverture dans le même onglet.  

Les étapes du parcours avec ouverture de liens dans le même onglet sont quasi systématiquement moins impactantes. En particulier, ceci est vrai pour les étapes de pause, ce qui semble confirmer l’impact des onglets multiples ouverts lors d’une pause sur l’onglet courant. On retrouve ici le fait que le retour en arrière est beaucoup plus simple via le bouton du téléphone que via la liste des onglets.  

Pour l’ensemble des étapes mesurées, on constate très peu de données transférées. Toutefois, pour un utilisateur ayant recours au retour en arrière, il est important de bien intégrer le bfcache (https://web.dev/bfcache/ [EN]). Cette optimisation des navigateurs permet de fluidifier les retours en arrière et en avant. 

Conclusion 

Si l’on se base sur les métriques et projections environnementales pour le cas de test choisi ici, il apparaît plus avantageux d’ouvrir par défaut les liens dans le même onglet. Il faut en revanche bien garder en tête qu’il ne faut pas que l’internaute perde ainsi sa progression (saisie en cours ou lecture d’une page longue, par exemple). De plus, en vue d’un retour arrière ultérieur, le bfcache doit être correctement implémenté. Dans ce cas, libre à l’utilisateur s’il le souhaite d’ouvrir malgré tout le lien dans un autre onglet via les raccourcis mis à sa disposition. Il reste néanmoins indispensable d’informer sur le comportement des liens s’il ne s’agit pas du comportement par défaut (ainsi que de la langue de la page destination si elle diffère de la page d’origine). Pour conclure, n’oublions pas que l’accessibilité et la qualité (telle que mise en œuvre via les règles d’Opquast) doivent rester une priorité lors de l’intégration de liens.  

Classement 2023 des impacts environnementaux des sites web de 31 écoles d’informatique

Posted on by Laurent DEVERNAY
Reading Time: 6 minutes

Introduction

En mars 2022, nous vous proposions un classement des sites web des 187 grandes écoles et universités. Concernant les écoles d’ingénieur françaises, il en ressortait les résultats suivants : 

Quitte à se focaliser sur les écoles d’informatique, mentionnons la loi REEN (Réduction de l’empreinte environnementale du numérique) : https://www.vie-publique.fr/loi/278056-loi-15-novembre2021-reen-reduire-empreinte-environnementale-du-numerique#faire-prendre-conscience-de-limpact-environnemental-du-num%C3%A9rique 

Cette loi impose en effet, depuis quelques mois déjà, d’intégrer un module sur l’écoconception de services numériques dans les formations d’ingénieur en informatique. À ce jour, le module en question ne semble pas avoir été intégré dans toutes les écoles mais des ressources peuvent d’ores et déjà y aider :  

Ce sujet est essentiel. Un nombre croissant d’entreprises cherchent spécifiquement à recruter des profils au fait de l’écoconception et la demande est de plus en plus forte chez les étudiants.  

Afin de créer le classement des sites web des écoles d’informatique, nous avons fait le choix de nous appuyer sur le classement suivant : https://etudiant.lefigaro.fr/etudes/ecoles-ingenieurs/classement-informatique/  

Nous sommes donc partis sur un échantillon de 31 sites d’écoles.  

Les mesures ont été effectuées en septembre 2023, via un benchmark sur les pages d’accueil de chacun de ces sites. Ceci ne saurait en aucun cas témoigner des impacts de l’ensemble du site ni des engagements environnementaux des établissements mais permet déjà d’avoir un premier point d’entrée.

Des erreurs sont survenues pour la mesure de deux sites :  

En conséquence, ces sites ont été retirés du classement. Nous avons toutefois noté les éléments suivants :  

  • Le site de l’INSA Toulouse a bénéficié d’une refonte depuis notre classement de 2022. Il en ressort une réduction des données transférées et, a priori, une réduction des impacts sur les terminaux des utilisateurs. Pour autant, a minima, quelques optimisations rapides sont encore possibles.  
  • Le site de Télécom Nancy apparaît plutôt lourd, notamment en raison du manque d’optimisation de certains contenus mais surtout d’un manque de sobriété (dont témoigne par exemple l’intégration de plusieurs contenus de réseaux sociaux).

En savoir plus sur la méthodologie et comment Greenspector évalue l’empreinte environnementale d’un service numérique. 

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

  • 100 % des utilisateurs et serveurs localisés en France 
  • 50% sur smartphone 
  • 3 % sur tablette 
  • 47 % sur PC 

Synthèse et chiffres clés 

Suite aux mesures et à la projection environnementale, nous obtenons le classement suivant (en triant par impact GES) : 

URLEcoscore GlobalRequêtes HTTPEnergie (mAh)Données (Mo)Impact GES (gEqCO2)Empreinte Eau (L)Empreinte sol (cm_)
https://www.cpe.fr/61695,762,130,770,131,46
https://www.cesi.fr/72314,633,350,790,141,54
https://www.efrei.fr/61625,302,130,840,151,62
https://www.insa-centrevaldeloire.fr/fr/58864,523,020,840,141,53
https://www.isima.fr/73754,852,130,850,151,61
https://www.polytech.universite-paris-saclay.fr/62365,072,280,850,151,70
https://www.utt.fr/57455,163,440,870,151,68
https://www.esiee.fr/65945,251,780,890,151,67
https://www.esiea.fr/60555,652,210,900,161,76
https://www.insa-rouen.fr/66814,684,000,920,161,69
https://www.3il-ingenieurs.fr/52325,961,510,930,171,90
https://polytech.univ-cotedazur.fr/53534,976,060,960,161,75
https://www.ensiie.fr/50905,295,920,980,161,72
https://www.insa-lyon.fr/541315,144,010,980,161,71
https://enseirb-matmeca.bordeaux-inp.fr/fr50905,427,121,020,171,77
https://www.polytech-lille.fr/43586,295,901,110,192,07
https://www.enseeiht.fr/fr/index.html381035,476,241,120,191,99
https://www.sup-galilee.univ-paris13.fr/48576,842,041,140,202,28
https://ensimag.grenoble-inp.fr/391005,8011,871,220,202,01
https://www.polytech.sorbonne-universite.fr/42726,424,401,240,222,39
https://isen-mediterranee.fr/471286,2410,591,280,212,11
https://www.ensicaen.fr/40538,023,011,280,232,58
https://www.isep.fr/361106,2619,821,420,222,12
https://polytech.univ-tours.fr/40985,9228,491,520,222,04
http://www.enssat.fr/51645,8239,191,570,211,82
https://www.utbm.fr/262827,5213,731,660,262,49
https://www.utc.fr/2013910,9018,842,060,343,50
https://www.epita.fr/367113,894,892,120,384,30
https://cytech.cyu.fr/46695,9967,852,140,261,97

On remarque ici que les métriques ont tendance à être plutôt élevées. Un calcul rapide des moyennes vient confirmer cela :  

  • Ecoscore global : 48,9 
  • Requêtes HTTP : 83,93 
  • Énergie (mAh) : 6,16  
  • Données transférées (Mo) : 9,83 

Selon le site HTTP Archive (à partir d’un échantillon de plusieurs millions de sites web mesurés régulièrement), la moyenne globale sur mobile est de 67 requêtes HTTP et 2,18 Mo (source : https://httparchive.org/reports/page-weight [EN]). Les moyennes pour les sites mesurés ici sont donc bien au-dessus, en particulier pour le poids moyen des pages qui est dans notre cas 4 fois plus élevé. Il semble donc y a voir un souci global pour ce qui est de l’application des principes de sobriété numérique.

Inversement, la page la plus légère (3IL) nécessite le transfert de 1,51 Mo de données (et 32 requêtes HTTP). Ceci en fait un site tout de même assez lourd.  

Nous verrons dans un premier temps les 3 sites les mieux notés puis les 3 sites les moins bien notés. L’idée n’est pas de les explorer de façon exhaustive mais de fournir quelques éléments raîdes d’analyse.

Le Top 3 

CPE

A première vue, la page d’accueil apparaît plutôt légère et sobre. Elle présente peu d’erreurs d’accessibilité, en-dehors de plusieurs soucis de contraste de couleurs.  

On déplore toutefois l’intégration d’un chatbot qui apparaît au bout de quelques instants sous forme de popup.  

CESI

La volonté de sobriété apparaît clairement à la consultation du site : peu d’images, des aplats de couleurs et un focus sur l’expérience utilisateur.  

Il est d’autant plus regrettable que le manque d’optimisation des images augmente considérablement le poids de la page. En particulier, deux d’entre elles font plus d’1 Mo. Il serait également intéressant, dans un second temps, d’optimiser les polices de caractères. Voir notre article à ce sujet.  

EFREI 

Ce site apparaît plutôt lourd, notamment en termes d’images (qui ne sont pas toutes suffisamment optimisées) et via l’intégration de nombreux fichiers pour les polices. En résumé, même si le site est ici bien classé, il n’est pas exempt de défauts.

Le Flop 3 

CY Tech 

Tout d’abord, on constate que la page met beaucoup de temps à charger.  

Le volume de données transférées fournit déjà une première piste d’explication : quasiment 70 Mo en tout ! En regardant de plus près, on compte 14 images pesant plus d’1 Mo, l’une d’entre elles faisant à elle seule plus de 16 Mo. Des efforts de sobriété (mais aussi d’optimisation des contenus) apparaissent donc indispensables. En particulier, le site est très lourd visuellement et peu optimisé pour le mobile. Certaines animations apparaissent superflues (compteurs, parallaxe, etc).  

EPITA 

Le site apparaît relativement peu lourd par rapport aux autres sites du classement.  

Toutefois, on note une importante sollicitation de la batterie du terminal de mesure. L’ouverture du site sur une vidéo en lecture automatique et en boucle explique cela en grande partie, en plus d’être une très mauvaise pratique du point de vue de l’accessibilité. Une autre explication réside dans le grand nombre de services tiers intégrés sur cette page.  

À noter que les images sont cette fois plutôt légères mais trop nombreuses. D’autant plus que certains fichiers sont chargés plusieurs fois.  

UTC 

L’internaute arrive ici directement sur un carrousel en défilement automatique, ce qui reste à éviter aussi bien pour la sobriété que pour l’accessibilité.  

Lors de la mesure de cette page, la durée est limitée à 70s environ. Lorsque l’on reste suffisamment longtemps sur cette page, on arrive à presque 70 Mo transférés pour plus de 600 requêtes. Les requêtes vers Google et Youtube sont très nombreuses.  On découvre lors du défilement de la page de nombreuses vidéos Youtube intégrées directement, d’autres carrousels en défilement automatique mais aussi une vidéo en lecture automatique.  

Afin de visualiser ces requêtes, on a recours ici à une RequestMap (un outil créé par Simon Hearne : https://simonhearne.com/ [EN]) : 

Les requêtes directement liées aux domaines du site sont regroupées en bleu. Toutes les autres correspondent à des services tiers. Même s’ils ne sont pas prépondérants en poids, les services tiers représentent ici plus de la moitié des requêtes. Il serait donc important d’avoir recours à un audit plus poussé sur le sujet afin d’établir un plan d’action portant aussi bien sur la sobriété (limiter le nombre de services tiers) que sur l’efficience (intégrer les services tiers de la façon la moins impactante possible).

Conclusion 

Les sites d’école d’informatique françaises n’apparaissent donc pas particulièrement sobres. Des bonnes pratiques d’écoconception pourraient permettre d’améliorer progressivement la situation. Alors même que ces écoles sont tenues de former leurs étudiants à l’écoconception de services numériques, ce pourrait être l’occasion d’intégrer durablement cette démarche. Ainsi, l’audit du site existant pourrait être intégré dans le module sur l’écoconception proposé aux élèves. Au-delà du fait de réduire les impacts environnementaux de leurs sites web (et de répondre à une obligation légale), ce serait un bon moyen de préparer encore mieux les étudiants au monde du travail.  

  

Publication des Web Sustainability Guidelines du W3C

Posted on by Laurent DEVERNAY
Reading Time: 2 minutes

Le W3C

Le W3C (World Wide Web Consortium : site officiel https://www.w3.org/ [EN]) est un organisme définissant les standards (tels que les éléments techniques régissant le fonctionnement du langage HTML, par exemple) et lignes directrices du web. Il a été créé par Tim Berners-Lee en 1994. 

Dans le cadre du Numérique Responsable, on connaît notamment le W3C pour la publication des WCAG (Web Content Accessibility Guidelines : https://www.w3.org/WAI/standards-guidelines/wcag/ [EN]). Ces règles pour l’accessibilité des contenus web font référence à l’échelle mondiale. Elles servent en particulier de base pour le RGAA (Référentiel Général d’Amélioration de l’Accessibilité : https://design.numerique.gouv.fr/accessibilite-numerique/rgaa/ ), qui sert lui-même de base pour la mise en place de la réglementation sur ce sujet en France.  

Donner un cadre à la sobriété numérique

La sobriété numérique et l’écoconception de services numériques prennent de plus en plus d’importance mais peinent à définir leur cadre d’application. En France, le contexte législatif se précise de plus en plus, en particulier via la loi REEN (Réduction de l’Empreinte Environnementale du Numérique : https://www.vie-publique.fr/loi/278056-loi-15-novembre2021-reen-reduire-empreinte-environnementale-du-numerique ) et le RGESN (Référentiel Général d’Ecoconception de Services Numériques : https://ecoresponsable.numerique.gouv.fr/publications/referentiel-general-ecoconception/ ).  

Nous reviendrons très prochainement sur ce cadre législatif pour vous en proposer une synthèse ainsi que des perspectives.  

Toujours est-il que nous avons accueilli avec beaucoup d’enthousiasme l’annonce par le W3C de leur intention de travailler sur le sujet de l’écoconception de façon concrète (https://www.w3.org/community/sustyweb/2022/04/19/sustainability-recommendations-working-group/ [EN]). J’ai d’ailleurs eu la chance de prendre part à ce groupe de travail (avec Thierry Leboucq). L’objectif était de produire des guidelines (lignes directrices) pour pouvoir par la suite définir des standards. C’était l’occasion de faire quelques belles rencontres et de confronter les pratiques de sobriété numérique avec des experts du monde entier. Bravo à Tim Frick et Alexander Dawson pour avoir encadré tout cela, ainsi qu’à tous ceux qui ont contribué aux sous-groupes dédiés à des thématiques précises :  

  • UX Design 
  • Web Development 
  • Hosting & Infrastructure (dont j’assurais le suivi) 
  • Product & Business Strategy 
  • Metrics 

La sortie officielle d’une première version des Web Sustainability Guidelines ouvre ces travaux à tous : https://www.w3.org/community/sustyweb/2023/09/07/web-sustainability-guidelines/ [EN]. Vous y trouverez 93 recommandations et 232 critères de succès. Tout ceci s’aligne avec les normes GRI (Global Reporting Initiative : https://www.globalreporting.org/how-to-use-the-gri-standards/gri-standards-french-translations/ ).

Et maintenant ? 

La publication des WSG constitue un jalon historique pour appliquer la sobriété numérique au web. Mais gardons bien en tête que ce n’est que le début. Cette publication a avant tout pour but de récolter les retours des experts puis de voir comment définir ce cadre de façon encore plus précise. Il est aussi souhaitable que ces travaux servent de base pour que le sujet soit adopté plus largement et que des pays puissent s’en servir afin de définir un cadre législatif. Ce socle apparaît également essentiel pour former et sensibiliser sur le sujet mais aussi en tant que support pour des démarches de réduction des impacts environnementaux des sites web.  

Chez Greenspector, nous avons l’intention de continuer à contribuer à ce référentiel, notamment en apportant nos retours, basés sur notre expérience concrète de l’écoconception de services numériques. Très prochainement, ces guidelines seront intégrées aux bonnes pratiques sur lesquelles nous nous appuyons au quotidien, ainsi qu’aux sessions de sensibilisation à l’écoconception que nous proposons.

Ainsi, nous pourrons voir plus en détail comment concilier les WSG avec les référentiels existants (RGESN et RG491 principalement).

 

Bonne pratique : optimiser les polices de caractères

Posted on by Laurent DEVERNAY
Reading Time: 4 minutes

Depuis quelques années, l’utilisation de polices de caractères sur le web a explosé (aussi bien en nombre de polices existantes que de sites y ayant recours).

Comme souvent, le Web Almanac est une mine d’informations, notamment via le chapitre dédié aux polices. On y apprend notamment que les deux principaux fournisseurs de polices web sont Google puis Font Awesome, cette dernière consistant en la mise à disposition d’icônes. Au-delà du coût potentiel sur la performance et les impacts environnementaux, certains pays ont déjà établi que ceci pouvait contrevenir au RGPD (Règlement Général sur la Protection des données).  

Proportion de sites web utilisant des web fonts 

Voyons désormais quelles bonnes pratiques peuvent permettre de réduire l’impact des polices de caractères sur le web.  

Référentiels existants 

Les polices sont mentionnées dans la famille UX/UI du RGESN (Référentiel Général d’écoconception de services numériques) :  

  • 4.10 – Le service numérique utilise-t-il majoritairement des polices de caractères du système d’exploitation ? 

On les retrouve également dans le GR491 (Guide de référence de conception responsable de services numériques) :  

Enfin, les 115 bonnes pratiques d’écoconception web les mentionnent également :  

Bonnes pratiques 

Objectifs 

Afin de réduire les impacts des polices de caractères, plusieurs bonnes pratiques sont applicables :  

  • Privilégier les polices standard/système : ainsi, on évite des requêtes supplémentaires 
  • Utiliser un format de compression optimal (aujourd’hui, il s’agit du format WOFF2). Des outils en ligne comme Everything Fonts peuvent assurer cette conversion. 
  • Limiter le nombre de variantes utilisées ou privilégier une police variable 
  • Ne charger que les caractères réellement utilisés (par exemple via un subset) 

Quand ? 

Ces bonnes pratiques doivent intervenir dès la conception visuelle du service afin de privilégier les polices standard autant que possible. Si ce n’est pas possible, limiter alors le nombre de variantes à charger. Enfin, lorsque les polices sont intégrées, privilégier le format woff2, les polices variables et s’assurer de ne charger que les caractères ou langues réellement utilisés.  

Facilité de mise en œuvre 

Si le site est déjà en ligne, il peut être compliqué de modifier la police utilisée. En revanche, les optimisations techniques sont faciles à mettre en œuvre (format, police variable, Subset).

Gains estimés

Ces bonnes pratiques permettent de diminuer le nombre de requêtes HTTP ainsi que le volume de données transférées.

Cas particuliers 

Google Fonts

Afin d’éviter les problèmes avec le RGPD, il est recommandé d’héberger les polices Google soi-même.
Si des versions variables ne sont pas disponibles pour toutes, certains créateurs proposent ces versions gratuitement. En complément, l’API Google permet directement de créer un Subset avec une requête de ce type : https://fonts.googleapis.com/css?family=Montserrat&subset=latin 

Icônes

Les polices d’icônes sont plutôt répandues. Les utiliser directement peut impliquer de charger de nombreuses icônes qui ne seront pas forcément utilisées. Le mieux dans le cas des icônes est d’utiliser directement chacune d’entre elles au format SVG. Sous cette forme, elles peuvent être intégrées directement dans le HTML (sans requête HTTP supplémentaire). Si une police d’icônes doit être conservée pour des raisons pratiques, limiter le fichier aux icônes réellement utilisées.

Cas d’étude 

Dans le cadre de l’accompagnement des équipes de Docaposte pour leur site institutionnel, les polices de caractères constituent comme souvent un chantier à part entière.  

Les polices utilisées ici sont deux Google Fonts : Montserrat et Barlow. Le site étant déjà en ligne, il est compliqué d’imposer le recours à des polices standard.  

Afin d’éviter de contrevenir au RGPD mais aussi pour améliorer la performance du site, les polices sont hébergées directement sur les serveurs de Docaposte. Dans un second temps, la mise en place d’un sous-domaine dédié pourrait permettre de s’affranchir des cookies.  

L’intégration sous la forme d’une police variable nécessite quelques ajustements supplémentaires, notamment au niveau des feuilles de style. En attendant, il a été décidé d’appliquer deux bonnes pratiques :  

  • Proposer les fichiers au format woff2 plutôt que woff 
  • Le site n’étant proposé qu’en français et en anglais, un Subset a été créé ne conservant que l’alphabet Latin. 

Requêtes initiales 

Requêtes après Subset et conversion au format woff2 

Le format woff2 offre une compression supérieure en moyenne de 30% par rapport au format woff  et encore plus par rapport à d’autres formats comme ttf.  

Ce changement de format, combiné au Subset, a permis de faire passer le poids total des polices d’un peu plus de 400 ko à un peu moins de 90 ko soit une réduction de 78% environ.  

Aller plus loin 

Le DOM comme métrique de suivi de sobriété du web ?

Posted on by Olivier PHILIPPOT
Reading Time: 3 minutes

Nous avons validé l’usage de l’énergie dans nos outils (se référer à notre article sur la mesure de la consommation énergétique et notre article sur le calcul d’impacts). Nous utilisons et mesurons cependant d’autres métriques comme entre autres le CPU. Cette métrique peut être complexe à mesurer et certains outils ou équipements utilisent d’autres éléments plus accessibles techniquement. Le CPU est utilisé pour mesurer l’empreinte des ressources côté terminal. En effet, nous avons réalisé des mesures sur plusieurs centaines de sites et il apparait clairement que le CPU est la métrique prépondérante si l’on veut analyser l’impact d’un logiciel. C’est pour cela que tous les modèles qui utilisent les données échangées pour calculer l’impact du terminal ne sont pas cohérents. On privilégiera des modèles basés sur le CPU comme par exemple Power API.

Il faut cependant être rigoureux dans l’analyse de cette métrique car il peut y avoir des biais d’interprétation (Nous en avons parlé dans un article précédent : critique sur le CPU). La critique doit être encore plus importante sur la façon d’obtenir cette métrique, et plus particulièrement dans le cas de modélisation du CPU. C’est le cas par exemple des méthodes de projection du CPU dans le web à partir des éléments du DOM. 

Cela part de l’hypothèse que la structure du DOM impacte la consommation des ressources sur le terminal. Plus le DOM est complexe, plus il est nécessaire de le traiter par le navigateur et plus cela utilise de ressources (CPU et RAM). En fonction de cette complexité l’impact environnemental sera plus ou moins élevé.

En supposant qu’on valide l’hypothèse de la corrélation entre complexité du DOM et impact environnemental, la métrique souvent utilisée est le nombre d’éléments. Un DOM avec beaucoup d’éléments sera peut-être complexe mais pas systématiquement. Pour prendre en compte la complexité du DOM, il faudrait prendre en compte l’architecture du DOM, en particulier la profondeur, le type de nœud (tous les nœuds n’ayant pas le même impact pour le browser…). Le choix du nombre d’éléments du DOM est donc discutable.

Mais est-ce que le choix de la complexité du DOM est une hypothèse viable ? On peut avoir plusieurs critiques sur cela. 

Le DOM est une structure brute qui n’est pas suffisante au navigateur pour afficher la page. Le style est utilisé avec le DOM pour créer le CSSOM, une complexité du style peut donc impacter grandement le CSSOM, même avec un DOM simple. Ensuite le layout tree est une structure qui va permettre de gérer l’affichage (Les typos, les tailles…), cette gestion est beaucoup plus complexe à traiter pour les navigateurs. 

Un DOM peut être modifié après sa création. On va parler de reflow et repaint. Le navigateur va recalculer le layout et différentes choses. Ceci peut arriver plusieurs fois lors du chargement et après ce dernier. La profondeur du DOM (et pas le nombre d’éléments) peut influencer la consommation de ressources mais pas uniquement; le chargement et l’exécution de code JS sont également à prendre en compte.

Indépendamment du DOM, la consommation de ressources peut être impactée par différents traitements sur le terminal. En particulier, tous les traitements JS qui vont s’exécuter au chargement de la page. Dans le web, le principal coût est actuellement sur le CPU. On peut avoir un DOM avec 100 éléments (c’est à dire peu) et une usine à gaz JS.

Les animations graphiques vont augmenter la consommation de ressources sans forcément impacter le DOM. Même si la plupart de ces traitements sont pris en charge par les GPU, l’impact sur les ressources existe et n’est pas négligeable. On peut aussi mettre dans cette catégorie le lancement de vidéos, de podcasts (et plus généralement les fichiers médias) et de publicités.

Il existe aussi bien d’autres sources de consommation de ressources : Requêtes réseau non regroupées, fuite mémoire. 

L’usage du DOM doit donc être utilisé avec beaucoup de précaution. Il est plutôt utilisable comme une métrique de qualité logicielle qui indique la “propreté du HTML”. Réduire le nombre d’éléments DOM et simplifier la structure du DOM pourra être une bonne pratique de sobriété mais pas un KPI de réduction de la sobriété ou de calcul du CO2.

Je contacte l’équipe Greenspector

Quel est l’impact environnemental du top 30 des sites web de Presse Quotidienne Française ?

Posted on by Aurélie Boulais
Reading Time: 11 minutes

– Édition 2023 –

Beaucoup de questions se posent aujourd’hui sur l’impact environnemental de la presse et des médias numériques. Au-delà des contenus, la publicité, le tracking des données s’intègrent à la fois pour satisfaire aux exigences économiques d’un modèle gratuit ou semi-gratuit et à une meilleure connaissance de l’utilisateur pour mieux le servir (centre d’intérêt). Par ailleurs, la presse et les médias utilisent souvent des contenus riches pour illustrer leurs article (vidéos, images …). Tout cela implique souvent une surconsommation des titres numériques à chaque passage d’un lecteur.  

Il y a un an, nous avons réalisé un classement de l’impact carbone du top 100 des sites web les plus visités de la presse quotidienne française sur mobile. Il a eu pour objectif de quantifier l’impact de la presse en ligne via le mobile. En effet, cet impact prend a priori de plus en plus d’ampleur chaque année. 

Pour ce nouveau classement, nous avons décidé de réduire l’étude à 30 sites et de faire évoluer notre démarche, en prenant en compte un article par site (datant du 13/04/2023) en plus de la page d’accueil. Cela est d’autant plus intéressant car les utilisateurs passent la majeure partie du temps sur les articles.  

Nous nous sommes basés sur le classement du site ACPM (réalisé en fonction des filtres de l’année dernière : Site Web Fixe Actualités / Informations Actu / Information Généraliste). Les benchmarks ont été réalisés avec un Samsung Galaxy S9 sans carte Sim et avec 3 itérations. Les mesures ont été réalisées en Mars et Avril 2023.  

Les résultats en bref

Les pages d’accueil de site web les moins impactantes :

  • Le monde
  • Actu.fr
  • Ouest-France

Les pages d’accueil de site web les plus impactantes :

  • Rfi
  • France24
  • L’Est Républicain

Les pages d’articles les moins impactantes :

  • Huffingtonpost
  • Actu.fr
  • France Info

Les pages d’articles les plus impactantes :

  • Sud Ouest
  • La nouvelle république
  • Rfi

Voici la liste des sites sur laquelle l’étude est basée : 

20 Minutes.frLa-croix.comLeprogres.fr
Actu.frLadepeche.frLetelegramme.fr
Bfmtv.comLanouvellerepublique.frLexpress.fr
Cnews.frLaprovence.comLiberation.fr
Estrepublicain.frLavoixdunord.frLindependant.fr
Fixe Rfi.frLedauphine.comL'Obs.com
France24.comLeFigaro.frMidilibre.fr
Francebleu.frLeMonde.frOuest-france.fr
Franceinfo.frLeParisien.frParisMatch.com
Huffingtonpost.frLePoint.frSudouest.fr

Découvrez la méthodologie d’analyse Greenspector.

Limites de la mesure 

Une des problématiques rencontrées concerne les modalités d’accès au contenu. En effet, certains articles sont beaucoup plus courts car leur accès complet est payant. 25 % des sites dans le classement sont concernés. Cela influe les résultats du benchmark pour ces sites web en avantageant indirectement les sites restreignant l’accès à leur contenu.  

De même, certains sites ne sont chargés que partiellement tant que l’internaute n’a pas fait son choix pour la popup de consentement relatif à la collecte des données (RGPD). Ceci n’empêche pas forcément le scroll sur la page. Plus généralement, on ne peut que regretter que de tels artifices viennent nuire à l’expérience utilisateur.  

En particulier, c’est ce que l’on constate sur le premier du classement pour les pages d’accueil (Le Monde).

Voici par exemple la RequestMap (un outil créé par Simon Hearne) pour lemonde.fr avec les requêtes vues par l’outil de mesure (Greenspector, Webpagetest ou autre) on peut apercevoir qu‘il y a peu de requêtes et services tiers au premier abord.

Voici pour comparaison la RequestMap complète pour lemonde.fr, construite à partir d’un fichier HAR obtenu via Chrome après acceptation de tous les cookies par l’internaute.  

Il apparaît donc que les données transférées et requêtes effectuées sont démultipliées après recueil du consentement de l’internaute. Ce phénomène est constaté sur un grand nombre de sites similaires. Voici quelques ressources complémentaires sur la pub en ligne, étroitement liée à la presse en ligne :  

Ce qu’il faut aujourd’hui retenir de tout cela, c’est que les résultats de mesures proposés ici (et via d’autres outils disponibles par ailleurs) offrent une vision parfois tronquée de la réalité des sites de presse en ligne. Nous avons toutefois déjà ici un bon aperçu de ce qui pourrait être amélioré sur certains de ces sites et de leurs impacts respectifs.  

Analyse des résultats au niveau global

 Pour les pages d’accueil des 30 sites mesurés, la moyenne d’impact carbone par page et par minute est de 0.44 gEqCO2. Cette moyenne s’élève à 0.42 gEqCO2 pour les articles.   

Sur l’analyse des pages d’accueil, 19 sites se positionnent en dessous de cette moyenne. Alors que sur la mesure des articles, 23 sites sont en dessous.  

Nous avons remarqué une différence de résultat entre les 7 sites proposant un accès restreint à leurs articles (parfois payant ou obligation de créer un compte pour poursuivre la lecture) et les 23 autres où les articles sont 100% accessibles.   

Les pages d’accueil qui sont en accès restreint ont en moyenne un impact de 0.42gEqCO2. Pour les sites en accès gratuit, la moyenne d’impact sur les pages d’accueil est de 0.44 gEqCO2. 

Cette différence est expliquée par l’affichage de nombreuses publicités sur certains sites aux contenus gratuits, qui alourdissent considérablement les pages.  

En raison d’un contenu plus riche, les pages d’accueil consomment en général légèrement plus que les articles (on constate une augmentation de plus 0.02 gEqCO2 en moyenne).   

Voici une synthèse des différentes métriques mesurées sur les pages d’accueil de ce classement des sites web Presse consultés sur mobile :   

Métriques  Moyenne  Minimum  Maximum  
Impact CO2 par page / min en gEqCO2  0.44 0.26  1.10  
Ecoscore Greenspector  54  31  72  
Énergie consommée en mAh  7.2  4.58  21.98  
Données échangées en Mo  2.63  0.68  7,27  
Nombre de requêtes web   76 30  169  

Si l’on compare ces résultats avec notre analyse précédente sur les pages d’accueil, nous pouvons constater une légère dégradation des résultats avec une moyenne de 53 pour l’écoscore  contre 54 aujourd’hui. En moyenne, les trois métriques d’énergie de données consommées et de nombre de requêtes ont baissés. L’énergie consommé par les pages d’accueil est passé de 4.22 mAh en moyenne contre 7.2 mAh, les données consommées sont passées de 2.31 Mo contre 3.63 Mo, et le nombre de requête de 78 à 76. 

Voici une synthèse des différentes métriques mesurées sur les pages articles de ce classement des sites web presse consultés sur mobile :  

Métriques  Moyenne  Minimum  Maximum  
Impact CO2 par page / min en gEqCO2   0.37  0.21  1.19 
Ecoscore Greenspector   58  24  75 
Énergie consommée en mAh   7.15  4.62  21,26 
Données échangées en Mo   4.52  0.58  31.42 
Nombre de requêtes web   66 26 213 

Pour l’étude, ces articles ont été comparés avec des articles venant des mêmes sites de presse et datant du 05/07/2022. Le bilan est assez négatif car nous pouvons constater en moyenne un Ecoscore plus faible sur les articles récents avec un score de 58 contrairement à 59 pour les articles du 05/07/2022. L’énergie consommée par ces pages a aussi augmenté, passant de 6.58 mAh en juillet 2022 à 7.15mAh pour les articles d’avril 2023.  De même, le volume de données échangées a augmenté, passant de 3.46 Mo en juillet 2022 à 4,52 Mo pour les articles d’avril 2023. Par contre, nous pouvons observer un plus faible impact en équivalent CO2 pour les articles d’avril 2023 avec un score de 0.37 gEqCO2 et 0.42 gEqCO2 pour les articles de juillet 2022. De même, on constate une amélioration sur le nombre de requêtes échangées passant de 68 en moyenne pour les articles de juillet 2022 à 66 pour les articles d’avril 2023. 

Les pages d’accueil

Top 3 (les pages d’accueil les moins impactantes)

Le Monde

1 er  – Le Monde 

Le Monde obtient la première place grâce à ses efforts pour réduire l’impact environnemental de son site web. On remarque une bonne application des pratiques de sobriété, notamment sur la gestion des images. De même, les données et requêtes sont optimisées grâce au chargement progressif de la page. Ainsi, le contenu n’est chargé que lorsqu’il devient visible. Ceci dit, le site peut encore être amélioré au niveau des services tiers qui ne sont pas détectés dans les mesures et qui sont pourtant très présents. En effet, la collecte des données après acceptation des cookies augmente considérablement le nombre de requêtes vers des services tiers (voir plus haut) et a pu poser précédemment des soucis de respect de la vie privée et de sécurité. 

Actu.fr

2 ème – Actu.fr 

La page web utilise le chargement progressif de la page. Cela permet de limiter le nombre de requêtes. De plus, actu.fr utilise majoritairement les bons formats pour ses images. Cependant, actu.fr est envahi de publicité. Cela réduit l’accessibilité pour les utilisateurs en plus d’augmenter considérablement le nombre de requêtes. De même que pour le premier du classement, les mesures n’ont pris en charge que ce qui se passe avant acceptation des cookies. 

Ouest France

3 ème  – Ouest-France 

Ouest- France charge progressivement sa page et utilise un très bon format d’image, comme AVIF ou Webp. Cependant, la publicité augmente le nombre de requêtes, augmentant donc l’impact environnemental du site. Les mesures se limitent ici aussi à ce qui se passe avant acceptation des cookies.

Conclusion pour le top 3 des pages d’accueil 

Nous pouvons remarquer que le top 3 utilise les bonnes pratiques de chargement progressif de la page et de formats d’image. Cependant, les mesures ont été effectuée via la page de cookies et, si l’on regarde de plus près, nous pouvons constater que ces sites utilisent beaucoup de publicités. Cela augmente considérablement le nombre de requêtes vers des sites tiers et donc l’impact environnemental. 

Flop 3 (pages d’accueil les plus impactantes) 

RFI

Rfi

Le site comporte beaucoup d’images, une par article mis en avant. Cependant, nous soulignons la bonne pratique du format des images en webp. Les polices d’écritures ne sont pas des polices standard, ce qui augmente l’impact environnemental du site. Au final, le nombre de requêtes est considérable et les erreurs affichées dans la console nombreuses.

RequestMap de la page d’accueil de rfi.fr 

France 24 

France24

La structure et les constats sont similaires pour cette page. 

Nous sommes effectivement, comme pour le site de France24 sur des sites issus de France Médias Monde donc avec une architecture et une structure similaires. 

L’Est Républicain

L’Est Républicain

Le site est long à entièrement charger car il effectue énormément de requêtes vers des sites tiers au chargement de la page. De plus, il lance des vidéos automatiquement. Le contenu de la page est très long par rapport aux autres sites, ce qui explique son classement.

Conclusion pour le flop 3 des pages d’accueil 

Le principal problème des sites dans le flop 3 est le nombre de requêtes. Notamment effectué au sein même du site et pouvant ralentir le chargement de la page. En plus de cela, nous pouvons déplorer un manque de sobriété et parfois même le lancement automatique de vidéos. 

Passons maintenant aux articles. 

Les articles 

Top 3 (articles les moins impactants) 

Huffingtonpost

1er  – Huffingtonpost 

La sobriété générale du site est un bon point qui lui vaut sa première place au classement. Le site utilise peu de contenu vidéos ou image dans ses articles et charge progressivement le contenu de sa page. Mais c’est surtout que contrairement à beaucoup de sites de presse, Huffingtonpost n’a pas de pubs sur ses articles, et cela se vérifie au niveau de ses services tiers qui sont très peu nombreux. Cela réduit fortement l’impact du site. Outre ceci, le format des polices utilisées est bien, mais le site en utilise beaucoup trop. Il génère aussi trop de fichiers au format JavaScript servant à la mise en forme du site. Enfin, l’on retrouve un point très impactant qui est de charger une vidéo et la lancer automatiquement sur une page. Ainsi, même la première place de ce classement peut encore fortement réduire son impact environnemental. 

Actu.fr

2 ème – Actu.fr

On retrouve ici les optimisations constatées sur la page d’accueil. Cependant, la page est largement occupée par de la publicité dont une vidéo qui se lance automatiquement. Ce dernier point est particulièrement problématique du point de vue des impacts environnementaux et de l’accessibilité en plus de nuire à l’expérience utilisateur. 

En-dessous de l’article, on trouve de nombreux contenus annexes, pour la plupart publicitaires. On compte alors plus de 40 vignettes menant vers des articles internes et externes. Malgré cela, les requêtes se font majoritairement en interne, ce qui réduit l’utilisation des services tiers. 

France Info

3 ème – France Info

L’article est à première vue assez sobre, mais la fin de l’article est constituée de beaucoup d’images pour les recommandations d’articles. Ce nombre d’image peut facilement est réduit mais les images ont au moins le bon point d’être au format Webp qui est parmi les formats d’images les moins impactant.  

Ce qui permet de donner cette place à cet article, c’est le nombre de requêtes. En, effet, le site a peu de requêtes avant les recommandations d’articles par rapport aux autres sites de presse et charge progressivement sa page. Au vu du nombre de requêtes, le nombre de services tiers est plutôt conséquent mais cela reste raisonnable par rapport aux autres sites de presse.  

Conclusion pour le top 3 des articles 

Les articles présents dans ce Top 3 ont pour point commun d’utilisés peu les services tiers et de charger progressivement le contenu afin de limiter le nombre de requêtes. Les articles sont plutôt sobres mais le contenu supplémentaire de recommandation alourdit ces pages d’articles.  

Flop 3 (articles les plus impactants)

Sud Ouest

Sud Ouest

Cet article est long contrairement à beaucoup d’autres articles du classement. Cependant, s’il est le plus impactant du classement, c’est qu’il utilise beaucoup d’images au format JPEG et PNG, de scripts JS et CSS pour la mise en forme, de polices, et contiens des fichiers audios, et des publicités. Le site n’est pas du tout sobre et utilise beaucoup de requêtes et de services tiers.  

La Nouvelle République

La Nouvelle République

L’article contient beaucoup d’images, de scripts et de référencements vers d’autres articles. Ces pratiques alourdissent l’impact environnemental du site. Avec ceci, le site utilise énormément de requêtes et de services tiers. Cela augmente l’impact environnemental mais réduit aussi les performances du site qui prend plus de temps à charger. Un bon point à soulever est le nombre de polices utilisés qui est au nombre de 1 et au format woff2. 

RFI

Rfi

L’article est sobre en raison de son système d’abonnement qui en dissimule une bonne partie. Il y a peu d’images mais la plupart sont au format png qui n’est pas forcément idéal du point de vue de l’efficience. Nous soulignons toutefois que l’image la plus impactante est au format Webp qui lui est l’un des meilleurs formats de compression. On retrouve ici de très nombreuses requêtes et la multiplication des services tiers. 

Conclusion pour le flop 3 des articles 

Le principal problème des sites dans le flop 3 est le nombre de requêtes, notamment vers des services tiers. On peut aussi ajouter le manque de sobriété de ces pages et se questionner sur les besoins fonctionnels. 

Conclusion 

Lorsqu’on s’intéresse aux impacts environnementaux des sites de presse en ligne, on constate que des bonnes pratiques d’efficience sont déjà largement adoptées, notamment pour ce qui est de la gestion des images (qui restent un vecteur essentiel pour attirer l’internaute et appuyer le propos).  

Toutefois, des efforts de sobriété restent à fournir, en particulier en ce qui concerne le recours aux services tiers mais aussi l’usage de la vidéo (et dans une moindre mesure des polices de caractères). Comme vu plus haut, ceci est étroitement lié au modèle économique qu’on peut trouver derrière ces journaux. Le modèle en question, au-delà de son impact environnemental considérable, démontre une fois de plus ses effets négatifs sur l’expérience utilisateur, notamment via la collecte de données personnelles et les risques de sécurité que ceci peut entraîner.  

A noter également que les améliorations visant à réduire les impacts environnementaux de ces sites auraient d’autant plus d’effet qu’ils sont lus pour certains plusieurs centaines de milliers de fois chaque jour.  

Il serait par ailleurs intéressant de regarder de plus près l’accessibilité des sites en question (si cela n’a pas déjà été fait), celle-ci étant fondamentale pour que chacun puisse avoir accès aux informations liées à l’actualité (ce qui constitue une part essentielle de la vie de citoyen). 

Découvrez nos solutions

Tableaux des résultats

Classement du top 30 des sites de presse selectionnés – Page d’accueil

URLEcoscoreRequestsData (Mo)Énergie (mAh)Carbon impact (gEqCO2)Water impact (Litre)Surface impact (m2)
https://www.francetvinfo.fr/72610,684,580,270,050,59
https://www.ouest-france.fr/72501,024,750,360,060,65
https://www.lemonde.fr/72341,274,720,490,070,63
https://www.huffingtonpost.fr/65681,204,980,440,081,02
https://actu.fr/64300,945,270,600,111,28
https://www.nouvelobs.com64570,865,421,000,182,23
https://www.parismatch.com/58781,755,040,450,070,73
https://www.lepoint.fr/63552,054,890,280,050,53
https://www.20minutes.fr/59791,915,530,310,050,58
https://www.letelegramme.fr/60702,515,150,470,081,01
https://www.lindependant.fr/68672,445,250,360,060,63
https://www.lexpress.fr/551012,385,360,530,080,76
https://www.lavoixdunord.fr/63552,834,950,510,080,72
https://www.midilibre.fr/63652,895,330,320,050,57
https://www.ladepeche.fr/51702,905,360,580,101,22
https://www.bfmtv.com/551693,984,910,560,090,99
https://www.liberation.fr/57523,025,790,260,050,54
https://www.leprogres.fr/49682,496,360,430,070,77
https://www.francebleu.fr/571143,216,070,310,050,57
https://www.leparisien.fr/41832,846,590,390,070,73
https://www.laprovence.com/401614,175,710,350,060,60
https://www.sudouest.fr/47842,727,190,390,060,64
https://www.cnews.fr/51310,819,230,360,060,66
https://www.la-croix.com/41571,758,960,340,060,61
https://www.lefigaro.fr/311422,348,330,350,060,62
https://www.lanouvellerepublique.fr/indre471524,826,170,310,050,62
https://www.ledauphine.com/40732,5410,740,280,050,55
https://www.estrepublicain.fr/39702,6211,330,340,060,60
https://www.france24.com/fr/34386,5620,141,100,202,43
https://www.rfi.fr/fr/35447,2721,980,450,080,83

Classement du top 30 des sites de presse selectionnés – Page article

Site de presseEcoscoreRequestsEnergy (mAh)Data (Mo)Carbon impact (gEqCO2)Water impact (Litre)Surface impact (m2)
laVoixDuNord75515,142,100,310,050,59
ouestFrance74495,000,870,280,050,57
franceInfo72444,850,580,270,050,55
HuffingtonPost71424,620,760,260,050,53
leMonde71335,111,840,290,050,58
actu69275,120,920,260,050,57
bfmtv69554,740,880,280,050,55
liberation68355,371,960,300,050,61
lePoint68585,302,120,330,050,61
obs66575,290,780,300,050,61
leParisien61395,282,170,310,050,60
leTelegramme61585,984,670,400,060,69
parisMatch60815,262,200,360,060,62
lesxpress60945,162,560,380,060,62
laDepeche60526,084,540,400,060,70
leDauphine58496,282,280,360,060,72
independant58475,584,220,370,060,64
leProgres58506,402,440,370,060,73
estRepublicain56616,453,500,410,070,74
franceBleu55785,752,800,390,060,67
cnews53268,340,660,390,070,92
laCroix52745,892,280,380,060,69
midiLibre52486,004,970,400,060,69
leFigaro521455,732,490,460,070,71
20minutes481075,853,000,430,070,70
rfi442821,266,911,040,192,34
laProvence431646,935,060,580,090,85
france24423619,796,190,980,182,19
laNouvelleRepublique329011,2931,421,140,151,32
sudOuest2421314,6428,531,380,191,75