Catégorie : Sobriété du web

Optimiser son site pour l’impression

Reading Time: 2 minutes

À l’arrivée du numérique et en particulier du web, nombreux sont ceux qui annonçaient que tout ceci permettrait de limiter grandement le volume d’impressions. En réalité, c’est l’inverse qui s’est produit car ces nouvelles technologies, couplées à la démocratisation des imprimantes personnelles, ont permis à tout un chacun d’imprimer plus facilement. Au passage, ceci peut être vu comme une illustration de l’effet rebond ou paradoxe de Jevons

Il convient de garder en tête que l’impression est encore utilisée à des fins personnelles ou professionnelles pour la transmission ou le stockage d’informations.  

Nous verrons donc ici comment faire pour que l’impression du contenu d’un site web soit aussi peu impactante que possible. Nous n’aborderons pas ici l’imprimante, le papier ou les encres utilisées (imprimer en qualité brouillon, en recto-verso, plusieurs feuilles par page, etc). Nous allons plutôt nous intéresser aux bonnes pratiques de conception qui peuvent rendre l’impression moins impactante et le contenu imprimé plus lisible.

Pour commencer, regardons ce que mentionnent à ce sujet les référentiels existants.  

Ceci rejoint en partie ce que nous allons désormais voir en termes de recommandations.

Limiter le nombre de pages 

Souvent, lorsque l’on tente d’imprimer directement une simple page web, le nombre de feuilles utilisées paraît disproportionné. C’est notamment le cas, par exemple, lorsqu’il s’agit d’imprimer un billet électronique, comme un billet de train. Afin d’y remédier, plusieurs actions sont possibles :  

  • Réduire les marges des pages 
  • Réduire l’espacement entre les éléments 
  • Réduire la taille des titres et textes 
  • Linéariser les contenus 
  • Supprimer les contenus périphériques (images décoratives, éléments contextuels tels que des blocs présentant les articles similaires ou les derniers articles, menus, haut et bas de page, éléments de navigation, etc)

Limiter les surfaces d’encre 

Si l’on a vu dans la bonne pratique précédente comment limiter la quantité de papier utilisée, il est également possible de limiter l’utilisation d’encre. En particulier si un mode sombre est en place mais avec tout fond coloré, s’assurer qu’à l’impression le fond est bien blanc. Ici aussi, il peut être intéressant de supprimer les visuels non-nécessaires tels que les images décoratives.  

Certaines polices sont conçues spécialement pour réduire la quantité d’encre utilisée à l’impression. Regardez à ce sujet Ryman Eco ou des outils comme EcoFont.  

Il peut aussi être envisagé de laisser la possibilité à l’utilisateur d’imprimer le contenu sans les images. Dans certains contextes, les images peuvent aider à la compréhension mais autant laisser à l’utilisateur le choix d’imprimer une page avec ou sans les images.  

De plus, des filtres CSS peuvent limiter le coût en encre des images : Quality print versions with CSS filters

Comment mettre en œuvre ces recommandations ? 

Comme évoqué dans les 115 bonnes pratiques d’écoconception web, le plus simple est de mettre en place une feuille de style dédiée à l’impression et utilisée pour l’ensemble du site. Pour cela, je vous invite à consulter l’article de Smashing Magazine intitulé “Print stylesheets in 2018”.  

Conclusion 

Afin de faciliter l’impression des contenus d’un site web, nous avons vu ici les bonnes pratiques à mettre en œuvre. Le coût en développement s’annonce limité mais les bénéfices pour les utilisateurs peuvent être conséquents. Il est en effet essentiel de garder en tête l’ensemble des contextes d’utilisation d’un site web.

Réduire les impacts de l’autocomplétion

Reading Time: 4 minutes

Lorsque nous naviguons sur le web, l’autocomplétion est partout ou presque. En particulier, cette fonctionnalité est implémentée sur les moteurs de recherche, qu’ils soient propres à un site web ou non. Ainsi, lorsque l’utilisateur tape les mots recherchés, des suggestions lui sont faites dynamiquement, qu’il s’agisse de compléter les mots ou expressions qu’il saisit ou d’afficher les résultats de la recherche au fur et à mesure que des caractères sont ajoutés.  

Dans le cas de Google, ces suggestions sont souvent tournées en dérision en raison de leur incongruité. Sans compter ce marronnier du SEO annonçant la mort du moteur de recherche.

Prenons l’exemple du moteur de recherche de Google :

Ici, les flèches bleues représentent les saisies de caractères au clavier et les rectangles noirs des requêtes d’autocomplétion. 

On arrive à un total de 16 requêtes de type XHR pour 5,1 ko transférés. 

Le nombre de requêtes reste le même que la saisie soit rapide (saisie en 2 secondes pour l’ensemble de la recherche) ou plus longue (7 secondes au total pour la saisie). 

On retrouve aussi l’autocomplétion dans certains formulaires de saisie, afin de s’assurer que le texte entré corresponde bien à ce qui est attendu (ville, pays, etc).  

Si ce mécanisme peut être une aide pour l’utilisateur, l’impact environnemental des requêtes générées ne doit pas être négligé. Voyons désormais comment les limiter.

Premières recommandations

Si l’on priorise la sobriété, la meilleure chose à faire est de ne pas intégrer de mécanisme d’autocomplétion. Toutefois, l’aide à la saisie est un avantage indéniable pour les utilisateurs dans la plupart des cas.  

Dans le cas des formulaires, le recueil des 115 bonnes pratiques d’écoconception web du collectif GreenIT.fr préconise l’aide à la saisie. Ainsi, on sollicite moins le serveur tout en s’assurant que le texte saisi reste conforme à ce qui est attendu.

Du côté du GR491, on trouve deux préconisations :  

Plutôt que de mettre systématiquement en place l’autocomplétion et la recherche, il est parfois possible de mettre des filtres (et des mécanismes de tri) à disposition de l’utilisateur.  

Partant de ces premiers éléments, voyons comment aller plus loin encore.

Préconisations

S’assurer que les requêtes soient aussi légères que possible  

Lorsque le client émet une requête vers le serveur, on s’assure que celle-ci ne contient que les éléments nécessaires pour fournir une réponse pertinente.  

Lorsque le serveur envoie une réponse, on s’assure ici aussi que :  

  • Seuls les champs pertinents sont renvoyés. Par exemple, il n’est pas toujours nécessaire d’afficher une image pour chaque résultat 
  • On ne renvoie que les éléments nécessaires (pertinence des réponses et pagination des résultats) 

Ne pas proposer l’autocomplétion avant quelques caractères

Avant de lancer la première requête, il est préférable d’attendre que 5 caractères soient saisis ou qu’au moins 2 secondes se soient écoulées depuis la dernière saisie par l’utilisateur.  

Ainsi, on évite de renvoyer des résultats pour une demande trop vague (lorsque le nombre de caractères saisis est insuffisant), tout en prenant en compte le cas où le terme recherché est volontairement court (“été”, etc).

Espacer les requêtes dans le temps

Après la requête initiale, attendre que 3 nouveaux caractères aient été saisis ou qu’au moins 2 secondes se soient écoulées depuis la dernière requête.

Limiter le nombre de requêtes pour saisies rapides

En complément de la règle précédente, dans le cas d’une saisie rapide, attendre au moins une seconde entre chaque requête. En effet, certains utilisateurs particulièrement rapides peuvent saisir un caractère toutes les 200 ms.

Mesurer la pertinence en local 

Lorsqu’un utilisateur ajoute des caractères à sa recherche, les résultats se précisent et leur nombre diminue. Il est possible d’effectuer directement ce filtre localement, sans requête additionnelle vers le serveur. Par exemple, si des résulats ont été obtenus pour “aide au log”, il est possible de filtrer côté client si l’utilisateur poursuit en tapant “aide au logement”.  

Cette bonne pratique est d’autant plus pertinente dans le cas d’un champ de saisie dans un formulaire. Par exemple, dans le cas de la saisie d’une ville ou d’un pays, les éléments d’une première requête peuvent être affinés localement à mesure que l’utilisateur poursuit sa saisie. 

Attention, si un espace est saisi et de nouveaux termes ajoutés, il faut prendre en compte la logique choisie pour les résultats de recherche. En particulier, est-ce qu’un résultat doit contenir tous les termes saisis ou seulement une partie d’entre eux? 

Attention également à bien prendre en compte le cas où l’utilisateur supprime certains des caractères saisis. Quitte à stocker temporairement les requêtes déjà effectuées afin de les utiliser à nouveau si besoin.

Retour sur l’exemple du moteur de recherche Google 

En reprenant le cas de la saisie dans le moteur de recherche Google évoqué en début d’article (16 requêtes, 5.1 ko transférés), nous arrivons à 3 requêtes en tout pour 1 ko transféré.

  • Une première requête effectuée seulement lorsqu’au moins 5 caractères ont été saisis.  
  • Une deuxième requête lorsque 3 caractères supplémentaires ont été saisis.  
  • Une troisième requête lorsque 3 caractères supplémentaires ont été saisis.  
  • L’évaluation en local des résultats à renvoyer pour la fin de la saisie, dans la mesure où il ne s’agit que de filtrer les résultats obtenus suite à la troisième requête.

Conclusion 

Si l’autocomplétion apparaît comme une nécessité et que la saisie assistée n’est pas possible, les bonnes pratiques suivantes doivent être mises en œuvre :  

  • S’assurer que les requêtes soient aussi légères que possible 
  • Ne pas proposer l’autocomplétion avant quelques caractères
  • Espacer les requête dans le temps 
  • Limiter le nombre de requêtes pour les saisies rapides 
  • Mesurer la pertinence en local 

Enfin, même si cette aide à la saisie peut être bénéfique pour de nombreux utilisateurs, ne négligez pas pour autant son accessibilité

Exigences de sobriété numérique pour les villes et collectivités – Classement

Reading Time: 7 minutes

En 2020, nous avions publié une étude portant sur les exigences de sobriété numérique au sein des marchés publics. A l’occasion de la publication cet été du décret n° 2022-1084 du 29 juillet 2022, il nous a semblé judicieux de refaire le point sur les sites des villes et collectivités.  

Ce décret concerne les communes et collectivités de plus de 50.000 habitants, leur imposant l’élaboration d’une stratégie numérique responsable portant en particulier sur la réduction de l’empreinte environnementale du numérique.  

Nous avons donc remesuré les sites des 29 villes et 17 métropoles déjà abordés afin de comparer les résultats obtenus.  

Les mesures ne portent ici que sur la première page de chaque site. Il faudrait bien sûr dans l’idéal prendre en compte un échantillon de pages plus large voire comparer en se basant sur un parcours utilisateur commun à l’ensemble de ces sites. Toutefois, la présente démarche permet déjà d’établir des points de comparaison et de dégager quelques bonnes pratiques.

Sites des métropoles 

L’Ecoscore tel que défini par Greenspector permet d’avoir une bonne vision d’ensemble pour chaque site. Nous commencerons donc par regarder son évolution entre les mesures initiales et les remesures.

Ecoscore des sites des métropoles

Dans la plupart des cas, on observe une amélioration (même légère) de l’EcoScore. Les métropoles de Brest, Grenoble, Nice, Orléans et Strasbourg se démarquent par une augmentation très forte. Pour quelques métropoles, la tendance est à la baisse.  

Alors que Nancy présentait le meilleur EcoScore (74), Rennes prend la tête avec un EcoScore de 80. 

On peut toutefois estimer qu’il serait important pour chaque ville d’obtenir un EcoScore d’au moins 50/100, ce qui n’est encore pas le cas pour certaines.  

L’estimation des impacts environnementaux des différents sites est un autre bon élément de comparaison.

Projection carbone des sites des métropoles

On remarque ici que la tendance est globalement à la hausse pour les sites mesurés avec parfois un fort écart entre la mesure initiale et la remesure. Le cas de la métropole de Saint-Etienne l’illustre très bien.

Analyse plus poussée de certains sites

Page d'accueil du site de la métropole de Rennes
Métropole de Rennes

Ce site apparaît très léger.  Les images, même si elles sont plutôt nombreuses, sont légères mais devraient être lazy-loadées (ne les charger qu’au moment de les afficher).  Le recours à une font variable permettrait de limiter les requêtes. Le carrousel en page d’accueil n’apporte pas grand-chose. Le fait qu’il soit en autoplay risque d’entraîner des surconsommations en plus de pouvoir poser des problèmes d’accessibilité.  La page Accessibilité serait plus pertinente si elle faisait état de la conformité vis-à-vis du RGAA (Référentiel Général d’Amélioration de l’Accessibilité) et présentait le plan pluriannuel d’accessibilité pour le site.  Les quelques animations, même si elles ne sont pas envahissantes, semblent superflues et peuvent entraîner une surconsommation.

Page d'accueil du site de la métropole de Montpellier
Métropole de Montpellier

Suite à la remesure, le site de la métropole de Montpellier est le moins bien placé. En laissant le site ouvert, on observe rapidement plus de 300 requêtes HTTP pour plus de 30 Mo de données transférées. Même une fois le site chargé, les requêtes continuent à s’accumuler.  

La page d’accueil est particulièrement lourde, surtout au niveau des contenus : beaucoup d’images, des carrousels en autoplay, quantité de services tiers.  

Si des gains rapides sont possibles via de l’optimisation technique, un travail de fond s’impose notamment via une approche plus sobre du design.

Synthèse des mesures pour les sites web des métropoles

versionMétropolesecoscoreEnergieCPUDonnéesMémoireRequêtesCarbonEauSol
https://metropole.rennes.fr/ - RemesureRennes804,600,832,22687,58430,300,0480,528
https://www.lillemetropole.fr/ - RemesureLille764,770,682,37685,11240,280,0470,537
https://www.grandnancy.eu/accueil/Nancy743,540,581,35544,09450,240,0380,412
https://www.bordeaux-metropole.fr/ - RemesureBordeaux724,780,661,45756,86510,300,0490,551
https://www.grandnancy.eu/accueil/ - RemesureNancy724,890,602,04718,18420,310,0500,560
https://www.orleans-metropole.fr/ - RemesureOrleans715,691,461,77544,13370,330,0550,643
https://www.metropolegrandparis.fr/fr - RemesureParis704,470,542,07704,63380,280,0460,511
https://www.saint-etienne-metropole.fr/Saint Etienne703,750,533,80426,20890,360,0490,463
https://www.lillemetropole.fr/Lille693,570,631,73560,04460,250,0390,416
https://www.metropole-rouen-normandie.fr/ - RemesureRouen665,001,300,94706,73300,270,0470,563
https://www.bordeaux-metropole.fr/Bordeaux623,870,851,34562,92600,270,0430,457
https://metropole.nantes.fr/ - RemesureNantes625,321,3510,16748,48600,520,0670,626
https://www.clermontmetropole.eu/accueil/ - RemesureClermont615,700,885,68808,34910,490,0690,679
https://metropole.rennes.fr/Rennes604,311,931,23639,53430,270,0440,495
https://www.toulouse-metropole.fr/ - RemesureToulouse604,750,912,49698,46710,350,0530,560
https://www.metropolegrandparis.fr/frParis594,080,831,94567,65430,270,0430,471
https://www.saint-etienne-metropole.fr/ - RemesureSaint Etienne575,861,0834,99819,961041,130,1130,743
https://www.brest.fr - RemesureBrest565,331,253,87723,991420,510,0700,664
https://metropoletpm.fr/ - RemesureToulon545,420,794,97686,441760,580,0780,694
https://metropole.nantes.fr/Nantes525,071,528,75699,17880,520,0670,613
https://www.ampmetropole.fr/Aix Marseille Provence514,380,9114,12893,421400,680,0760,573
https://www.metropole-dijon.fr/ - RemesureDijon516,082,083,51657,43700,430,0660,706
https://www.nicecotedazur.org/ - RemesureNice505,021,213,06654,931290,460,0650,622
https://www.metropole-rouen-normandie.fr/Rouen494,372,931,64657,77260,250,0420,493
https://www.clermontmetropole.eu/accueil/Clermont454,311,491,23698,79890,330,0510,520
https://tours-metropole.fr/Tours444,641,762,85778,26670,350,0520,547
https://tours-metropole.fr/ - RemesureTours444,891,075,43663,200,320,0490,542
https://www.strasbourg.eu/ - RemesureStrasbourg436,192,682,80754,16840,440,0680,725
https://www.grenoblealpesmetropole.fr/ - RemesureGrenoble416,592,373,81696,83860,480,0730,771
https://metropoletpm.fr/Toulon414,210,954,58921,882420,620,0770,598
https://www.toulouse-metropole.fr/Toulouse414,191,402,10601,40700,320,0480,498
https://www.ampmetropole.fr/ - RemesureAix Marseille Provence407,862,3010,18840,472070,840,1100,984
https://www.metzmetropole.fr/ - RemesureMetz3811,063,248,47925,301490,850,1261,300
https://www.montpellier3m.fr/ - RemesureMontpellier325,932,1340,93754,012591,480,1440,843
https://www.brest.frBrest315,382,403,64882,162180,610,0810,711
https://www.metropole-dijon.fr/Dijon285,886,316,48630,14770,490,0690,692
https://www.orleans-metropole.fr/Orleans286,407,572,27590,651120,470,0730,762
https://www.metzmetropole.fr/Metz2616,105,979,20856,201641,100,1711,858
https://www.nicecotedazur.org/Nice244,623,054,28651,051210,460,0620,576
https://www.grenoblealpesmetropole.fr/Grenoble1910,167,545,87656,85960,680,1071,168
https://www.montpellier3m.fr/Montpellier196,393,4428,83831,253801,420,1480,942
https://www.strasbourg.eu/Strasbourg97,858,801,98675,410,370,0680,860

Nous avons calculé la moyenne de ces données. Sur plan général nous remarquons que l’écoscore moyen est de 50, l’énergie consommé 5,65 mAh, le pourcentage du CPU utilisé est de 2,16, les données échangées représentent 6,25 Mo, la mémoire vive utilisée est de 704 Mo, le nombre de requêtes est de 103. Concernant l’impact environnemental on observe que l’impact carbone est de 0,51 gEqCO2, l’empreinte Eau est de 0,070 Litres et l’empreinte sol de 0,68 m2.

En distinguant les mesures des remesures voici les moyennes que l’on obtient :

 EcoscoreEnergieCPUDonnéesMémoiresRequêtesImpact Carbon (gEqCO2)Empreinte Eau (Litres)Empreinte sol (m2)
Moyennes des remesures575.721.407.30725950.520.0710.68
Moyennes des mesures initiales435.572.925.206821110.490.0690.67

Sites des villes 

Là aussi, on commence par regarder l’EcoScore des sites des villes de l’échantillon.

Ecoscore des sites des villes

Plus encore que pour les métropoles, la tendance pour l’EcoScore est clairement à la hausse.  

En plus du site de la ville de Rennes (déjà abordé dans le cadre des métropoles), les sites des villes du Havre, de Lille et surtout de Strasbourg se sont améliorés de façon significative.  

C’est là aussi le site de la ville de Rennes qui présente le meilleur EcoScore. On note au passage le choix intéressant d’avoir le même site pour la ville et la métropole. Concernant l’EcoScore le moins élevé, il revient au site de la ville de Tours.  

Voyons désormais l’empreinte environnementale de ces sites.

Projection carbone des sites des villes

La tendance globale est à la diminution, ce qui est une très bonne chose.

Analyse plus poussée de certains sites 

Page d'accueil du site de la ville de Lille
Ville de Lille

Même si ce site a bien évolué depuis les premières mesures, il reste encore des axes d’amélioration à explorer.  

De nombreuses requêtes HTTP, plusieurs Mo de données échangées et quelques erreurs 404 parmi les ressources à récupérer.

Taille des requêtes HTTP des sites des villes

On note ici au passage l’intérêt d’avoir une page HTML 404 aussi légère que possible car c’est souvent ce que va renvoyer le serveur s’il ne trouve pas ce qui lui est demandé. A noter qu’il est possible de modifier cela via la configuration du serveur afin de plutôt renvoyer un simple message. Le mieux étant bien entendu de s’assurer de ne pas aller chercher des éléments introuvables. 

La page d’accueil est très chargée, avec notamment un carrousel en défilement automatique et de nombreuses images et contenus.  

Il serait avantageux d’utiliser une font variable et d’éviter de charger toutes les icônes de FontAwesome.  

Certaines images, pesant plusieurs centaines de ko, devraient être optimisées.

Page d'accueil du site de la ville de Tours
Ville de Tours

De façon assez classique, on trouve ici de nombreuses images dont certaines devraient être optimisées.  

Pourtant, à première vue, la page d’accueil n’apparaît pas si chargée. Il est donc nécessaire de creuser un peu afin de mieux comprendre ce qui rend le site aussi lourd.  

On trouve une dizaine de requêtes pour les polices et on note au passage des fonts Google (ce qui peut, rappelons-le, poser souci vis-à-vis du RGPD).  

Plusieurs requêtes semblent également correspondre à de la vidéo.  
Mais l’essentiel des requêtes provient des fichiers JS et CSS.  

En regardant de plus près les domaines de provenance des requêtes, l’une des explications du poids du site apparaît.

Requêtes du site de la ville de Tours

Ce feu d’artifice est fourni par l’outil RequestMap développé par Simon Hearne (déjà évoqué lors de l’analyse de requêtes en provenance d’une application Android). Si l’on n’a pas le détail, on voit qu’il y a de nombreuses requêtes et que la plupart proviennent d’autres domaines.  

L’onglet Domains de Webpagetest nous permet d’en apprendre un peu plus :

Domaines appelés par les requêtes sur le site de la ville de Tours

Ce n’est ici qu’un extrait mais il fait apparaître plusieurs éléments intéressants :  

  • La plupart des requêtes (en termes de nombres mais aussi de poids) proviennent d’autres domaines 
  • Le plus grand nombre de requêtes provient de mobiledition.com 

Mobiledition.com propose à ceux dont le site n’est pas responsive de générer une version de leur site spécialement pensée pour un affichage sur mobile. L’intention n’est pas mauvaise mais la démarche plutôt aberrante du point de vue de l’écoconception. En effet, cette surcouche va exister en plus du site d’origine et être rafraîchie automatiquement à chaque mise à jour du site. Près de 10 ans après l’apparition de la notion de responsive design, il serait important que tous les sites puissent s’adapter aux différents devices voire qu’ils soient pensés mobile-first (en priorité pour le mobile puis étendre aux autres supports). Voire même offline-first afin de pouvoir faire face plus facilement à des connexions dégradées.  

En résumé, il serait important de repenser le site afin de limiter le plus possible le recours à des services tiers afin de le rendre moins impactant.

Résultat des mesures pour les sites web des villes

versionVillesecoscoreEnergieCPUDonnéesMémoireRequêtesCarbonEauSol
https://metropole.rennes.fr/ - remesureRennes824,721,012,20638,77430,300,0480,541
http://www.lemans.fr/ - remesureLe Mans764,650,642,01686,57710,330,0510,549
https://www.lille.fr/ - remesureLille764,991,074,35688,68800,410,0590,594
http://www.bordeaux.fr/ - remesureBordeaux754,450,540,51612,36260,230,0410,500
https://www.lemans.fr/ - remesureLe Mans754,910,752737,59710,340,0540,577
https://www.reims.fr/ - remesureReims715,391,222,70695,55610,360,0570,625
https://clermont-ferrand.fr/ - remesureClermont Ferrand685,341,121,11596,62560,320,0540,615
http://www.bordeaux.fr/Bordeaux663,381,780,42486,05930,280,040,42
https://www.amiens.fr/ - remesureAmiens645,640,712,67871,97480,350,0570,645
https://www.lehavre.fr/ - remesureLe Havre635,061,244,32775,82880,420,0610,606
https://www.lemans.fr/Le Mans633,730,713,77623,83640,330,050,45
https://www.aixenprovence.fr/ - remesureAix625,160,745,16748,061080,470,0650,629
http://nice.fr/ - remesureNice625,401,3324,73697,57650,830,0880,658
https://www.paris.fr/ - remesureParis626,001,856,81718,24470,450,0660,690
https://www.lyon.fr/ - remesureLyon614,920,953,46740,1461140,440,0620,603
https://www.paris.fr/Paris594,192,4517,64604,00490,620,070,51
http://www.lemans.fr/Le Mans584,081,962,75563,91660,320,050,48
https://metropole.nantes.fr/ - remesureNantes585,351,3110,10740,88600,520,0670,630
https://www.saintdenis.re/ - remesureSaint Denis585,770,875,54715,67670,450,0650,673
https://www.toulouse.fr/ - remesureToulouse575,070,912,91742,451030,410,0610,613
https://www.nimes.fr/ - remesureNimes565,441,5512,29700,411150,640,0790,673
https://www.saintdenis.re/Saint Denis564,452,782,74592,78410,300,050,51
https://www.villeurbanne.fr/ - remesureVilleurbanne555,281,1311,97625,22790,580,0720,635
https://www.amiens.fr/Amiens544,021,682,22734,33590,300,050,47
http://www.angers.fr/ - remesureAngers545,191,282,16596,79620,340,050,603
https://www.marseille.fr/Marseille534,761,747,86402,542430,710,090,66
https://www.reims.fr/Reims533,971,421,29507,91820,310,050,48
https://toulon.fr/ - remesureToulon535,420,654,94945,611530,540,0740,682
https://www.brest.fr/ - remesureBrest525,301,353,72733,541420,500,0690,661
https://www.dijon.fr/Dijon514,322,374,19580,40910,400,060,53
https://metropole.nantes.fr/Nantes506,392,8512,60656,37620,620,080,75
https://www.montpellier.fr/ - remesureMontpellier496,271,019,451029,02730,560,0760,737
https://metropole.rennes.fr/Rennes494,422,891,85616,47480,290,050,51
https://www.marseille.fr/ - remesureMarseille485,921,7119,55690,652010,940,1050,782
https://www.lyon.fr/Lyon464,622,852,69573,40680,350,050,55
https://www.annecy.fr/ - remesureAnnecy455,571,794,23692,911160,480,0690,67
https://clermont-ferrand.fr/Clermont Ferrand455,031,763,17462,48880,400,060,60
https://www.mairie-perpignan.fr - remesurePerpignan457,332,419,74793,541590,730,0970,900
https://www.strasbourg.eu/ - remesureStrasbourg436,383,142,79702,44840,440,0690,746
http://www.angers.fr/Angers425,594,353,46591,16570,390,060,64
https://www.dijon.fr/ - remesureDijon424,661,001,44656,4690,220,0410,511
https://www.grenoble.fr/ - remesureGrenoble406,082,166,44571,02730,490,0700,712
https://www.mairie-perpignan.frPerpignan405,192,782,50544,381470,480,070,65
https://www.aixenprovence.fr/Aix394,611,687,84768,691100,510,070,57
https://www.lille.fr/Lille396,233,3912,66852,37840,650,080,74
https://www.limoges.fr/fr - remesureLimoges398,511,822,33609,381000,540,0880,986
https://www.toulouse.fr/Toulouse384,572,443,00641,751230,430,060,57
https://www.tours.fr/ - remesureTours385,680,885,67818,580,350,0550,628
https://toulon.fr/Toulon375,852,0916,48923,892150,900,100,78
https://www.brest.fr/Brest345,773,093,40843,122090,610,080,75
https://www.grenoble.fr/Grenoble335,666,555,93600,86600,450,060,66
http://nice.fr/Nice336,074,6526,59627,281941,090,120,80
https://www.villeurbanne.fr/Villeurbanne335,222,278,72740,511280,580,070,65
https://www.lehavre.fr/Le Havre324,663,305,40726,971060,460,060,57
https://www.montpellier.fr/Montpellier305,081,867,20899,691680,600,080,66
https://www.nimes.fr/Nimes294,172,325,13715,841670,520,070,55
https://www.annecy.fr/Annecy279,606,742,98619,481230,640,101,12
https://www.limoges.fr/frLimoges2615,127,251,96614,32600,750,141,69
https://www.tours.fr/Tours1610,224,7821,99961,472031,180,151,25
https://www.strasbourg.eu/Strasbourg87,457,955,83663,390,430,070,82

Nous avons calculé la moyenne de ces données. Sur plan général nous remarquons que l’écoscore moyen est de 49, l’énergie consommé 5,57 mAh, le pourcentage du CPU utilisé est de 2,22, les données échangées représentent 6,36 Mo, la mémoire vive utilisée est de 689 Mo, le nombre de requêtes est de 99. Concernant l’impact environnemental on observe que l’impact carbone est de 0,50 gEqCO2, l’empreinte Eau est de 0,069 Litres et l’empreinte sol de 0,668 m2.

En dissociant les mesures des remesures voici les moyennes que l’on obtient :

 EcoscoreEnergieCPUDonnéesMémoiresRequêtesImpact Carbon (gEqCO2)Empreinte Eau (Litres)Empreinte sol (m2)
Moyennes des remesures585.531.285.92719880.470.0660.656
Moyennes des mesures initiales415.613.166.816581110.530.0720.680

Les mesures initiales ont été menées sur un smartphone Samsung Galaxy S7 sous Android 8.

Les remesures quand à elles ont été effectuées sur un smartphone Samsung Galaxy S9 sous Android 10. Les mesures ont été réalisées au travers de notre outil Greenspector Benchmark Runner, permettant la réalisation de tests automatisés.

Détail des scénarios :
– Chargement de l’application
– Lecture du site web en premier-plan
– Lecture de la page avec 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 connecté à un réseau wifi peuvent être différentes lorsque le smartphone est connecté à un réseau filaire. Pour chacune des itérations, le cache est préalablement vidé.

Découvrez comment Greenspector évalue l’impact environnemental des services numériques.

Nantes Digital Week 2022 : Classement de la sobriété numérique des sites web des partenaires et visiteurs

Reading Time: 2 minutes

Le mois dernier nous étions présents à la Nantes Digital Week. Nous avons participé à plusieurs conférences et ateliers sur la thématique du numérique responsable. C’était l’occasion de rencontrer de nombreux acteurs du digital mais également de nombreux visiteurs curieux d’en savoir plus sur ce vaste sujet.  

Le jeudi 22 octobre nous avons animé l’atelier “Héberger, mesurer et concevoir des sites vertueux” en compagnie de DRI et Webofacto. C’est dans ce cadre que nous avons mesuré les sites internet de plusieurs visiteurs et partenaires de l’évènement. 

Le classement en détail

La moyenne d’impact carbone sur une minute de navigation de ces 98 partenaires est de 0,45 gEqCO2 soit l’équivalent de 2 mètres effectué en voiture thermique. Seulement 8 sites se trouvent au-dessus de cette moyenne, ce qui traduit une bonne tendance. Le site web le plus sobre de ce classement (le site du CIC, 0,19 gEqCO2) est 7,8 fois moins impactant que le site le moins sobre (Saint-Nazaire Tourisme, 1,5 gEqCO2). 

La moyenne de consommation d’énergie (mAh) est de 3,7 mAh et en moyenne 9,01 Mo de données sont échangées. En termes de requêtes web, la moyenne est de 73.

RangNomecoscoreCarbon Impact (gEqCO2)requestsÉnergie (mAh)Données (Mo)Mémoire (Mo)Empreinte eau (Litres)Empreinte sol (m2)
1CIC810,19312,971531,870,030,34
2Le Blog du Modérateur840,2183,571,06605,540,030,40
3La Cantine800,22383,21,34570,440,030,37
4Banque des territoires730,22512,921,31669,140,030,35
5Whome760,26433,143,32661,640,040,37
6sfr630,27683,511,45674,380,040,42
7Chateau des Ducs de Bretagne620,27483,91,91757,640,040,45
8BNP Paribas720,28773,122,11669,860,040,39
9Cobage670,31723,33,15582,250,040,40
10Mismo610,31733,782,48864,870,050,46
11Enedis520,35573,55,91716,590,050,42
12Sogetrel520,371033,473,76860,640,050,44
13Ecosystem360,37524,934,33744,720,050,57
14_icilundi690,38273,379,48661,030,050,40
15PALO IT610,39873,85,04708,840,050,47
16Université de Nantes710,4613,468,16650,390,050,42
17VIF510,411123,794,41826,630,050,48
18La Box Loire Atlantique630,47913,748,63650,420,060,47
19Radio Prun'500,48443,5612,92712,560,050,43
20Maison Europe580,5514948,09695,450,070,53
21Isefac Bachelor410,61813,828,4915,640,070,53
22Accenture350,61636,9211,29647,930,080,80
23Tele Nantes480,81463,4321,39821,120,080,48
24Groupe Onepoint571,11843,3640,15744,130,100,47
25Saint Nazaire Tourisme471,5704,1658,42761,910,130,57

Pour chacun de ces sites web et applications mesurés sur un smartphone Samsung Galaxy S9, les mesures ont été réalisées au travers de notre outil Greenspector Benchmark Runner, permettant la réalisation de tests automatisés.

Détail des scénarios :
– Chargement de l’application
– Lecture du site web en premier-plan
– Lecture de la page avec 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 connecté à un réseau wifi peuvent être différentes lorsque le smartphone est connecté à un réseau filaire. Pour chacune des itérations, le cache est préalablement vidé.

Découvrez comment Greenspector évalue l’impact environnemental des services numériques.

Analyse des 10 sites nominés mobile excellence par Awwwards

Reading Time: 7 minutes

Awwwards est le site qui référence des sites web qui sortent du lot de par leur conception, expérience utilisateur proposée et leur design. C’est une véritable référence pour les webdesigners et développeurs web dans le monde entier. Le concept est simple : chaque jour, des créateurs soumettent leur site web sur Awwwards. Le site est déposé dans la catégorie des nominés « Site of the day ». Ce dernier est jugé par des membres de la communauté Awwwards composée de designers, développeurs et agences. Le meilleur site de chaque jour de l’année paraît dans le livre « The 365 Best Websites Around the World ». Tous les mois, un site est élu « Site of the month ». À la fin de l’année, lors d’une cérémonie, le jury choisit le meilleur de l’année.

Le site Awwwards s’est étoffé depuis sa création en 2009. Les nominés sont répartis en 6 groupes :

  • Sites of the Day
  • Sites of the Month
  • Sites of the Year
  • Developer
  • Mobile Excellence
  • Honorable

Il existe également des thématiques de site qui sont appelées Categories et qui sont au nombre de 26.

Des sites très jolis mais pas forcément sobres ?

Notre curiosité nous a amené à analyser 10 sites nominés sur Awwwards. Nous avons sélectionné des sites nominés dans le groupe « Mobile Excellence ». Ces sites sont jugés sur 4 critères :

  • Friendliness
  • Performance
  • Usability
  • PWA

Awwwards attribue un score pour chacun des critères ci-dessus, ce qui permet de calculer ensuite un score total.

Chez Greenspector, nous avons décidé d’aller plus loin dans l’analyse de ces sites pour savoir s’ils répondaient bien à nos critères de sobriété.

Analyse complémentaire des sites en bas du classement 

Betterup.com

Plus de 200 requêtes HTTP pour charger la page puis 1 requête environ toutes les 10 secondes. Les requêtes pointent vers une cinquantaine de domaines.

On retrouve ces requêtes sur la RequestMap (outil créé par Simon Hearne) :

SI la présence du bandeau pour les cookies est légitime, le chatbot occulte une bonne partie de l’affichage, ce qui est problématique pour un site récompensé par un Awwward. Ce chatbot est-il vraiment nécessaire ? Ne devrait-il pas s’ouvrir (et se charger) qu’à la demande de l’utilisateur ? 

A noter également (mais c’est malheureusement souvent le cas) qu’une trentaine de requêtes sont déclenchées dès qu’on accepte les cookies.  

Lorsqu’on scrolle, le nombre de requêtes et la quantité de données transférées augmentent considérablement suite à l’intégration directe d’une vidéo Vimeo. L’utilisation du pattern facade aurait été plus judicieux. On remarque aussi un carrousel dont l’utilisation sur mobile est difficile (swipe exclusivement). 

Le lazy-loading est bien implémenté mais on note différents effets visuels superflus (notamment parallaxe) qui viennent encore alourdir le site, notamment au scroll.  

Lorsqu’on scrolle jusqu’au bas de la page, on en est à plus de 400 requêtes HTTP et plus de 12 Mo de données transférées.

Enfin, le plugin Wave détecte une quarantaine d’erreurs d’accessibilité et une trentaine d’erreurs de contraste.

Nous avions précédemment abordé le sujet des sites sobres mais nous sommes typiquement ici sur un site où un design très chargé ainsi que de trop nombreux scripts tiers dégradent fortement l’expérience utilisateur. On retrouve notamment cela lorsqu’on observe les mesures pendant les étapes de pause :

Dans l’idéal, il ne devrait pas y apparaître de transferts de données ni de pics aussi marqués pour la vitesse de décharge de la batterie. Ceci peut être dû à des services tiers ou à des animations.

Datagrid.co.jp

Pour ce site, le chargement ne finit jamais vraiment, comme l’attestent les outils de développeur de Firefox :

Les stats ici (temps de chargement compris) ne cessent jamais d’augmenter.  

Le site a sans nul doute un intérêt du point de vue du design pur mais il s’agit ici d’un site qui n’est absolument pas utilisable :  

  • Les mouvements perpétuels (sans possibilité de contrôle) le rendront inaccessibles pour certains utilisateurs.  
  • Les requêtes en continu vers une quinzaine de domaines mettront à mal le forfait data d’une partie des utilisateurs.  
  • Les erreurs de contraste sont bel et bien présentes et la navigation au clavier plus que laborieuse.  

Tout ceci se traduit sans surprise par un impact environnemental plus que conséquent avec en continu des transferts de données et sollicitation de la batterie des smartphones utilisés, même en background.

Webflow.com

Les remarques sur les deux sites précédents s’appliquent en grande partie à celui-ci. Lors du chargement, on compte plus 200 requêtes pour 2 Mo transférés. En effet, on compte plus de 57 domaines, ce qui correspond bien au slogan du site proposant de faire de votre site web un atout marketing.  

Si la taille des images est plutôt bien maîtrisée, l’essentiel du poids du site provient du JS avec plus de 100 requêtes dont une dizaine de plus de 100 ko chacune.

Le lazy-loading des images ne semble pas avoir été implémenté et le design de cette page d’accueil paraît de toute façon beaucoup trop lourd.  

En revanche, les erreurs rapportées par le plugin Wave sont quasiment inexistantes.  

Bref, il y aurait encore à faire afin de rendre cette page d’accueil plus sobre, de mieux intégrer certains éléments mais aussi de limiter le recours aux services tiers.  

Analyse complémentaire des sites en haut du classement 

Ladispensadelchianti.it

Ce site est plutôt léger (tout juste au-dessus d’1 Mo) et rapide à charger. On arrive tout de même à 60 requêtes HTTP pour le premier chargement, réparties sur une quinzaine de domaines.  

Cette page d’accueil est visuellement riche mais reste claire. Les images sont optimisées (notamment via l’utilisation du format webp). Il est regrettable que le lazy-loading ne soit pas implémenté. 

Le cache est globalement bien géré, ce qui est une très bonne chose.  

En revanche, on remarque que les polices sont plutôt volumineuses, pour un total de 5 requêtes. Il faudrait privilégier les polices systèmes voire une police variable afin de limiter le nombre de requêtes.  

Aussi, du point de vue du RGPD, il serait préférable d’éviter les fonts Google ou de les héberger soi-même. 

Quelques erreurs d’accessibilité apparaissent avec Lighthouse.  

Il faudrait limiter les animations au scroll et les effets au déplacement du curseur semblent superflus (voire nuisibles pour l’utilisateur). 

Ingridparis.com

Ce site est en apparence assez sobre. Pas de requêtes vers des services tiers et des images globalement optimisées mais trop nombreuses. La mise en place du lazy-loading (de préférence nativement) serait une très bonne chose.  

Le chargement est rendu plus long par le chargement par défaut d’une vidéo d’1 Mo ainsi que 20 requêtes environ rien que pour les polices. 

Le cache est en revanche implémenté sur quasiment tous les éléments. 

Même si Wave remonte peu d’erreurs d’accessibilité, les animations devraient être moins présentes au scroll sur la page. Actuellement, elles font de l’étape de scroll l’étape la plus impactante du point de vue de la vitesse de décharge de la batterie.

Azzerad.com

La tendance observée jusque-là semble se confirmer : de nombreuses images (optimisées mais la plupart sont chargées deux fois) et beaucoup d’animations.  

15 requêtes rien que pour les polices mais assez peu de requêtes vers des services tiers.  

Bref, un site qui gagnerait à être un peu plus sobre dans sa présentation et à aller plus loin dans l’optimisation technique pour éviter que les efforts (notamment d’optimisation des images) ne soient annulés par des mauvaises pratiques (comme le chargement en double des images).  

Côté Wave, quelques erreurs d’accessibilités remontent mais surtout des problèmes de contraste.

Projection des données pour mesurer l’impact environnemental

Nous sommes allés plus loin dans l’analyse en réalisant une projection de données afin d’obtenir des détails supplémentaires nottament sur l’impact CO2, l’empreinte eau et l’empreinte sol.

Ici, l’énergie, les données échangées, le CPU et l’usage de la mémoire sont directement mesurés sur le device. Les impacts environnementaux et l’Ecoscore (basés sur les mesures mais aussi sur l’application des bonnes pratiques) sont calculés. Vous trouverez les détails dans l’article dédié sur le blog. Il est ainsi possible de comparer les différents sites, classés ici en fonction de leur Ecoscore (plus il est élevé, mieux c’est).

versionecoscoreCO2 impact (gEqCO2)requestsEnergie (mAh)Données échangées (Mo)CPU (%)Empreinte eau (Litres)Empreinte sol (m2)Mémoire (Mo)
hskr.ru600,30235,451,822,710,050,61682,42
ladispensadelchianti.it750,31564,731,571,140,050,55511,82
ingridparis.com650,36385,543,592,110,060,63632,50
azzerad.com630,38755,591,981,500,060,65735,91
marcoambrosi.salon520,41475,814,752,440,060,67701,52
once-lifetime.com450,45565,736,372,240,060,66734,36
grege-interieurs.com390,642611,206,805,060,111,25746,73
webflow.com330,671796,347,173,210,090,80863,02
lamalama.n420,71219,7113,424,710,101,09828,77
blueyard.com560,72508,0215,132,560,100,92575,93
datagrid.co.jp290,801289,3411,023,150,111,10671,31
betterup.com270,8112111,287,853,510,121,31862,15

Conclusion

Lorsque le design de sites doit être jugé ou comparé, ceux qui ressortent en tête sont souvent des sites proposant un foisonnement d’images et autres effets visuels tels que des animations ou de la vidéo. Même si ces choix de designs peuvent être plus attractifs ou ludiques, ils nuisent souvent à l’accessibilité mais aussi aux impacts environnementaux… donc, in fine, aux utilisateurs eux-mêmes. 

Même en cherchant des sites spécifiquement dédiés à la sustainability, on trouve des exemples présentant de nombreuses erreurs d’accessibilité ou transférant des fichiers de plus de 5 Mo au chargement. 

Sur le site des Awwwards, on trouve bien parmi les critères pris en compte l’utilisabilité. Toutefois, un parcours rapide des notes obtenues montre que, même pour betterup.com qui présente de nombreuses erreurs d’accessibilité, la note d’utilisabilité est souvent très élevée. Il est normal qu’une part de subjectif, souvent liée à l’expérience personnelle et à la perception qu’on a de telles créations, entrent en ligne de compte. Néanmoins, une mesure objective devrait permettre de relativiser et nuancer le propos, aussi bien pour l’accessibilité que pour la sobriété (voire la performance). Ces contraintes supplémentaires pourraient être sources de créativité et donner lieu à des expériences utilisateur innovantes tout en restant respectueuses des utilisateurs et de la planète.

Quel format d’image choisir pour réduire sa consommation d’énergie et son impact environnemental ?

Reading Time: 4 minutes

Choisir le bon type d’image pour réduire l’impact environnemental d’un site n’est pas chose aisée. On peut se focaliser sur la taille de l’image ou sur la performance d’affichage (est-ce que les deux sont liés ?). C’est peut être la bonne approche. Cependant une mesure d’énergie sera un élément plus précis si on souhaite vraiment mesurer la consommation effective et aller vers une réduction de l’impact environnemental.

Nous avions réalisé en 2017 un benchmark du nouveau format WebP par rapport au JPEG et PNG. La prise en compte du Webp dans les navigateurs commençait. De plus l’AVIF, format d’image prometteur est arrivé.

Voici une étude mise à jour.

Méthodologie

Comme image de test, nous avons utilisé celle proposée par Addy Osmani dans un article sur Smashing Magazine.

Les images ont été générées pour avoir la même qualité perçue. Les qualités de compression sont donc différentes entre les formats.

Image 1 : https://res.cloudinary.com/ddxwdqwkr/image/upload/v1632192015/smashing-articles/206-webp-ayousef-espanioly-DA_tplYgTow-unsplash.webp

  • Test 1 Qualité par Défaut donné par Sqoosh (https://github.com/GoogleChromeLabs/squoosh/) : JPEG original (560KB), JPEG@q75 (289KB), WebP@q75 (206KB),  AVIF@q30 (101KB)
  • Test 2 Qualité cible JPEG@q70 : JPEG (323KB), WebP@q75 (214KB), AVIF@60 (117KB)
  • Test3 Faible qualité : JPEG@q10 (35KB), WebP@q1 (35KB), AVIF@q17 (36KB)2

Image 2 : https://res.cloudinary.com/ddxwdqwkr/image/upload/v1632080886/smashing-articles/q50jpg.jpg

  • Test1 : Taille cible de 45k : Original (442kB), JPEG@q50 , WebP@q54, AVIF@q36

Image 3 : https://res.cloudinary.com/ddxwdqwkr/image/upload/v1632082138/smashing-articles/q10-25.jpg

  • Test 1: Taille cible de 25kB : Original (716KB),  JPEG@q10 , WebP@q5, AVIF@q19

Protocole de mesure :

  • Nous affichons une par une les images dans un navigateur Chrome sur un device réél (Samsung Galaxy S10).
  • Nous utilisons les outils Greenspector pour mesurer la consommation d’énergie et les autres métriques (CPU, performance…).
  • Nous effectuons une mesure tout au long de l’affichage de l’image et cela 3 fois pour avoir des mesures stables.
  • Les mesures sont faites dans différentes conditions de réseau Wifi, 3G et 2G.

Résultats

Sur l’image 1 pour le test 1, on obtient les mesures de consommation d’énergie suivantes :

Consommation d'énergie pour l'image 1

Si l’on observe de plus près le comportement en Wifi, on peut mieux apprécier les différences de consommation avec l’intervalle de confiance.

Consommation d'énergie pour la wifi avec intervalle de tolérance

En Wifi, la consommation est relativement similaire entre les types d’image. Le JPEG est un peu plus consommateur suivi du format WebP et ensuite par AVIF.

En 3G et 2G, la différence de consommation est notable et AVIF consomme moins d’énergie que Webp.

Ces comportements s’expliquent par la taille des fichiers plus faible en AVIF et en Webp.

Sur l’image 2, le comportement est le même :

Comparaison de consommation d'énergie pour l'image 2 entre la wifi, la 3G et la 2G

Sur l’image 3, il n’y a presque aucune différence entre les formats. L’image est petite et on se retrouve dans un fonctionnement proche du wifi (transfert rapide) :

Comparaison de consommation d'énergie entre la wifi, la 3G et la 2G

Le comportement est le même avec l’image 2 qui est à 45ko :

Consommation d'énergie pour l'image 2 en wifi, 3G et 2G

C’est le même comportement pour l’image 3 :

Consommation d'énergie pour l'image 3 en wifi, 3G et 2G

Il est nécessaire de surveiller les nouveaux formats (JPEG XL, Webp2…) ainsi que l’optimisation des algorithmes car même si les gains en taille sont importants, les traitements de décodage pourraient potentiellement gagner encore en efficacité. En effet, voici par exemple le traitement CPU pour l’image 1 sur le test 1, où AVIF consomme plus de CPU que les autres formats.

Traitement CPU pour l’image 1

Préconisations :

  • Dans tous les cas, il est nécessaire de compresser les images avec une qualité plus faible, peu importe le format de l’image. Une qualité >85% est inutile. La consommation d’énergie est diminuée d’un facteur 2 pour des qualités qui restent élevée, et diminuée d’un facteur 6 pour des qualités faibles.
  • Même si la consommation d’énergie est relativement proche entre les formats, le gain apporté par l’AVIF et le Webp est beaucoup plus important pour des connexions moins performantes. Le choix de AVIF et Webp sera préférable car les utilisateurs ne sont pas connectés avec du haut débit ! De plus le gain en terme de données échangées sera intéressant pour limiter la taille globale du site.
  • Le choix entre Webp et AVIF n’est pas simple et va dépendre de la typologie des images et des visiteurs. De plus, Google travaille sur la version 2 de WebP, et des formats comme JPEG XL arrive pour concurrencer AVIF. Cependant, compte-tenu des avantages du Webp autres que l’impact environnemental, nous conseillons plus l’usage de WebP.

Pour information, voici la prise en compte du format AVIF dans les browsers :

Pour information, voici la prise en compte du format AVIF dans les browsers :

Ainsi que le format Webp :

Pour information, voici la prise en compte du format webp dans les browsers :

Dans tous les cas, optimisez vos images, compressez, réduisez la taille et lazy-loadez !

L’impact de nos usages en visioconférence sur mobile et PC ! Édition 2022

Reading Time: 6 minutes

Pour cette nouvelle édition 2022 de notre classement, nous avons décidé de procéder différemment. Contrairement à l’édition 2021, nous avons réduit le nombre d’applications mesurées. Nous avons à la fois réalisé des mesures sur téléphone mais également PC pour répondre à la demande générale. L’objectif de ces nouvelles mesures est d’observer comment les solutions se situent en termes d’impact environnemental (Carbone) les unes par rapport aux autres sur des scénarios utilisateurs courants mais aussi sur deux plateformes différentes : PC versus téléphone.

Nous avons comparé 10 applications : BlueJeans, Google Meet, Go To Meeting, JITSI, Skype, Teams, Webex, Whereby, Zoho Meetings et Zoom.

Pour chacune de ses applications, mesurées sur un smartphone S7 (Android 8) et sur un ordinateur, les trois scénarios suivants ont été réalisés au travers de notre Greenspector Test Runner, permettant la réalisation de tests manuels sur une durée de 1 minute en one-to-one :

  • Conférence audio uniquement
  • Conférence audio et vidéo (caméra activée de chaque côté)
  • Conférence audio et partage d’écran

En savoir plus sur la méthodologie.

Classement projeté en impact carbone des applications de visioconférences (gEqCO2) sur mobile

Scénario / Année1 mn de visioconférence en audio1 mn de visioconférence en audio + caméra1 mn de visioconférence en audio + partage d’écran
20220,31 gEqCO21,10 gEqCO20,54 gEqCO2
Équivalence en mètres parcourus en véhicule léger2,76 mètres9,82 mètres4,82 mètres

En moyenne, une minute de visioconférence en audio impacte 71% moins qu’avec les caméras activées et 42% de moins qu’en partageant un écran. 

Le Top 3 d’une minute de visioconférence en moyenne : Zoho Meeting (0,49 gEqCO2), Microsoft Teams (0,513 gEqCO2) et Whereby (0,533 gEqCO2). Zoho Meeting premier de ce classement côté impact carbone impacte 2,2 fois moins que, GoToMeeting, le dernier de ce classement. La moyenne de ce classement est de 0,657 gEqCO2, 4 solutions se trouvent au-dessus. 

La principale partie des impacts Carbone se situent sur la partie device utilisateur (61%), suivie par la partie Serveur (23%) et enfin la partie Réseau (16%).

Voici les trois applications mobiles les moins impactantes en termes de Carbone suivant le scénario : 

Audio (Top 3)Audio + caméra (Top 3)Audio + partage d’écran (Top 3)
Microsoft TeamsWherebyMicrosoft Teams & Zoho Meeting
Cisco Webex MeetingZoho MeetingZoom & Google Meet
JITSI MeetTeams & ZoomCisco Webex Meeting

Consommation d’énergie des applications de visioconférences (mAh) sur mobile

Voici les moyennes de consommation d’énergie pour les trois scénarios sur téléphone : 

Scénario / Année1 mn de visioconférence en audio1 mn de visioconférence en audio + caméra1 mn de visioconférence en audio + partage d’écran
20226,68 mAh14,29 mAh7,82 mAh

En moyenne, une minute de visioconférence avec la vidéo activée consomme 2,1 fois plus d’énergie qu’en audio ; quant au partage d’écran, il engendre une surconsommation de 17% par rapport à l’audio seule. 

Consommation d’énergie des applications de visioconférences (mAh) sur PC !

Voici les moyennes de consommation d’énergie sur ordinateur : 

Moyenne : 1 mn de visioconférence en audioMoyenne : 1 mn de visioconférence en audio + caméraMoyenne : 1 mn de visioconférence en audio + partage d’écran
17,255 mAh23,654 mAh22,82mAh

Ici, une minute de visioconférence les caméras activées consomme 1,4 fois plus qu’avec l’audio ; quand au partage d’écran il engendre une surconsommation de 24% de plus qu’avec l’audio seule. On constate donc ici une différence de consommation énergétique beaucoup plus conséquente sur téléphone en fonction du scénario.  

Le Top 3 (tous scénarios confondus) en consommation d’énergie en prenant en compte la consommation du téléphone et de l’ordinateur : Zoho Meeting (76,21 mAh), BlueJeans (81,70 mAh) et Microsoft Teams (83 mAh). Zoho Meeting premier de ce classement côté consommation d’énergie consomme 1,4 fois moins que le dernier de ce classement : Whereby

Voici les trois applications mobiles les moins impactantes en termes de Carbone suivant le scénario : 

Audio (Top 3)Audio + caméra (Top 3)Audio + partage d’écran (Top 3)
Blue JeansZoho MeetingZoho Meeting
Cisco Webex MeetingZoomTeams
Google MeetTeamsBlueJeans

Données échangées des applications de visioconférences (Mo) sur mobile

Voici les moyennes des données échangées pour les trois scénarios : 

Scénario / Année1 mn de visioconférence en audio1 mn de visioconférence en audio + caméra1 mn de visioconférence en audio + partage d’écran
20220,88 Mo10,34 Mo4,49 Mo

C’est sur la consommation de données que les écarts se creusent entre les outils et les usages. 

En moyenne, une minute de visioconférence en audio consomme 91% moins (ou 12 fois moins) de données échangées qu’avec les caméras activées et 80% de moins qu’en partageant un écran. 

Le Top 3 (tout scénario confondus) en échange de données : Whereby (4,54 Mo), Zoho Meeting (8,39 Mo) et Skype (9,68 Mo). Whereby (via Firefox) premier de ce classement côté données échangées en consomme 9,2 fois moins que le dernier de ce classement : GoToMeeting

Voici les trois applications les moins consommatrices de données suivant le scénario : 

Audio (Top 3)Audio + caméra (Top 3)Audio + partage d’écran (Top 3)
Blue JeansWherebyZoho Meeting
Zoho MeetingZoho MeetingSkype
WherebySkypeZoom

Et pour nos usages au quotidien de la visioconférence : 

Dans l’étude effectuée en 2021 nous avons indiqué que la visioconférence est préférable à un déplacement en voiture. Effectivement cette solution est moins polluante, cependant attention aux effets rebond ! Avec la pandémie mondiale, le télétravail s’est largement répandu dans de nombreuses entreprises, cependant cette pratique encourage un nombre croissant de personnes à s’éloigner de leur lieu de travail. Donc en fonction du rythme de télétravail imposé et des moyens de transport utilisés, les gains environnementaux du télétravail peuvent être contrebalancés. 

Également il faut marquer un point d’attention à l’augmentation de consommation d’énergie des foyers engendrés. On peut considérer que cette hausse peut compenser la baisse de besoin en énergie dans les locaux d’entreprises mais cela est à prendre au cas par cas et comporte de nombreux facteurs.

Exemples :

Versions mesurées :

  • Microsoft Teams (4.10.1) / ordinateur (1.5.00.10453) 
  • Zoom (5.10.4) / ordinateur (5.10.7.3311)
  • Google Meet (2022.05.15.450927857) / client léger sur Firefox 
  • Cisco Webex Meetings (42.6.0.239) / ordinateur (42.5.0.22187) 
  • GoToMeeting (4.8.1) / client léger sur Chrome 
  • BlueJeans (2.2.0.142) / ordinateur (2.29.1-3) 
  • Skype (8.82.0.403) / ordinateur (8.83.0.411
  • Whereby (2.3.0) / client léger Firefox  
  • Zoho Meeting (2.2.1) / client léger Firefox  
  • Jitsi Meet (21.3.0)/ client léger Firefox  

Pour chacune de ses applications, mesurées sur un smartphone S7 (Android 8), les scénarios utilisateurs ont été réalisés au travers de notre Greenspector Test Runner, permettant la réalisation de tests manuels.

Une fois l’application téléchargée et installée, nous exécutons nos mesures sur les paramètres de base et d’origine de l’application. Aucune modification n’est réalisée (même si certaines options permettent de réduire la consommation d’énergie ou ressources : mode économie de données, thème sombre etc. Cependant nous vous encourageons à vérifier les paramètres de votre application favorite afin d’en optimiser l’impact.

Chaque mesure est la moyenne de 5 mesures homogènes (avec un écart-type faible). Les consommations mesurées sur le smartphone donné selon un réseau de type Wi-Fi 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é.

Pour les mesures sur ordinateur nous avons utilisé un connecteur Greenspector couplé à un module Yochto-Watt afin de mesurer la consommation énergétique. De la même manière que pour les applications mobiles les clients lourds, lorsqu’il en existait un, ont été téléchargés, puis installé sans changer les paramètres de base. Cette puce ne permet de mesurer que la consommation énergétique pour l’instant. C’est pourquoi les analyses de l’impact carbone et des données échangées de cet article ne s’appuient que sur les mesures réalisées sur téléphone. Ressource supplémentaire sur le Yoctopuce.

Découvrez comment Greenspector évalue l’empreinte environnementale de l’utilisation d’un service numérique. (Méthodologie complète)

CMS, No Code ou sans CMS, quelle solution choisir pour un site web sobre ?

Reading Time: 6 minutes

Aujourd’hui, nous allons étudier l’impact de solutions permettant la mise en place de sites web sans connaissance de codage. Parmi ces solutions, nous pouvons inclure les CMS (Content Management System) mais aussi des solutions No Code.

Cet article est le premier d’une série où nous analysons les mesures de 1500 sites via nos outils.
Nous traiterons dans ces articles de l’impact des technologies, des paramètres… 

Avertissement sur la méthodologie :

Nous avons mesuré plus de 1500 sites sur des appareils réels via nos suites de benchmark permettant la réalisation de tests automatisés (lancement du site, mise en attente, scroll, mise en tâche de fond). Nous récupérons ensuite les informations de technologies de ces sites via la solution WepAnalyzer

Nous avons choisi de porter notre analyse sur la consommation d’énergie. Cet indicateur va fortement impacter l’usure des batteries sur les appareils utilisateurs et donc, au final, avoir un impact environnemental. 

Comment lire les graphiques ?

Nous visualisons les données par des graphiques à « boîtes à moustache » (ou Box plot): 

  • La barre centrale indique la médiane. Les classements sont réalisés par rapport à cette donnée. 
  • Le haut et le bas de la boîte sont délimités par les 25e et 75e quantile.  
  • La taille de la boîte est appelée l’intervalle interquartile (IQR) 
  • Les barres en haut et en bas sont les moustaches et délimitent les valeurs attendues
  • Les moustaches s’étendent à 1,5 IQR
  • Les valeurs hors des moustaches sont visualisées via des points. Ils représentent soit des erreurs soit des valeurs aberrantes. 

Nous avons volontairement écarté les sites qui n’avaient pas assez d’échantillons (par exemple moins de 10 sites avec une certaine technologie).

Comment se positionnent les CMS et les solutions No Code ?

Nous retrouvons les technologies les plus répandues (selon Web Core Vitals), mise à part Shopify (ces sites doivent être classés dans la catégorie « Pas de CMS »). 

Nous observons un écart de 20% entre la solution la plus efficiente (Ametys) et la moins performante (Webflow). 

3 CMS se positionnent devant les sites sans CMS. Les CMS répandus comme Drupal et WordPress se positionnent derrière. Les quatre dernières solutions sont des solutions No Code

Pour certaines catégories (WordPress, sites sans CMS), il y a beaucoup de points considérés comme aberrants. Cela s’explique par un jeu de données important (plusieurs centaines de sites). Une analyse exploratoire de ces sites montre généralement qu’il s’agit de sites avec des traitements en continu assez lourds (comme de la vidéo). Voici, un exemple d’un site positionné en « outlier« , l’étape de chargement et d’idle (site inactif) consomment de façon importante compte-tenu d’une animation qui tourne en continu. 

Quelques pistes d’explications à l’analyse des CMS :

Ametys : un CMS spécifique à un domaine

Ametys est un CMS spécifique qui est utilisé pour des sites institutionnels. Sa présence dans ce classement s’explique par le fait que nous avions réalisé un classement des sites d’école, dans lequel de nombreuses écoles utilisent cette technologie. Son bon positionnement serait à analyser d’un point de vue technique, cependant on peut en déduire d’une solution qui a pour cible un type de besoin sera plus optimisable qu’une solution générique. L’intégration de multiples fonctionnalités dans un CMS amènera en effet une surconsommation. On observe de plus que ces sites institutionnels intègrent moins de modules que les autres sites. Il s’agit au final d’une sobriété fonctionnelle. 

Squarespace : une solution tout en un

Squarespace est un CMS hébergé par l’éditeur. Sur les sites analysés, nous pouvons identifier qu’il y a peu de requêtes (<30) donc qu’il y a potentiellement des solutions d’optimisation intégrées. Autres pistes, toutes les ressources sont hébergées sur Squarespace et les atouts (ou assets) sont sur des serveurs dédiés. L’hébergement du CMS par l’éditeur est en effet une bonne chose car elle va permettre des optimisations systématiques et mutualisées. Cependant, ce n’est pas forcément natif, il faut que l’éditeur l’applique. 

Typo 3 : des options d’optimisation natives

Typo 3 qui est une solution open source est en 3ème position. Ce positionnement est confirmé par un classement HTTP Archive. Cette performance s’explique par une gestion fine des caches et d’options d’optimisation natives. 

Les sites sans CMS

Les sites sans CMS intègrent une hétérogénéité de solutions techniques. Il est difficile d’en tirer des conclusions poussées, cependant la médiane des sites se positionne très bien par rapport à d’autres solutions (No Code, WordPress, Drupal…). La moustache basse est la plus basse par rapport à toutes les autres solutions. Cela montre qu’une efficience importante est possible plus facilement.  

Drupal : un CMS professionnel

Drupal se positionne juste après les sites sans CMS. Son bon positionnement peut s’expliquer par le fait que ce CMS est moins accessible que WordPress en termes de mise en place et de prise en main.  

Contentful : un CMS headless

Contentful est un CMS “sans interface”. Il permet de publier du contenu depuis d’autres outils. Le gain d’efficience est sûrement présent pour la publication (car on n’utilise pas ses outils habituels), par contre on observe que ce CMS a la même efficience qu’un CMS classique. 

WordPress : un CMS simple et très répandu

WordPress est très répandu et offre de nombreux plugins et thèmes. Cette généricité et modularité ont un coût. Ce CMS est accessible à beaucoup de monde, dont des utilisateurs non-techniques. La contrepartie est une explosion potentielle de plugins utilisés et une non-configuration du CMS en termes de performance et d’efficience. On voit par rapport à la moustache basse que le CMS peut être efficient, cela nécessite cependant un travail conséquent.  

Wix, Webflow, SiteCore, Adobe : des solutions No Code ou équivalentes

Ces solutions offrent à l’utilisateur la possibilité de réaliser un site web sans connaissance de codage. La médiane est élevée mais aussi les moustaches basses qui sont plus élevées que d’autres solutions montrent que ce sont des solutions plus lourdes. 

Conclusion 

D’un point de vue statistique, les solutions CMS n’ont pas toute la même efficience. La conception initiale, prenant en compte les optimisations, va être primordiale pour atteindre des bonnes performances (cas de Typo 3). On observe que la maîtrise de bout en bout, associée à la mise en place de bonnes pratiques (Squarespace), permet aussi d’atteindre un bon niveau. De la même manière, spécialiser un CMS (Ametys) et donc les options qui vont avec va permettre d’obtenir des bons résultats. 

Cependant, à l’opposé, rendre un CMS très générique et modulaire (WordPress), même si potentiellement performant initialement, va apporter de l’obésiciel. De la même manière, le No Code va apporter une lourdeur. Reste à identifier les causes de cette lourdeur. En effet, elle peut provenir des niveaux d’abstraction mais aussi des possibilités de rendu (interactivité, animations…) qui sont possibles facilement et qui amène l’utilisateur à en ajouter plus qu’il n’en faut. De plus, l’usage d’un CMS “généraliste” est aussi potentiellement représentatif d’un manque de précision du besoin. 

Pour une solution CMS (et plus globalement n’importe quelle solution), la sobriété ne sera pas innée. Il faudra appliquer un ensemble de bonnes pratiques

  • Architecture et technologie efficientes, bien que si l’on prend les technologies actuelles la différence entre les solutions est très faible et l’impact provient plus de la mauvaise utilisation des technologies.
  • Intégrations natives d’optimisations ou facilement activables par l’utilisation.
  • Mécanisme de limitation des fonctionnalités ou en tout cas sensibilisation de l’utilisateur à l’obésiciel.
  • Plus globalement, réfléchir à la problématique bout-en-bout prenant en compte hébergement, CDN (Content Delivery Network); sans aller sur des solutions gérées de bout-en-bout, on voit que la répartition des systèmes n’est pas forcément une bonne chose.
  • Afin d’offrir toujours plus de souplesse à l’utilisateur, et entre autres permettre à des personnes non techniques de réaliser des sites, il est nécessaire d’intégrer nativement des solutions d’optimisations, ce qui n’est pas du tout le cas actuellement.

Vous souhaitez intégrer un CMS dans ce classement ? Contactez-nous et envoyez-nous au minimum 20 liens vers des sites utilisant la technologie, nous les intégrerons dans les mesures et au sein de notre classement ! 

Pour notre prochain article, nous rentrerons dans l’analyse plus fine des données WordPress pour observer quels sont les paramètres et configurations qui influent sur la performance environnementale. 

Un site sobre est-il nécessairement moche ? 

Reading Time: 9 minutes

Aujourd’hui, nous allons nous intéresser à une interrogation qui revient très souvent lorsqu’on aborde la question de l’écoconception web ou de la sobriété numérique : un site écoconçu est-il nécessairement moche ? Souvent, la demande consiste plutôt à obtenir un échantillon de “sites jolis et écoconçus” (de préférence avec une finalité proche de celle du projet en cours). Les spécialistes de l’accessibilité web reconnaîtront sans doute ce type d’interrogation pour y avoir été eux aussi régulièrement confrontés. Il n’est déjà pas évident de définir ce que serait, dans l’absolu, un site “joli”. La notion est elle-même très subjective.  

Nous procéderons donc autrement. Nous constituerons d’abord une liste de sites a priori sobres. Il y a pour cela des listes et des annuaires qu’on listera plus loin. Une fois la liste constituée, nous ferons une première analyse rapide pour en exclure les sites qui ne sont pas aussi sobres qu’annoncé (trop de données transférées, trop de requêtes, etc.). Ensuite, nous utiliserons l’outil Greenspector afin de les départager (en les classant mais aussi en repérant ceux qui sont plus impactant qu’au premier abord).  

Enfin, munis de cette liste, nous regarderons à quoi ils ressemblent et essaieront d’en dégager des tendances de design, en fonction de leurs finalités respectives (un site d’information ne ressemble pas forcément à un site de commerce en ligne ou à celui d’une agence web, par exemple). Ce sera également l’occasion de garder en tête d’autres aspects du Numérique Responsable, en particulier l’accessibilité. Avoir un site léger et agréable à regarder n’a pas de sens s’il est inutilisable pour une partie de la population.  

La finalité ici est bien de proposer une liste de sites web avec un impact environnemental moindre. Libre à chacun de trouver ceux qui lui semblent attractifs et qui correspondent à ses attentes (en termes de finalité, de cible, etc.). Ainsi, cette liste pourra être une source de contre-arguments concernant les sites écoconçus qui seraient nécessairement moches. Ce peut aussi être un moyen de trouver des sources d’inspiration afin de concevoir à son tour des sites écoconçus et attractifs.  

Où sont les sites sobres ? 

Nous avons fait le choix d’éplucher les listes et catalogues de sites sobres, avec en bonus d’autres sites croisés par ailleurs.   

Voici les listes en question :

Il en existe probablement d’autres mais ceci constitue déjà un bel échantillon de départ. Si vous en avez d’autres en tête ou si vous voulez tester la sobriété de votre site, n’hésitez pas à nous contacter.  

Avec cette première liste (plus d’une centaine de références au final), une première analyse a été effectuée. Celle-ci s’appuie principalement sur l’onglet Network des DevTools afin de regarder les requêtes HTTP et la quantité de données transférées.

Au final, il ne reste qu’une quarantaine de sites qui sont alors utilisés pour un benchmark avec l’outil Greenspector.  

Sites sobres : le verdict par la mesure 

Le benchmark des sites retenus permet de les classer en fonction de leurs EcoScores respectifs (l’idéal étant d’obtenir un EcoScore le plus proche possible de 100). 

ClassementURLEcoscoreÉnergie (mAh)Données (Mo)Requêtes HTTPEmpreinte GES (gEqCO2)Empreinte Eau (Litres)Empreinte Sol (m²)
1https://kuroneko.io/fr/944.240.1420.180.040.46
2https://lesraisonnees.co/944.080.21110.190.040.45
3https://brawcoli.fr/924.080.13110.190.040.45
4https://solar.lowtechmagazine.com/924.350.35170.210.040.48
5https://www.pikselkraft.com/914.350.1130.190.040.48
6https://amap-chelles.net/904.590.3440.20.040.5
7https://primitive.wildandslow.fr/904.10.16110.190.040.45
8https://productfornetzero.com903.990.17140.190.040.44
9https://www.mountain-riders.org/904.310.23190.210.040.48
10https://fairness.coop/894.280.09140.20.040.47
11https://jeudi.am/894.470.15200.220.040.5
12https://www.boavizta.org/894.260.2790.20.040.47
13https://lowtechlab.org/fr874.090.2260.180.040.45
14https://www.gov.uk/874.350.24150.210.040.48
15https://www.treebal.green/874.190.8170.210.040.47
16https://www.boutique-natali.com/864.840.44250.250.040.54
17https://designersethiques.org/854.060.28170.20.040.45
18https://oceanfifty.com/854.630.42140.220.040.51
19https://anelym.fr/844.640.17230.230.040.52
20https://lowimpact.organicbasics.com/eur844.650.74330.260.040.53
21https://www.europeansleeper.eu/en844.330.73310.240.040.49
22http://www.biocoopmontreuil.fr/834.750.53230.240.040.53
23https://www.licoornes.coop/824.370.17280.220.040.49
24https://empreintedigitale.fr/814.261.14260.240.040.48
25https://www.international-alert.org/814.670.83280.250.040.53
26https://www.laboutiquedupartage.fr/814.770.31200.230.040.53
27https://www.light-communication.fr/814.530.19130.210.040.5
28https://dolo.biz/fr/804.811.19150.250.040.53
29https://www.polybion.bio/804.881.02100.240.040.54
30https://zugvoegelfestival.org/794.260.52440.250.040.49
31https://pathtech.coop/774.550.6660.210.040.5
32https://dalkia.fr/764.280.89380.250.040.49
33https://sustainablewebdesign.org/764.881.02430.290.050.56
34https://palaeyewear.com/744.511.19780.320.050.54
35https://themarkup.org/735.271.13140.260.050.58
36https://www.ademe.fr/724.750.64260.250.040.53
37https://theadccawards.ca/715.460.2960.240.050.6
38https://flowty.site/636.910.35210.320.060.77
39https://heylow.world/626.140.35190.290.050.68
40https://becolourful.co.uk/606.150.23150.280.050.68
41https://www.ec-lyon.fr/595.060.81430.290.050.58
42https://www.wholegraindigital.com/588.650.65250.410.080.96
43https://daviddaumer.com/507.830.32130.350.070.86

Pour chacun de ses sites web, mesurés sur un smartphone S7 (Android 8), les mesures ont été réalisées au travers de notre Greenspector Benchmark Runner, permettant la réalisation de tests automatisés. Les mesures ont été réalisées fin juin 2022. 

Détail des scénarios :  
– Chargement du site web 
– Scroll de la page 
– Inactivité site web en premier-plan 
– Inactivité 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é. 

Découvrez comment Greenspector évalue l’empreinte environnementale d’un service numérique.

En classant les résultats (ici par EcoScore) et en regardant les extrêmes, on remarque déjà deux choses

  • Quelques sites ont des scores au-dessus de 80 voire de 90. C’est très rare et ça souligne des sites où un grand effort de sobriété numérique a été réalisé.  
  • Quelques sites ont un EcoScore anormalement “bas”. Il s’agit donc de sites plutôt légers mais malgré tout impactant.  

https://daviddaumer.com/ (EcoScore Greenspector 50) : peu de requêtes sur la page, peu de données transférées. Au cas où, on regarde avec EcoIndex et le score A est obtenu (ce qui est le meilleur score possible). La “chute” de l’EcoScore s’explique par des animations qui impactent en continu la batterie du device. Concrètement, ceci signifie que l’affichage de cette page vient accélérer la décharge de la batterie donc augmenter son usure et anticiper le changement de la batterie ou le rachat d’un appareil. Ceci induit de lourds impacts environnementaux, l’essentiel de ceux-ci provenant de la fabrication de l’appareil. Il faudrait limiter l’impact des traitements CSS et JS. Les animations sont-elles nécessaires ? Quel est leur impact sur l’accessibilité et la captation de l’attention ? 

Le raisonnement est à peu près le même pour

  • https://www.wholegraindigital.com/ (EcoIndex B, EcoScore Greenspector 58… et quelques animations dont certaines en continu) 
  • https://www.ec-lyon.fr/ (EcoIndex B, EcoScore Greenspector 59… et un carrousel dont il faudrait s’affranchir) 
  • https://becolourful.co.uk/ (EcoIndex A, EcoScore Greenspector 60)
  • https://heylow.world/ (EcoIndex A, EcoScore Greenspector 62) 
  • https://flowty.site/- (EcoIndex B, EcoScore Greenspector 63) 
  • https://theadccawards.ca/ (EcoIndex A, EcoScore Greenspector 71) : l’impact environnemental des animations est ici loin d’être négligeable, le site étant par ailleurs très léger et sobre. En revanche, cette débauche d’effets visuels nuit gravement à l’utilisabilité du site, en particulier du point de vue de l’accessibilité.  

Au final, ces exemples illustrent un point important sur l’ensemble des éléments à prendre en compte avant d’affirmer qu’un site est sobre ou a bénéficié d’une démarche d’écoconception. Les efforts sur le nombre de requêtes et la quantité de données transférées sont une bonne chose. En revanche, les traitements JS ou CSS (et plus particulièrement les animations) peuvent annuler une bonne partie des bénéfices ainsi obtenus. D’autant plus (et j’insiste sur ce point) que ces animations ont potentiellement un effet néfaste en termes de captation de l’attention mais surtout d’accessibilité. Je vous invite à ce sujet à vous référer entre autres au critère 13.8 du RGAA (Dans chaque page web, chaque contenu en mouvement ou clignotant est-il contrôlable par l’utilisateur ?). L’exemple le plus flagrant ici est https://heylow.world/ avec ses animations très présentes qui nuisent de plus à la lisibilité pour l’ensemble des utilisateurs.  

Analyse du classement des sites sobres 

Nous avons commencé par ce qu’il faut éviter pour produire un site web écoconçu qui soit visuellement agréable sans sacrifier pour autant son utilisabilité. Regardons désormais plus en détail les sites afin d’en extraire des exemples particulièrement pertinents.  

Nous pouvons déjà considérer la liste des sites avec un EcoScore > 70% comme des sites sur lesquels un effort de sobriété a été effectué. Reste à voir ce qui peut les rendre attractifs et lesquels mettre en avant.  

Note : pour éviter d’éventuels biais, le site de Greenspector n’a pas été inclus (même si son EcoScore est autour de 72). 

E-commerce

La liste contient 3 sites de e-commerce :  

https://lowimpact.organicbasics.com : au moment de la rédaction de cet article, le site standard est en maintenance. Sur la version “low impact”, le choix de la sobriété est clairement affiché. L’accent est mis sur les formes simples (via du SVG) et les aplats de couleurs. En revanche, il est regrettable que cette version ne soit pas la version par défaut du site. Ceci nuit grandement à l’impact de cette démarche. 

https://palaeyewear.com : la page d’accueil est plutôt légère et agréable. On y retrouve les éléments classiques pour un tel site : une vidéo (intégrée sobrement), quelques produits, les avis de consommateurs, quelques actualités, un rapport d’impact, etc. Plusieurs bonnes pratiques d’efficience ne sont pas respectées mais cette page s’en sort mieux que la plupart des autres sites de e-commerce. Tout se complique lorsqu’on accède à une fiche-produit. Ce sont ici plus de 100 requêtes et plusieurs Mo de données qui sont transférés. L’effort d’écoconception aurait donc dû être poussé plus loin, notamment en se basant sur un parcours utilisateur (navigation et achat d’un produit) plutôt que seulement sur la page d’accueil.  

https://www.boutique-natali.com : on trouve sur cette page aussi plusieurs éléments propres à ce type de site (promotions en cours, éléments de réassurance, produits mis en avant, etc.) en plus de la mise en avant de la démarche d’écoconception mise en œuvre. La même sobriété se retrouve sur les fiches produit. Certes, certains types de produits vendus en ligne nécessitent probablement plus d’images (par exemple dans le domaine de la mode ou des cosmétiques) mais il s’agit à mon avis là d’une bonne base de réflexion pour concevoir une boutique en ligne légère et agréable d’utilisation.  

Magazines et presse en ligne 

https://themarkup.org est un site sobre et élégant à la fois, ce qui est d’autant plus notable pour de la presse en ligne. Ces sites sont habituellement alourdis entre autres par la pub et les trackers, ce qui n’est pas le cas ici. Un site important à garder en tête, donc, comme exemple de site de presse en ligne écoconçu. Attention toutefois, la légèreté de ce site par rapport à d’autres sites similaires est en partie due à des choix de modèle économique. Une fois de plus, ceci met en évidence le rôle qu’ont à jouer tous les acteurs d’un projet sur le sujet de la sobriété numérique.  

https://solar.lowtechmagazine.com : il s’agit probablement là de l’un des exemples les plus connus. Le choix radical de réduction d’impact environnemental est ici clairement affiché. Ceci ne fera pas forcément l’unanimité (notamment en raison du dithering).  

On retrouve une logique proche sur le site des Designers Ethiques (mise en page proche d’un jounal papier à l’ancienne pour un résultat des plus sobres) voire (pour la structure) sur celui de .Pikselkraft. Le site du Low-tech Lab, s’il en reprend certains éléments, va vers une page plus riche en contenu et avec une structure moins rigide. La page d’accueil semble alors plus attractive et le contenu plus facile à identifier.  

Autres sites 

https://lesraisonnees.co : un site one-page basé sur le scroll. Un site d’agence au contenu classique mais réalisé de façon très sobre et efficiente, très clair. Un très bon exemple.  

https://brawcoli.fr : les éléments classiques sont regroupés en une seule page qui met bien avant ce qui est proposé par ce restaurant.  

https://primitive.wildandslow.fr : on trouve dans la liste de nombreux sites d’agence ou d’indépendants spécialisés dans la réalisation de sites sobres (ce qui est logique voire rassurant). Sur chacun, l’idée est généralement de tout présenter en une seule page avec des aplats de couleurs et peu d’images (toutes optimisées). Primitive by Wild&Slow est assez représentatif tout en se démarquant entre autres par des zones aux contours non-linéaires. Dans d’autres cas, l’accent est mis sur les formes géométriques plutôt que sur des images plus complexes.  

https://www.treebal.green est une variante beaucoup plus riche graphiquement et pour autant assez sobre.  

https://www.mountain-riders.org est un bel exemple d’utilisation des principes vus précédemment avec une charte graphique très contrastée pour un rendu au final propre et attractif. 

Même s’il peut sembler moins attractif que d’autres, https://www.gov.uk brille par sa légèreté et son accessibilité. De gros efforts ont ici été faits au niveau de l’architecture de l’information. Il est en tout cas intéressant d’avoir ici un exemple de service public accessible et sobre.  

 Même si les animations en continu et omniprésentes sont à éviter, certains sites légers les utilisent avec parcimonie :  

Il convient dans tous les cas de garder en tête l’accessibilité ainsi que le fait que ce type d’ajout n’est que cosmétique. Pour certains sites comme https://dolo.biz/fr, l’attractivité de la page d’accueil repose énormément sur les animations mais le tout reste efficient et plutôt plaisant (même s’il ne sera pas forcément pratique pour tout le monde à la navigation, en particulier au clavier).  

De façon totalement subjective, je retiens également https://zugvoegelfestival.org pour le choix des couleurs et la navigation dans la page d’accueil. Il est juste regrettable que les différents éléments de navigation dans le site ne soient pas disponibles (au moins au clic) dès l’arrivée sur le site. 

Et une dernière mention spéciale pour https://sustainablewebdesign.org qui reprend des formes géométriques, des couleurs vives et met l’accent sur l’accessibilité tout en étant une mine d’informations sur l’écoconception web.  

Conclusion 

Le classement présenté ici devrait vous permettre d’avoir un meilleur aperçu de ce qu’il est possible de faire avec un site web sobre. Cette liste est appelée à s’enrichir au fil du temps et à servir d’inspiration pour ceux qui voudraient se lancer dans la création de sites sobres.  

Si le ressenti que l’on peut avoir en utilisant un site est en partie subjectif, l’accessibilité doit être prise en compte et la notion de sobriété creusée autant que nécessaire.  

WEB2DAY – Le Marché de l’Impact : Classement des partenaires de l’évènement

Reading Time: < 1 minute

À l’occasion de l’évènement WEB2DAY, se déroulant du 1er au 3 Juin prochain à Nantes, Greenspector a mesuré l’empreinte environnementale des sites web des partenaires de l’évènement.

Ce classement sera mis à jour tous les matins lors de l’évènement et viendra s’étoffer des sites web des visiteurs.

Classement de l’empreinte environnementale des partenaires

La moyenne d’impact carbone sur une minute de navigation de ces 49 partenaires et 22 visiteurs est de 0,43 gEqCO2.

La moyenne de consommation d’énergie (mAh) est de 5,30 mAh et en moyenne 4,49 Mo de données sont échangées. En termes de requêtes web, la moyenne est de 62 requêtes.

ClassementNomEcoscoreCarbon Impact (gEqCO2)RequêtesÉnergie (mAh)Données échangées (Mo)Empreinte Eau (Litres)Empreinte Sol (m²)
1NumériqueResponsable Zici860.1573.360.1020.030.37
2Treebal800.18173.440.7740.030.39
3Empreinte Digitale720.19253.50.5860.030.4
4ASI710.2253.550.6180.030.4
5Parthema760.21233.820.720.040.43
6BDM770.22194.021.10.040.45
7Greenspector670.22383.740.3860.040.43
8GreenTechInnovation640.22144.121.570.040.46
9Marché de l'impact740.23134.531.210.040.5
10Troopers550.23184.810.420.040.54
11CIC Ouest720.23303.970.990.040.45
12Aguaro700.23383.760.9390.040.43
13Sigma720.24503.510.850.040.41
14France 3620.25344.281.090.040.49
15MyScript700.25433.911.240.040.45
16Toovalu660.25223.92.640.040.44
17HumanCraft770.2674.942.020.050.55
18Popotecolors580.26434.161.340.040.48
19Les Tilleuls Coop710.27553.821.380.040.45
20MAIF610.27384.231.950.040.48
21Shopopop670.28484.12.190.040.48
22Stampyt510.29534.351.770.050.51
23Ecole de Design630.29594.071.810.050.48
24Soho Coaching620.29194.573.660.050.51
25Banque Populaire GO580.3574.51.550.050.52
26Gesco560.3654.031.830.050.48
27SNCF630.3604.161.880.050.49
28Wavestone660.3384.13.370.040.47
29The Tribe560.32704.321.940.050.51
30JaiOuiDire460.32355.072.950.050.58
31ScaleWay570.33584.682.650.050.55
32SEIF470.33525.541.150.060.63
33Dosites450.33166.192.250.060.69
34Fabernovel370.34365.283.320.050.6
35Oxiane530.34874.491.430.050.54
36Twilio460.35624.43.910.050.52
37Largo460.35584.523.720.050.53
38Easyvirt570.35954.341.790.050.53
39Usbek&Rica460.36306.941.440.060.78
40Faguo380.36685.042.560.060.59
41Performanse400.37456.182.550.060.7
42Nantes Université610.37604.334.810.050.51
43Akeneo540.381034.162.780.050.51
44Polypus390.4525.195.440.060.6
45RepasLucide670.4503.917.750.050.46
46Audencia410.41854.953.940.060.59
47WebForce490.41975.242.370.060.63
48SNCF420.41745.144.080.060.61
49BeApp330.42645.674.30.060.66
50La Poste490.42925.353.030.060.64
51Lumiplan660.42604.676.430.060.55
52Eni Ecole460.42755.314.250.060.63
53Voyelle430.441364.772.150.060.6
54Whoz550.451164.754.320.060.59
55Mojom360.461264.564.230.060.57
56RadioFrance350.481495.741.190.070.71
57D Vine360.49886.225.20.070.73
58Astraga310.53878.253.070.090.95
59Flythenest280.541645.443.880.070.69
60Métropole de Nantes460.55535.7311.250.070.67
61The ForkN/A0.61638.797.150.091
62Stratosfair340.639611.171.470.111.27
63Unstatic350.63547.0412.530.080.81
64ADN Consulting290.641009.55.080.11.1
65GuestSuite300.691345.7112.180.080.71
66Pôle Images & Réseaux300.73727.1815.80.090.84
67AFBSHOP230.881807.2315.30.110.91
68Hypercube231.0111216.368.360.161.86
69OnePoint411.16694.8541.010.110.62
70WR2Studio321.481326.6148.050.140.86
71KoralPlay301.995012.3167.020.21.46

Retrouvez-nous sur place au stand du Marché de l’Impact. Le Marché de l’Impact est une initiative créée par la société Toovalu qui a pour but de mettre en avant des solutions opérationnelles locales à impact positif pour réduire les émissions des gaz à effet de serre des entreprises. L’initiative a aussi pour vocation de promouvoir les pratiques vertueuses pour diminuer l’empreinte environnementale du numérique.