La découverte du fait que le numérique n’était pas si virtuel et qu’il pouvait avoir un impact sur l’environnement a amené une multitude d’injonctions suivi d’une multitude de critiques et de contre-injonctions. “Il faut supprimer ses mails”, “Non c’est comme faire pipi dans la douche, cela ne sert à rien”… La critique de ces actions par les acteurs du numérique est assez forte relativement à la grande partie de la population “non technique” qui a pris cela à cœur (et qui a augmenté son éco-anxiété !).
Ces discussions ont aussi amené à départager le plus pollueur entre l’usage et la fabrication. Usage du mail versus Fabrication du terminal sur lequel on lisait le mail. Ce dernier étant annoncé comme plus impactant, cela allait dans le sens d’une inutilité d’optimiser la partie mail!
Oui l’impact se concentre sur la fabrication des terminaux. Oui l’impact unitaire d’un mail est faible, surtout comparé à une raclette (c’est une private joke, une blague qui circule chez les détracteurs de la sobriété numérique). Ce sont des messages assez rassurants dans un monde binaire. Rassurant pour limiter l’eco-anxiété. Mais surtout rassurant pour les acteurs du numérique pour ne pas traiter le problème et continuer le business-as-usual.
Car oui il y a bien un potentiel problème. En effet, l’effet d’échelle fait qu’un impact unitaire faible peut amener à un impact important avec un grand nombre d’utilisateurs et des usages de plus en plus nombreux. Les 4% d’impact du numérique n’arrivent pas comme cela. Surtout quand on liste et observe ce qui se passe sur internet chaque minute.
L’emballage plastique de nos aliments, pris unitairement n’a pas un impact énorme. C’est quelques milligrammes de plastique mais ce dernier est bien un problème environnemental global. Comme le dirait Gerry McGovern, le plastique est une plaie environnementale mais si tu as un sac plastique, utilise-le !
“Avoid plastic packaging. Bring your own bag and avoid the barcodes. Whenever you can replace plastic with another material, do, but don’t replace it simply for the sake of it. If you have a plastic bag, use the hell out of it.”
Gerry McGovern
En tant qu’acteur du numérique, nous devons travailler sur les impacts car l’effet d’échelle fait que nos solutions ont un impact global non négligeable. Utiliser l’argument “d’ordre de grandeur” en ne prenant que l’impact unitaire n’est pas valide.
Derrière un email, il y a un éditeur de solution. Derrière un réseau social, aussi. Chaque acteur du numérique contribue à une brique utilisée au final par un utilisateur.
Il est donc nécessaire d’optimiser nos solutions, de proposer de meilleure gestion des solutions. Quid des options de suppression de mail intelligente qui seraient proposées dans les solutions mail ? Quid la fourniture de solutions d’aide à la rédaction de mail sobre (pièces jointes, signatures…) ? C’est possible, les éditeurs l’ont fait pour la gestion des spams, pourquoi ne pas aller plus loin ?
Quant à la sensibilisation des utilisateurs, elle est nécessaire mais elle doit être moins anxiogène, sans passer dans du whataboutisme.
Dans cet article, nous allons voir plus en détail comment est calculé l’écoscore dans le cas d’un benchmark web réalisé par Greenspector.
Et dans les autres cas ?
Comme vous le savez peut-être déjà, Greenspector réalise également des mesures sur applications mobiles. Dans le cas des applications Android, il est possible de réaliser facilement un benchmark. On reste sur une méthodologie standard : mesures sur les étapes de chargement, pauses et référence. L’écoscore est là aussi calculé à partir des écoscores Réseau et Ressources Client. La seule différence notable est que la mise en œuvre des bonnes pratiques n’est pas contrôlée automatiquement et n’entre donc pas dans le calcul.
Aussi, dans certains cas, il est plus judicieux de mesurer directement un parcours utilisateur afin d’être au plus près du comportement du site dans ses conditions réelles d’utilisation. Que ce soit dans le cas du web ou d’une application mobile, Greenspector réalise les mesures (toujours sur terminaux utilisateurs réels) après automatisation du parcours (via le langage GDSL). L’écoscore est ensuite établi à partir des métriques représentées via 3 écoscores : Données mobiles, Performance et Energie.
Qu’est-ce qu’un benchmark web ?
Afin d’évaluer les impacts environnementaux des sites web, Greenspector dispose de plusieurs modes opératoires et outils. Le plus simple à mettre en place est le benchmark web. Cette méthodologie standard permet de mesurer n’importe quelle page web et de la comparer avec d’autres pages.
Notre Test Bench
Les mesures sont effectuées sur un smartphone réel disponible sur notre banc de test, le plus souvent en WIFI (même si d’autres modes de connexion, type 3G ou 4G par exemple, sont possibles) et avec le navigateur Chrome.
Une telle mesure dure 70 secondes et inclut :
Le chargement de la page
Une étape de pause avec la page affichée au premier plan
Une étape de pause avec la page affichée à l’arrière-plan
Le scrolling sur la page
A ceci s’ajoute une mesure de référence sur un onglet vide de Chrome.
Plusieurs itérations de mesure sont réalisées afin de s’assurer de leur stabilité.
On récupère ainsi des métriques sur les données transférées mais aussi l’impact sur le terminal de l’utilisateur et en particulier sur la décharge de la batterie. En plus de cela, la bonne mise en œuvre d’une trentaine de bonnes pratiques est vérifiée automatiquement.
Une fois toutes ces informations disponibles, il devient facile de comparer différentes pages web, qu’elles soient ou non sur le même site. C’est ce mode opératoire qui est utilisé notamment dans le cadre des classements de sites proposés sur ce blog mais aussi à la demande d’un client afin d’établir un état des lieux sur un ou plusieurs de ses sites web et de proposer un plan d’action. Ce peut aussi être un moyen de construire un benchmark concurrentiel permettant de se positionner par rapport à un échantillon de sites similaires.
Vous pouvez d’ores et déjà avoir un aperçu de tout ceci via le Mobile Efficiency Index (MEI) mis à disposition par Greenspector afin d’évaluer gratuitement l’impact d’une page web.
Il ne nous reste pour l’heure qu’à voir comment est calculé l’écoscore dans le cadre d’un benchmark web.
Calcul de l’écoscore pour un benchmark web
Tout d’abord, l’écoscore établi pour une page web est la moyenne de deux valeurs :
Un écoscore Ressources Client qui reflète la façon dont les ressources client sont gérées du point de vue de la sobriété lors de l’accès à cette page
Un écoscore Réseau qui reflète la sollicitation du réseau (et des serveurs)
Ecoscore Ressources Client
L’écoscore Client repose sur 12 contrôles effectués sur les métriques directement récupérées sur le terminal utilisateur (et collectées via son système d’exploitation). Celles-ci concernent entre autres les données transférées mais aussi la décharge de la batterie, le CPU et la mémoire. Pour chacune, 4 à 5 seuils sont définis afin de déterminer les valeurs acceptables. En fonction de ces seuils, une note est calculée. Les notes pour l’ensemble des métriques sont ensuite agrégées afin de calculer l’Ecoscore Client.
Par exemple :
La note maximale concernant les données transférées lors du chargement de la page ne pourra être obtenue que si leur poids total est inférieur à 500 ko
Pour la décharge de la batterie, on compare à celle mesurée lors de l’étape de référence décrite précédemment
Les seuils utilisés sont définis via une base de mesures afin de pouvoir, en fonction de la répartition statistique des mesures précédemment obtenues, déterminer les seuils attendus.
Ecoscore Réseau
Aujourd’hui, la méthodologie Greenspector repose sur des mesures uniquement réalisées sur des terminaux utilisateurs réels. En conséquence, la définition de l’écoscore Réseau est légèrement différente. Elle repose sur deux éléments :
La comparaison des métriques liées au transfert de données avec des seuils définis de façon similaire à ceux utilisés pour le calcul de l’écoscore Client
La vérification automatique de la mise en œuvre d’une trentaine de bonnes pratiques
Ainsi, par exemple, on s’assure que les ressources textuelles sont bien compressées côté serveur, que les images ne sont pas retaillées dans le navigateur et qu’il n’y a pas plus de 25 requêtes HTTP en tout. Il s’agit donc ici de bonnes pratiques techniques (plutôt orientées efficience) que l’on retrouve dans la plupart des référentiels de bonnes pratiques d’écoconception ou de conception responsable de services numériques.
Conclusion
Tous ces éléments font du benchmark web un procédé très efficace pour évaluer les impacts d’une page web et la comparer avec d’autres pages web. Il s’agit aussi d’un excellent moyen d’amorcer une analyse plus poussée, notamment en regardant en priorité les pages les plus impactantes d’un site. Dans certains cas, il sera d’ailleurs plus judicieux de commencer par les pages les moins impactantes. Un défaut de conception sur une page plus impactante lui sera souvent propre alors que, sur une page moins impactante, il sera souvent commun à l’ensemble des pages.
Le benchmark web, entre autres via le calcul de l’écoscore, illustre une fois de plus la nécessité d’utiliser à la fois des mesures et des bonnes pratiques dans une démarche de réduction des impacts environnementaux d’un service numérique.
En effet, L’Oréal s’associe à STATION F et l’Incubateur HEC Paris afin de créer un accélérateur pour start-ups dans le plus grand campus de start-ups au monde.
Greenspector X L’Oréal Beauty Tech Atelier
Le L’Oréal Beauty Tech Atelier représente, entre autres, 67 startups accélérées depuis 2018, 55 % de start-ups internationales et 30 % des structures avec des solutions impactantes.
« On est ravi et très fier de rejoindre le programme d’accélération BeautyTech. Pour Greenspector, c’est la poursuite d’un travail déjà réalisé pour accompagner les équipes Digital du Groupe L’Oréal pour mesurer et réduire l’impact environnemental des services numériques web, mobile et IoT du Groupe. C’est aussi l’occasion de structurer et renforcer notre projet dans le cadre de l’Incubateur HEC Paris. Une vraie belle opportunité pour la scalabilité de notre projet. Merci ! et … GO GREEN ! » témoigne Thierry LEBOUCQ, président de Greenspector.
Nous sommes aussi fiers de voir l’engagement grandissant sur les enjeux sociétaux et environnementaux. Le programme est loin de ne compter que nous dans la catégorie Tech4Good.
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.
A l’heure où l’on parle de plus en plus de numérique responsable, il est important de revenir sur cette notion. D’autant plus qu’elle constitue le cœur de l’activité de Greenspector.
Définition
Le numérique responsable est une approche globale du numérique, respectueuse de la planète et des individus.
Depuis quelques années, ce sujet prend de plus en plus d’ampleur. On voit cette notion un peu partout mais souvent limitée dans son approche à la prise en compte de l’impact environnemental. L’écoconception a été pour beaucoup le point d’entrée vers le numérique responsable. Mais ce dernier aborde des problématiques bien plus larges :
Ecoconception et prise en compte des impacts environnementaux du numérique
Accessibilité numérique et inclusion
Economie de l’attention
Respect des données personnelles et protection de la vie privée
Cybersécurité
Ethique
Low tech et lutte contre le solutionnisme technologique
Les différents volets du numérique responsable
La prise en compte des impacts environnementaux joue un rôle crucial pour les services numériques. En effet, au-delà des consommations de ressources liées à leur utilisation (par exemple, l’énergie nécessaire pour charger la batterie), ces services ont un impact sur les équipements des utilisateurs : usure de la batterie et des composants, surcharge de la mémoire et du système… encourageant le changement précoce de ces terminaux pour d’autres plus récents voire neufs. Or, aujourd’hui, la fabrication de ces équipements représente la phase des services numériques la plus impactante pour l’environnement. Il convient donc de créer des sites web, applications mobiles et autres services numériques aussi peu impactant que possible.
Ajoutez à cela la loi REEN ainsi que les outils d’évaluation d’impacts des services numériques.
Au final, on voit que le sujet prend de l’ampleur et gagne en structuration. On ne peut que s’en réjouir, même s’il reste encore du chemin à parcourir.
Les bénéfices pour les utilisateurs et les entreprises sont considérables. Globalement, cette démarche permet une amélioration de l’expérience utilisateur (et en particulier de la performance) ainsi qu’une réduction des coûts de développement, de maintenance et d’hébergement. De même, l’adoption de l’écoconception entraîne le développement de l’expertise, une amélioration de l’image de marque et constitue un facteur d’attractivité pour les clients mais aussi pour les futurs collaborateurs.
Par ricochet, un service numérique écoconçu aura un périmètre souvent plus réduit, ce qui facilitera sa sécurisation, sa mise en conformité pour l’accessibilité et tendra à restreindre les données personnelles collectées.
L’écoconception tend également à laisser de côté les mécanismes visant à capter l’attention (scroll infini, autoplay des vidéos, notifications à outrance, etc). Ceci constitue également une avancée éthique : l’utilisateur n’est plus seulement un consommateur qu’il faut réussir à retenir par tous les moyens possibles. On gagne sa confiance et son adhésion en lui fournissant d’abord un service de qualité, adapté à ses attentes.
Enfin, en remettant l’utilisateur au centre des considérations, la sobriété numérique tend à éviter le solutionnisme technologique. On évitera ainsi (entre autres) d’aller vers des services numériques lorsque cela n’apparaît pas nécessaire. Parfois, un bon vieux SMS peut remplacer un site web ou une application mobile : une solution low tech peut permettre de répondre tout aussi bien (parfois même mieux) aux besoins utilisateur.
À l’heure où de plus en plus de services (dont publics) se digitalisent, l’accessibilité des services numériques est un sujet central, dans une démarche d’inclusion et d’accès aux services pour tous. Malheureusement, ce sujet important ne reçoit pas encore toute l’attention nécessaire, bien que de nombreux outils existent et se développent. Le référentiel (RGAA) en est aujourd’hui à sa quatrième version et le cadre législatif s’étend aux structures publiques ainsi qu’aux entreprises dont le CA dépasse 250 millions d’euros. Il propose une approche concrète des WCAG : panel complet des recommandations du W3C pour du contenu web accessible. Les outils de vérification sont nombreux, même s’ils ne sont pas suffisants pour vérifier l’ensemble des critères.
Au-delà des sanctions qu’encourent les entreprises en cas de non-respect des obligations, les bénéfices de cette démarche sont nombreux :
S’assurer que tout le monde puisse accéder aux services et informations proposées dans de bonnes conditions.
Toucher un public aussi large que possible, notamment via le curb cut effect.
Développer une expertise en interne (rétention des salariés et attractivité pour le recrutement).
L’économie de l’attention est un domaine relativement peu connu en tant que tel, alors qu’il est déjà profondément ancré dans notre quotidien. Il s’agit de l’ensemble des mécanismes (de design, de conception, fonctionnels et autres) qui nous rendent accros à nos smartphones et à certaines applis. On parle ici des mécanismes captologiques (ou deceptive patterns) : scroll infini, notifications, modales, autoplay, etc. Via ces choix de conception, le temps passé sur nos mobiles augmente et notre capacité d’attention diminue. L’enjeu autour de notre attention est avant tout financier. Tout ceci est détaillé dans l’ouvrage La civilisation du poisson rouge et des structures telles que Designers Ethiques se sont déjà emparés du sujet.
Cette problématique est d’autant plus fondamentale que l’on se retrouve face à des outils conçus pour y passer le plus de temps possible alors même que leur utilisation a un impact environnemental non-négligeable (via l’usure des terminaux, leur consommation énergétique mais aussi en poussant in fine des comportements consuméristes notamment via l’exposition massive à des publicités). À noter qu’à ces impacts néfastes sur l’environnement et l’individu, s’ajoutent des considérations éthiques puisque de ce système résulte souvent une plus grande captation de données personnelles.
À propos des données personnelles, la question n’est pas nouvelle mais la mise en place du RGPD a constitué un tournant important. Le but est ici de réglementer la captation et le stockage des données personnelles des citoyens européens mais aussi par des entreprises européennes. Ce sujet complexe est notamment lié au micro targeting (publicité ciblée en fonction des données collectées sur l’internaute) et est d’autant plus vertigineux qu’il implique des entreprises achetant et revendant des données personnelles (data brokers, le tout sur fond de surveillance et d’enjeux politiques comme dans le cas de Cambridge Analytica). Plus récemment, le sujet des données personnelles est revenu dans les discussions suite à la remise en question de l’utilisation de Google Analytics et des polices Google, en particulier en France. Sans compter les fuites de données personnelles qui surviennent très régulièrement.
La cybersécurité est présente partout, via les failles de sécurité et autres incidents dont on entend parler régulièrement. Aujourd’hui, il semblerait aberrant voire irresponsable de proposer un service numérique qui ne soit pas sécurisé. Pour autant, ce domaine exige de nombreuses compétences ainsi qu’une veille constante. Là aussi, la sobriété numérique peut réduire la surface d’attaque d’un service numérique. En contrepartie, il faut veiller à ce que la protection de l’utilisateur ne l’oblige pas à mettre trop souvent à jour ses applications et logiciels, sous peine de tendre vers l’obsolescence logicielle. De même, l’open source permet, via une transparence totale, de prévenir la présence de vulnérabilités.
L’éthique est un sujet complexe mais nécessaire dans le domaine du numérique. Il est souvent au cœur des discussions, notamment sur le vaste sujet des algorithmes et du Machine Learning, par exemple dans le cas des voitures autonomes. Afin de concevoir un numérique respectueux des individus, la question de l’éthique est indissociable.
Enfin, le solutionnisme technologique, largement théorisé par Evgeny Morozov, avertit sur le fait que le numérique n’est pas toujours une solution appropriée. Cette prise de conscience est d’autant plus essentielle alors que l’on cherche justement à réduire l’impact environnemental du numérique.
Le numérique responsable dans le cadre du travail chez Greenspector
Chez Greenspector, le numérique responsable est au cœur de notre métier. Même si notre préoccupation première reste la réduction des impacts environnementaux des services numériques, tout ceci est accompagné de considérations liées au numérique responsable. Les liens inextricables entre les différents volets de ce sujet font qu’il est essentiel de garantir une approche globale afin de ne pas passer à côté d’un axe d’amélioration, voire pour ne pas fournir une préconisation qui léserait les utilisateurs d’une façon ou d’une autre (dégradation de l’accessibilité, risque pour la sécurité, etc). Si l’impact n’est pas toujours mesurable directement ou le gain en apparence minime du point de vue la sobriété, d’autres axes comme l’accessibilité, l’absence de mécanismes captologiques et le respect de la vie privée contribueront à rendre un produit plus résilient. C’est pourquoi (et ce n’est qu’un exemple parmi d’autres), nous encourageons nos clients à ne pas intégrer directement de contenus en provenance de services tiers comme Youtube, Twitter et autres.
Pour cela, Greenspector accompagne ses clients dans l’écoconception de produits sur tout le cycle de vie du projet mais aussi dans la mesure des consommations et le suivi dans le temps des impacts, en complément (par exemple) d’une démarche d’amélioration continue. Ce sont ces principes que nous appliquons également à nos propres produits.
Afin d’œuvrer pour un numérique respectueux des personnes et de la planète, il apparaît essentiel d’appliquer ces valeurs jusque dans le cadre de travail proposé : laisser la possibilité à chacun de télétravailler autant que nécessaire, insister sur le droit à la déconnexion et laisser à chacun la possibilité d’adapter ses horaires à ses propres besoins. Il y a également la volonté de libérer du temps à chacun pour mener de la veille autour du numérique responsable, de ménager des espaces pour partager le résultat de cette veille et d’appuyer la montée en compétence.
Ressources pour aller plus loin
Les ressources pour se sensibiliser au numérique responsable se multiplient, mais voici déjà deux bons points de départ :
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.
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.
