À 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.
Le référentiel des 115 bonnes pratiques d’écoconception web du collectif GreenIT.fr propose la BP_027 : “Fournir une CSS print”. Le bref exemple fourni couvre déjà une bonne partie des recommandations que nous détaillerons dans le reste de l’article.
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.
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.
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.
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.
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
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.
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.
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
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.
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
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 :
Ecoscore
Energie
CPU
Données
Mémoires
Requêtes
Impact Carbon (gEqCO2)
Empreinte Eau (Litres)
Empreinte sol (m2)
Moyennes des remesures
57
5.72
1.40
7.30
725
95
0.52
0.071
0.68
Moyennes des mesures initiales
43
5.57
2.92
5.20
682
111
0.49
0.069
0.67
Sites des villes
Là aussi, on commence par regarder l’EcoScore des sites des villes de l’échantillon.
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.
La tendance globale est à la diminution, ce qui est une très bonne chose.
Analyse plus poussée de certains sites
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.
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.
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.
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
version
Villes
ecoscore
Energie
CPU
Données
Mémoire
Requêtes
Carbon
Eau
Sol
https://metropole.rennes.fr/ - remesure
Rennes
82
4,72
1,01
2,20
638,77
43
0,30
0,048
0,541
http://www.lemans.fr/ - remesure
Le Mans
76
4,65
0,64
2,01
686,57
71
0,33
0,051
0,549
https://www.lille.fr/ - remesure
Lille
76
4,99
1,07
4,35
688,68
80
0,41
0,059
0,594
http://www.bordeaux.fr/ - remesure
Bordeaux
75
4,45
0,54
0,51
612,36
26
0,23
0,041
0,500
https://www.lemans.fr/ - remesure
Le Mans
75
4,91
0,75
2
737,59
71
0,34
0,054
0,577
https://www.reims.fr/ - remesure
Reims
71
5,39
1,22
2,70
695,55
61
0,36
0,057
0,625
https://clermont-ferrand.fr/ - remesure
Clermont Ferrand
68
5,34
1,12
1,11
596,62
56
0,32
0,054
0,615
http://www.bordeaux.fr/
Bordeaux
66
3,38
1,78
0,42
486,05
93
0,28
0,04
0,42
https://www.amiens.fr/ - remesure
Amiens
64
5,64
0,71
2,67
871,97
48
0,35
0,057
0,645
https://www.lehavre.fr/ - remesure
Le Havre
63
5,06
1,24
4,32
775,82
88
0,42
0,061
0,606
https://www.lemans.fr/
Le Mans
63
3,73
0,71
3,77
623,83
64
0,33
0,05
0,45
https://www.aixenprovence.fr/ - remesure
Aix
62
5,16
0,74
5,16
748,06
108
0,47
0,065
0,629
http://nice.fr/ - remesure
Nice
62
5,40
1,33
24,73
697,57
65
0,83
0,088
0,658
https://www.paris.fr/ - remesure
Paris
62
6,00
1,85
6,81
718,24
47
0,45
0,066
0,690
https://www.lyon.fr/ - remesure
Lyon
61
4,92
0,95
3,46
740,146
114
0,44
0,062
0,603
https://www.paris.fr/
Paris
59
4,19
2,45
17,64
604,00
49
0,62
0,07
0,51
http://www.lemans.fr/
Le Mans
58
4,08
1,96
2,75
563,91
66
0,32
0,05
0,48
https://metropole.nantes.fr/ - remesure
Nantes
58
5,35
1,31
10,10
740,88
60
0,52
0,067
0,630
https://www.saintdenis.re/ - remesure
Saint Denis
58
5,77
0,87
5,54
715,67
67
0,45
0,065
0,673
https://www.toulouse.fr/ - remesure
Toulouse
57
5,07
0,91
2,91
742,45
103
0,41
0,061
0,613
https://www.nimes.fr/ - remesure
Nimes
56
5,44
1,55
12,29
700,41
115
0,64
0,079
0,673
https://www.saintdenis.re/
Saint Denis
56
4,45
2,78
2,74
592,78
41
0,30
0,05
0,51
https://www.villeurbanne.fr/ - remesure
Villeurbanne
55
5,28
1,13
11,97
625,22
79
0,58
0,072
0,635
https://www.amiens.fr/
Amiens
54
4,02
1,68
2,22
734,33
59
0,30
0,05
0,47
http://www.angers.fr/ - remesure
Angers
54
5,19
1,28
2,16
596,79
62
0,34
0,05
0,603
https://www.marseille.fr/
Marseille
53
4,76
1,74
7,86
402,54
243
0,71
0,09
0,66
https://www.reims.fr/
Reims
53
3,97
1,42
1,29
507,91
82
0,31
0,05
0,48
https://toulon.fr/ - remesure
Toulon
53
5,42
0,65
4,94
945,61
153
0,54
0,074
0,682
https://www.brest.fr/ - remesure
Brest
52
5,30
1,35
3,72
733,54
142
0,50
0,069
0,661
https://www.dijon.fr/
Dijon
51
4,32
2,37
4,19
580,40
91
0,40
0,06
0,53
https://metropole.nantes.fr/
Nantes
50
6,39
2,85
12,60
656,37
62
0,62
0,08
0,75
https://www.montpellier.fr/ - remesure
Montpellier
49
6,27
1,01
9,45
1029,02
73
0,56
0,076
0,737
https://metropole.rennes.fr/
Rennes
49
4,42
2,89
1,85
616,47
48
0,29
0,05
0,51
https://www.marseille.fr/ - remesure
Marseille
48
5,92
1,71
19,55
690,65
201
0,94
0,105
0,782
https://www.lyon.fr/
Lyon
46
4,62
2,85
2,69
573,40
68
0,35
0,05
0,55
https://www.annecy.fr/ - remesure
Annecy
45
5,57
1,79
4,23
692,91
116
0,48
0,069
0,67
https://clermont-ferrand.fr/
Clermont Ferrand
45
5,03
1,76
3,17
462,48
88
0,40
0,06
0,60
https://www.mairie-perpignan.fr - remesure
Perpignan
45
7,33
2,41
9,74
793,54
159
0,73
0,097
0,900
https://www.strasbourg.eu/ - remesure
Strasbourg
43
6,38
3,14
2,79
702,44
84
0,44
0,069
0,746
http://www.angers.fr/
Angers
42
5,59
4,35
3,46
591,16
57
0,39
0,06
0,64
https://www.dijon.fr/ - remesure
Dijon
42
4,66
1,00
1,44
656,469
0,22
0,041
0,511
https://www.grenoble.fr/ - remesure
Grenoble
40
6,08
2,16
6,44
571,02
73
0,49
0,070
0,712
https://www.mairie-perpignan.fr
Perpignan
40
5,19
2,78
2,50
544,38
147
0,48
0,07
0,65
https://www.aixenprovence.fr/
Aix
39
4,61
1,68
7,84
768,69
110
0,51
0,07
0,57
https://www.lille.fr/
Lille
39
6,23
3,39
12,66
852,37
84
0,65
0,08
0,74
https://www.limoges.fr/fr - remesure
Limoges
39
8,51
1,82
2,33
609,38
100
0,54
0,088
0,986
https://www.toulouse.fr/
Toulouse
38
4,57
2,44
3,00
641,75
123
0,43
0,06
0,57
https://www.tours.fr/ - remesure
Tours
38
5,68
0,88
5,67
818,58
0,35
0,055
0,628
https://toulon.fr/
Toulon
37
5,85
2,09
16,48
923,89
215
0,90
0,10
0,78
https://www.brest.fr/
Brest
34
5,77
3,09
3,40
843,12
209
0,61
0,08
0,75
https://www.grenoble.fr/
Grenoble
33
5,66
6,55
5,93
600,86
60
0,45
0,06
0,66
http://nice.fr/
Nice
33
6,07
4,65
26,59
627,28
194
1,09
0,12
0,80
https://www.villeurbanne.fr/
Villeurbanne
33
5,22
2,27
8,72
740,51
128
0,58
0,07
0,65
https://www.lehavre.fr/
Le Havre
32
4,66
3,30
5,40
726,97
106
0,46
0,06
0,57
https://www.montpellier.fr/
Montpellier
30
5,08
1,86
7,20
899,69
168
0,60
0,08
0,66
https://www.nimes.fr/
Nimes
29
4,17
2,32
5,13
715,84
167
0,52
0,07
0,55
https://www.annecy.fr/
Annecy
27
9,60
6,74
2,98
619,48
123
0,64
0,10
1,12
https://www.limoges.fr/fr
Limoges
26
15,12
7,25
1,96
614,32
60
0,75
0,14
1,69
https://www.tours.fr/
Tours
16
10,22
4,78
21,99
961,47
203
1,18
0,15
1,25
https://www.strasbourg.eu/
Strasbourg
8
7,45
7,95
5,83
663,39
0,43
0,07
0,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 :
Ecoscore
Energie
CPU
Données
Mémoires
Requêtes
Impact Carbon (gEqCO2)
Empreinte Eau (Litres)
Empreinte sol (m2)
Moyennes des remesures
58
5.53
1.28
5.92
719
88
0.47
0.066
0.656
Moyennes des mesures initiales
41
5.61
3.16
6.81
658
111
0.53
0.072
0.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é.
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.
Rang
Nom
ecoscore
Carbon Impact (gEqCO2)
requests
Énergie (mAh)
Données (Mo)
Mémoire (Mo)
Empreinte eau (Litres)
Empreinte sol (m2)
1
CIC
81
0,19
31
2,97
1
531,87
0,03
0,34
2
Le Blog du Modérateur
84
0,2
18
3,57
1,06
605,54
0,03
0,40
3
La Cantine
80
0,22
38
3,2
1,34
570,44
0,03
0,37
4
Banque des territoires
73
0,22
51
2,92
1,31
669,14
0,03
0,35
5
Whome
76
0,26
43
3,14
3,32
661,64
0,04
0,37
6
sfr
63
0,27
68
3,51
1,45
674,38
0,04
0,42
7
Chateau des Ducs de Bretagne
62
0,27
48
3,9
1,91
757,64
0,04
0,45
8
BNP Paribas
72
0,28
77
3,12
2,11
669,86
0,04
0,39
9
Cobage
67
0,31
72
3,3
3,15
582,25
0,04
0,40
10
Mismo
61
0,31
73
3,78
2,48
864,87
0,05
0,46
11
Enedis
52
0,35
57
3,5
5,91
716,59
0,05
0,42
12
Sogetrel
52
0,37
103
3,47
3,76
860,64
0,05
0,44
13
Ecosystem
36
0,37
52
4,93
4,33
744,72
0,05
0,57
14
_icilundi
69
0,38
27
3,37
9,48
661,03
0,05
0,40
15
PALO IT
61
0,39
87
3,8
5,04
708,84
0,05
0,47
16
Université de Nantes
71
0,4
61
3,46
8,16
650,39
0,05
0,42
17
VIF
51
0,41
112
3,79
4,41
826,63
0,05
0,48
18
La Box Loire Atlantique
63
0,47
91
3,74
8,63
650,42
0,06
0,47
19
Radio Prun'
50
0,48
44
3,56
12,92
712,56
0,05
0,43
20
Maison Europe
58
0,55
149
4
8,09
695,45
0,07
0,53
21
Isefac Bachelor
41
0,6
181
3,82
8,4
915,64
0,07
0,53
22
Accenture
35
0,61
63
6,92
11,29
647,93
0,08
0,80
23
Tele Nantes
48
0,8
146
3,43
21,39
821,12
0,08
0,48
24
Groupe Onepoint
57
1,11
84
3,36
40,15
744,13
0,10
0,47
25
Saint Nazaire Tourisme
47
1,5
70
4,16
58,42
761,91
0,13
0,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é.
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 :
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.
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.
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
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).
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.
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).
version
ecoscore
CO2 impact (gEqCO2)
requests
Energie (mAh)
Données échangées (Mo)
CPU (%)
Empreinte eau (Litres)
Empreinte sol (m2)
Mémoire (Mo)
hskr.ru
60
0,30
23
5,45
1,82
2,71
0,05
0,61
682,42
ladispensadelchianti.it
75
0,31
56
4,73
1,57
1,14
0,05
0,55
511,82
ingridparis.com
65
0,36
38
5,54
3,59
2,11
0,06
0,63
632,50
azzerad.com
63
0,38
75
5,59
1,98
1,50
0,06
0,65
735,91
marcoambrosi.salon
52
0,41
47
5,81
4,75
2,44
0,06
0,67
701,52
once-lifetime.com
45
0,45
56
5,73
6,37
2,24
0,06
0,66
734,36
grege-interieurs.com
39
0,64
26
11,20
6,80
5,06
0,11
1,25
746,73
webflow.com
33
0,67
179
6,34
7,17
3,21
0,09
0,80
863,02
lamalama.n
42
0,71
21
9,71
13,42
4,71
0,10
1,09
828,77
blueyard.com
56
0,72
50
8,02
15,13
2,56
0,10
0,92
575,93
datagrid.co.jp
29
0,80
128
9,34
11,02
3,15
0,11
1,10
671,31
betterup.com
27
0,81
121
11,28
7,85
3,51
0,12
1,31
862,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.
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.
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é.
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 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 :
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.
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 :
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) :
Le comportement est le même avec l’image 2 qui est à 45ko :
C’est le même comportement pour l’image 3 :
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.
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 :
Ainsi que le format Webp :
Dans tous les cas, optimisez vos images, compressez, réduisez la taille et lazy-loadez !
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é)
Classement projeté en impact carbone des applications de visioconférences (gEqCO2) sur mobile
Scénario / Année
1 mn de visioconférence en audio
1 mn de visioconférence en audio + caméra
1 mn de visioconférence en audio + partage d’écran
2022
0,31 gEqCO2
1,10 gEqCO2
0,54 gEqCO2
Équivalence en mètres parcourus en véhicule léger
2,76 mètres
9,82 mètres
4,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 Teams
Whereby
Microsoft Teams & Zoho Meeting
Cisco Webex Meeting
Zoho Meeting
Zoom & Google Meet
JITSI Meet
Teams & Zoom
Cisco 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ée
1 mn de visioconférence en audio
1 mn de visioconférence en audio + caméra
1 mn de visioconférence en audio + partage d’écran
2022
6,68 mAh
14,29 mAh
7,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 audio
Moyenne : 1 mn de visioconférence en audio + caméra
Moyenne : 1 mn de visioconférence en audio + partage d’écran
17,255 mAh
23,654 mAh
22,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 Jeans
Zoho Meeting
Zoho Meeting
Cisco Webex Meeting
Zoom
Teams
Google Meet
Teams
BlueJeans
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ée
1 mn de visioconférence en audio
1 mn de visioconférence en audio + caméra
1 mn de visioconférence en audio + partage d’écran
2022
0,88 Mo
10,34 Mo
4,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 Jeans
Whereby
Zoho Meeting
Zoho Meeting
Zoho Meeting
Skype
Whereby
Skype
Zoom
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.
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.
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.
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.
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).
Classement
URL
Ecoscore
Énergie (mAh)
Données (Mo)
Requêtes HTTP
Empreinte GES (gEqCO2)
Empreinte Eau (Litres)
Empreinte Sol (m²)
1
https://kuroneko.io/fr/
94
4.24
0.14
2
0.18
0.04
0.46
2
https://lesraisonnees.co/
94
4.08
0.21
11
0.19
0.04
0.45
3
https://brawcoli.fr/
92
4.08
0.13
11
0.19
0.04
0.45
4
https://solar.lowtechmagazine.com/
92
4.35
0.35
17
0.21
0.04
0.48
5
https://www.pikselkraft.com/
91
4.35
0.11
3
0.19
0.04
0.48
6
https://amap-chelles.net/
90
4.59
0.34
4
0.2
0.04
0.5
7
https://primitive.wildandslow.fr/
90
4.1
0.16
11
0.19
0.04
0.45
8
https://productfornetzero.com
90
3.99
0.17
14
0.19
0.04
0.44
9
https://www.mountain-riders.org/
90
4.31
0.23
19
0.21
0.04
0.48
10
https://fairness.coop/
89
4.28
0.09
14
0.2
0.04
0.47
11
https://jeudi.am/
89
4.47
0.15
20
0.22
0.04
0.5
12
https://www.boavizta.org/
89
4.26
0.27
9
0.2
0.04
0.47
13
https://lowtechlab.org/fr
87
4.09
0.22
6
0.18
0.04
0.45
14
https://www.gov.uk/
87
4.35
0.24
15
0.21
0.04
0.48
15
https://www.treebal.green/
87
4.19
0.8
17
0.21
0.04
0.47
16
https://www.boutique-natali.com/
86
4.84
0.44
25
0.25
0.04
0.54
17
https://designersethiques.org/
85
4.06
0.28
17
0.2
0.04
0.45
18
https://oceanfifty.com/
85
4.63
0.42
14
0.22
0.04
0.51
19
https://anelym.fr/
84
4.64
0.17
23
0.23
0.04
0.52
20
https://lowimpact.organicbasics.com/eur
84
4.65
0.74
33
0.26
0.04
0.53
21
https://www.europeansleeper.eu/en
84
4.33
0.73
31
0.24
0.04
0.49
22
http://www.biocoopmontreuil.fr/
83
4.75
0.53
23
0.24
0.04
0.53
23
https://www.licoornes.coop/
82
4.37
0.17
28
0.22
0.04
0.49
24
https://empreintedigitale.fr/
81
4.26
1.14
26
0.24
0.04
0.48
25
https://www.international-alert.org/
81
4.67
0.83
28
0.25
0.04
0.53
26
https://www.laboutiquedupartage.fr/
81
4.77
0.31
20
0.23
0.04
0.53
27
https://www.light-communication.fr/
81
4.53
0.19
13
0.21
0.04
0.5
28
https://dolo.biz/fr/
80
4.81
1.19
15
0.25
0.04
0.53
29
https://www.polybion.bio/
80
4.88
1.02
10
0.24
0.04
0.54
30
https://zugvoegelfestival.org/
79
4.26
0.52
44
0.25
0.04
0.49
31
https://pathtech.coop/
77
4.55
0.66
6
0.21
0.04
0.5
32
https://dalkia.fr/
76
4.28
0.89
38
0.25
0.04
0.49
33
https://sustainablewebdesign.org/
76
4.88
1.02
43
0.29
0.05
0.56
34
https://palaeyewear.com/
74
4.51
1.19
78
0.32
0.05
0.54
35
https://themarkup.org/
73
5.27
1.13
14
0.26
0.05
0.58
36
https://www.ademe.fr/
72
4.75
0.64
26
0.25
0.04
0.53
37
https://theadccawards.ca/
71
5.46
0.29
6
0.24
0.05
0.6
38
https://flowty.site/
63
6.91
0.35
21
0.32
0.06
0.77
39
https://heylow.world/
62
6.14
0.35
19
0.29
0.05
0.68
40
https://becolourful.co.uk/
60
6.15
0.23
15
0.28
0.05
0.68
41
https://www.ec-lyon.fr/
59
5.06
0.81
43
0.29
0.05
0.58
42
https://www.wholegraindigital.com/
58
8.65
0.65
25
0.41
0.08
0.96
43
https://daviddaumer.com/
50
7.83
0.32
13
0.35
0.07
0.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é.
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 ?
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.
À 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.
Classement
Nom
Ecoscore
Carbon Impact (gEqCO2)
Requêtes
Énergie (mAh)
Données échangées (Mo)
Empreinte Eau (Litres)
Empreinte Sol (m²)
1
NumériqueResponsable Zici
86
0.15
7
3.36
0.102
0.03
0.37
2
Treebal
80
0.18
17
3.44
0.774
0.03
0.39
3
Empreinte Digitale
72
0.19
25
3.5
0.586
0.03
0.4
4
ASI
71
0.2
25
3.55
0.618
0.03
0.4
5
Parthema
76
0.21
23
3.82
0.72
0.04
0.43
6
BDM
77
0.22
19
4.02
1.1
0.04
0.45
7
Greenspector
67
0.22
38
3.74
0.386
0.04
0.43
8
GreenTechInnovation
64
0.22
14
4.12
1.57
0.04
0.46
9
Marché de l'impact
74
0.23
13
4.53
1.21
0.04
0.5
10
Troopers
55
0.23
18
4.81
0.42
0.04
0.54
11
CIC Ouest
72
0.23
30
3.97
0.99
0.04
0.45
12
Aguaro
70
0.23
38
3.76
0.939
0.04
0.43
13
Sigma
72
0.24
50
3.51
0.85
0.04
0.41
14
France 3
62
0.25
34
4.28
1.09
0.04
0.49
15
MyScript
70
0.25
43
3.91
1.24
0.04
0.45
16
Toovalu
66
0.25
22
3.9
2.64
0.04
0.44
17
HumanCraft
77
0.26
7
4.94
2.02
0.05
0.55
18
Popotecolors
58
0.26
43
4.16
1.34
0.04
0.48
19
Les Tilleuls Coop
71
0.27
55
3.82
1.38
0.04
0.45
20
MAIF
61
0.27
38
4.23
1.95
0.04
0.48
21
Shopopop
67
0.28
48
4.1
2.19
0.04
0.48
22
Stampyt
51
0.29
53
4.35
1.77
0.05
0.51
23
Ecole de Design
63
0.29
59
4.07
1.81
0.05
0.48
24
Soho Coaching
62
0.29
19
4.57
3.66
0.05
0.51
25
Banque Populaire GO
58
0.3
57
4.5
1.55
0.05
0.52
26
Gesco
56
0.3
65
4.03
1.83
0.05
0.48
27
SNCF
63
0.3
60
4.16
1.88
0.05
0.49
28
Wavestone
66
0.3
38
4.1
3.37
0.04
0.47
29
The Tribe
56
0.32
70
4.32
1.94
0.05
0.51
30
JaiOuiDire
46
0.32
35
5.07
2.95
0.05
0.58
31
ScaleWay
57
0.33
58
4.68
2.65
0.05
0.55
32
SEIF
47
0.33
52
5.54
1.15
0.06
0.63
33
Dosites
45
0.33
16
6.19
2.25
0.06
0.69
34
Fabernovel
37
0.34
36
5.28
3.32
0.05
0.6
35
Oxiane
53
0.34
87
4.49
1.43
0.05
0.54
36
Twilio
46
0.35
62
4.4
3.91
0.05
0.52
37
Largo
46
0.35
58
4.52
3.72
0.05
0.53
38
Easyvirt
57
0.35
95
4.34
1.79
0.05
0.53
39
Usbek&Rica
46
0.36
30
6.94
1.44
0.06
0.78
40
Faguo
38
0.36
68
5.04
2.56
0.06
0.59
41
Performanse
40
0.37
45
6.18
2.55
0.06
0.7
42
Nantes Université
61
0.37
60
4.33
4.81
0.05
0.51
43
Akeneo
54
0.38
103
4.16
2.78
0.05
0.51
44
Polypus
39
0.4
52
5.19
5.44
0.06
0.6
45
RepasLucide
67
0.4
50
3.91
7.75
0.05
0.46
46
Audencia
41
0.41
85
4.95
3.94
0.06
0.59
47
WebForce
49
0.41
97
5.24
2.37
0.06
0.63
48
SNCF
42
0.41
74
5.14
4.08
0.06
0.61
49
BeApp
33
0.42
64
5.67
4.3
0.06
0.66
50
La Poste
49
0.42
92
5.35
3.03
0.06
0.64
51
Lumiplan
66
0.42
60
4.67
6.43
0.06
0.55
52
Eni Ecole
46
0.42
75
5.31
4.25
0.06
0.63
53
Voyelle
43
0.44
136
4.77
2.15
0.06
0.6
54
Whoz
55
0.45
116
4.75
4.32
0.06
0.59
55
Mojom
36
0.46
126
4.56
4.23
0.06
0.57
56
RadioFrance
35
0.48
149
5.74
1.19
0.07
0.71
57
D Vine
36
0.49
88
6.22
5.2
0.07
0.73
58
Astraga
31
0.53
87
8.25
3.07
0.09
0.95
59
Flythenest
28
0.54
164
5.44
3.88
0.07
0.69
60
Métropole de Nantes
46
0.55
53
5.73
11.25
0.07
0.67
61
The Fork
N/A
0.61
63
8.79
7.15
0.09
1
62
Stratosfair
34
0.63
96
11.17
1.47
0.11
1.27
63
Unstatic
35
0.63
54
7.04
12.53
0.08
0.81
64
ADN Consulting
29
0.64
100
9.5
5.08
0.1
1.1
65
GuestSuite
30
0.69
134
5.71
12.18
0.08
0.71
66
Pôle Images & Réseaux
30
0.73
72
7.18
15.8
0.09
0.84
67
AFBSHOP
23
0.88
180
7.23
15.3
0.11
0.91
68
Hypercube
23
1.01
112
16.36
8.36
0.16
1.86
69
OnePoint
41
1.16
69
4.85
41.01
0.11
0.62
70
WR2Studio
32
1.48
132
6.61
48.05
0.14
0.86
71
KoralPlay
30
1.99
50
12.31
67.02
0.2
1.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.
Greenspector may use cookies to improve your experience. We are careful to only collect essential information to better understand your use of our website.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
