Après avoir travaillé plus de 15 ans dans le développement web, Laurent Devernay est devenu consultant technique en numérique responsable chez Greenspector. Quand il n'accompagne pas des structures sur l'écoconception de leurs services numériques, il dispense des cours autour du numérique responsable.
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)
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é.
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.
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 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.
La notion de métavers ne date pas d’hier et certains se rappelleront peut-être de Second Life, considéré comme l’une de ses premières manifestations. L’idée est de proposer un environnement virtuel via ce qu’on appelle désormais la XR (eXtended Reality), un mélange de réalité augmentée (un peu à la façon de Pokemon Go) et de réalité virtuelle (les plus vieux penseront au film Le Cobaye mais on préférera l’exemple d’Oculus Quest).
En octobre 2021, Meta (anciennement appelé Facebook) a annoncé se lancer à fond sur le sujet du Metavers. Ceci passe par d’énormes investissements, notamment pour créer 10.000 emplois et former ceux qui travailleront dans ce domaine. De nombreuses grandes entreprises lui ont emboîté le pas pour être sûres de ne pas louper le coche.
L’objectif serait à terme de mettre à disposition des utilisateurs un environnement immersif potentiellement en 3D où ils pourraient retrouver leurs enseignes préférées et interagir avec qui ils veulent sans sortir de chez eux.
Couplé aux cryptomonnaies et aux NFT, le métavers serait même un des piliers du Web3.
Telles les lunettes connectées, il s’agit ici d’une arlésienne du numérique et on est en droit de se demander si cette nouvelle tentative sera cette fois couronnée de succès. Sauf que la vraie question est de savoir si le métavers est compatible avec les problématiques actuelles liées au numérique, qu’on retrouve notamment à travers le Numérique Responsable.
Métavers et Numérique Responsable
En reprenant les principaux enjeux du Numérique Responsable, voyons ce que l’on peut attendre du métavers.
Accessibilité
Alors que plus de 96 % des sites web présentent au moins une erreur d’accessibilité, l’accessibilité du web tel qu’il existe aujourd’hui reste très problématique. De même, rappelons que l’accès au web reste compliqué pour une grande partie de la population mondiale, que ce soit en raison d’un appareil trop ancien, d’une connexion internet insuffisante ou tout simplement de compétences insuffisantes pour pouvoir utiliser pleinement les outils numériques. Englobant ces trois problématiques, l’illectronisme toucherait 17% de la population française.
Dans de telles conditions, il y a fort à parier que le métavers ne vienne pas arranger les choses. Ceux qui aujourd’hui ne peuvent pas accéder au web dans des conditions satisfaisantes seront probablement laissés de côté par le métavers. Sans compter que les prérequis en termes de puissance des appareils et de connexion internet risquent d’être bien plus élevées (mais nous y reviendrons plus tard).
Sécurité
La sécurité peut être vue comme une des conséquences de l’illectronisme : en ne préparant pas suffisamment les individus à utiliser les outils numériques, on les expose à des risques qu’ils ne maîtrisent pas. Nul doute que le métavers s’accompagnera de nouvelles opportunités d’attaques. On peut d’ores et déjà imaginer à quel point un univers aussi immersif et aujourd’hui aussi lié aux grandes enseignes peut offrir de nouveaux vecteurs de phishing. Il est également à craindre que, afin de ne pas nuire à l’immersion ni au confort des utilisateurs, la sécurité passe au second plan.
Captation de l’attention (et manipulation)
La captation de l’attention (voir rapport du CNUM en PDF) consiste à mettre en place des mécanismes de design (mécanismes captologiques ou dark patterns) afin de retenir le plus longtemps possible l’attention de l’utilisation. Dans le métavers, on peut imaginer que ceci ne fera que s’aggraver, l’un des objectifs étant l’immersion. Aujourd’hui, en particulier via le web, chacun d’entre nous serait exposé à plus de 5000 stimuli publicitaires. En regardant la liste des entreprises contribuant à construire le métavers, il y a peu de chances que ceci s’arrange.
Comment, dans ces conditions, évoluera notre bulle de filtres? Ne risque-t-on pas de voir augmenter l’influence de certains acteurs du numérique sur le contexte politique ? Doit-on s’inquiéter de voir Meta prendre la main sur le sujet du métavers (en bref : oui) ?
Et ce ne sont là que quelques interrogations parmi tant d’autres (sur la modération de ce nouvel espace partagé, les droits sur les contenus qui y seront (re-)produits, etc).
Sobriété numérique
Il est intéressant de considérer le métavers sous l’angle des impacts environnementaux.
Il est toujours un peu étonnant de voir quelqu’un arriver avec un produit miraculeux censé résoudre tout un tas de problèmes dont nous n’avions même pas conscience. Dans ce cas précis, je serais partisan de l’approche de Design is the Problem. Nathan Shedroff y explique comment repenser le design afin d’aboutir à des solutions réellement soutenables. Il prend l’exemple du Segway PT, un appareil de transport personnel, électrique et démontable/réparable. Présenté ainsi, on pourrait penser que ce serait une belle idée pour la planète. Sauf que le vrai souci de cet appareil est qu’il ne répond pas à un vrai besoin utilisateur. En effet, les transports en commun, le vélo et la marche à pied peuvent idéalement le remplacer, avec un impact et un coût financier bien moindres. Toute ressemblance avec les trottinettes électriques serait purement fortuite (ou pas).
Le métavers pose le même problème dans son concept même : il cherche à répondre à une myriade de besoins divers et variés, alors même que des alternatives moins impactantes et coûteuses existent. Seul son vernis technique et innovant favorise son adoption et amène des grosses entreprises à s’y lancer aveuglément.
Pour aller plus loin sur l’impact environnemental du métavers, plusieurs éléments sont à prendre en considération.
D’une part, la génération et l’affichage d’un environnement virtuel immersif sont très coûteux en ressources. En-dessous de 90 fps, l’utilisateur s’expose aux nausées et vertiges. De plus, ces dernières années, chacun a pu découvrir des environnements virtuels en 3D de plus en plus magnifiques (en grande partie via les jeux vidéo). Il semble donc indispensable de s’aligner sur ces types de visuels, ce qui sera coûteux aussi bien pour leur production que pour leur affichage.
D’autre part, l’utilisation du métavers (notamment en tenant compte des éléments indiqués dans le point précédent) nécessitera probablement de meilleurs équipements utilisateurs (voire de nouveaux équipements utilisateurs) ainsi qu’une connexion internet avec un débit très élevé (ne serait-ce que pour afficher un environnement virtuel tout en tenant les 90 fps). Sachant que, fort logiquement (et c’est aussi ce qu’on a bien vu avec les jeux vidéo), les rendus et la fréquentation devraient (si tout se passe bien pour le métavers) monter en puissance au cours du temps, encourageant la course au renouvellement des équipements.
Alors même que les initiatives se multiplient afin de réduire l’empreinte environnementale du numérique, l’arrivée du métavers représente donc un risque majeur.
Conclusion
Les efforts pour étendre les principes du Numérique Responsable au web sont de plus en plus intenses et le chantier déjà colossal. L’arrivée du Web3 et plus particulièrement du métavers risquent de rendre ces principes d’autant plus essentiels mais aussi plus difficiles à faire respecter. Il apparaît (une fois n’est pas coutume) plus facile de générer des emplois et dépenser des sommes folles pour un concept dont l’utilité reste à prouver plutôt que d’œuvrer à rendre le web moins impactant et plus accessible pour tous.
Il reste bien sûr la possibilité que le métavers soit conçu dès le départ dans une optique d’efficience voire en suivant certains principes du Numérique Responsable (mais j’en doute). Dans tous les cas, la nature même du projet laisse à penser que la sobriété n’est pas considérée. Ceci est d’autant plus regrettable que le Numérique Responsable lui-même contient les éléments et principes qui aideraient à l’aboutissement et à l’adoption du métavers. Toutefois, les priorités semblent être autres et on ne peut que regretter de voir une fois de plus les moyens se concentrer sur quelque chose qui ne contribuera probablement pas à rendre le web meilleur pour tous. Au final, le métavers semble aller à l’opposé des efforts nécessaires pour atténuer le dérèglement climatique.
La sécurité est une partie essentielle du numérique responsable. Il n’est pas rare de se demander comment protéger son site, en particulier lorsque l’on laisse la possibilité d’envoyer du contenu depuis son site web : formulaire (en particulier de contact), commentaires, etc. Et lorsque l’on sait qu’une bonne partie de l’activité sur le web n’est pas due à des humains (How much of the internet is fake?). Personne n’a envie de subir une injection ou autre acte malveillant via son site.
A la fin des années 90, une solution miracle est apparue sous la forme du CAPTCHA. Aujourd’hui, on trouve ce composant un peu partout. Il peut s’agir de recopier des caractères difficilement lisibles, de cliquer sur des photos contenant différents éléments ou de cliquer sur une case afin de prouver que l’on n’est pas un robot.
Mais qu’en est-il de son impact environnemental ? Comment le concilier avec la sobriété numérique ? C’est ce que nous allons voir ici!
A la recherche de la meilleure solution
Le CAPTCHA répond au besoin de sécuriser les données soumises par des internautes sur votre site.
Le problème est que cette façon de faire, entre autres avec reCAPTCHA, est souvent laborieuse pour les utilisateurs. L’impact environnemental du service numérique est alors accru par le simple fait que le parcours utilisateur se retrouve allongé, quand il n’aboutit pas carrément à un abandon. En particulier pour les utilisateurs en situation de handicap qui pourraient se retrouver dans l’impossibilité de mener la tâche à leur terme. Sans compter les requêtes supplémentaires (CSS, JS et autres iframes) nécessaires à l’intégration de ce type de composant dans une page.
Ainsi (et c’est là un point essentiel du numérique responsable), la recherche du CAPTCHA le plus sobre tient d’abord compte de l’accessibilité.
Repérer le temps de saisie pour exclure les saisies trop rapides
Utiliser un filtre (expression régulière ou autre) pour repérer les réponses suspectes
Ajouter de façon aléatoire une question à laquelle un bot ne saura pas forcément répondre (“Quel animal aboie ?”, “Combien font un plus un ?”, “Combien de d dans pudding ?”, etc). En laissant la possibilité de rafraîchir la question en cas de difficulté pour l’utilisateur.
Le honeypot (sur lequel nous allons revenir)
Au final, c’est la solution du honeypotqui semble la plus adéquate dans la plupart des cas. Détaillée par ailleurs sur un site du gouvernement canadien, elle consiste à ajouter un champ caché dans le formulaire concerné. Ce champ doit être défini de façon à être rempli seulement par les bots. Pour cela, il est caché aux utilisateurs et technologies d’assistance, tout en donnant dans le code des éléments laissant penser aux bots qu’il s’agit d’un champ obligatoire. Ainsi, à la validation du formulaire, on sait qu’une réponse au formulaire avec ce champ renseigné ne devra pas être prise en compte. Le honeypot peut demander un peu de réflexion pour une mise en place sans faille mais elle reste très légère et surtout élégante car elle se recentre sur le besoin d’origine : empêcher des bots d’envoyer des informations via un service numérique. Plutôt que d’impacter l’utilisateur afin de s’assurer qu’il n’est pas un robot, on laisse intact le parcours utilisateur pour se focaliser sur la détection des bots.
Conclusion
L’exemple du CAPTCHA s’avère représentatif d’une approche par le numérique responsable. Dans le but d’améliorer la sécurité d’un service numérique, on s’intéresse d’abord à l’accessibilité des solutions possibles (la solution gratuite et largement répandue n’étant là encore pas forcément la meilleure) pour enfin s’assurer via la sobriété numérique que la solution retenue ne dégrade pas l’impact environnemental du service.
Alors que de nombreux élèves cherchent dans quelle structure poursuivre leur cursus, les considérations écologiques sont de plus en plus présentes. En témoigne la mobilisation des étudiants pour un réveil écologique. Dans le contexte actuel, les institutions sont de plus en plus nombreuses à franchir le pas afin d’avancer sur ces sujets, notamment par le fait de proposer de nouveaux enseignements, de repenser les cours existants ou de mettre en place des bonnes pratiques au quotidien.
Sachant que le site web est souvent la première source d’information pour de nombreuses écoles et universités, nous avons décidé de mesurer l’impact carbone de ces sites.
Le classement par l’Etudiant des 37 meilleures grandes écoles de commerce, sur des critères d’excellence académique, de proximité avec les entreprises, d’excellence internationale, de salaires, de temps passé à l’étranger, de satisfaction des diplômés et de travail à l’étranger (novembre 2021).
Votre établissement n’apparaît pas dans nos classements ? Vous souhaitez connaître les détails de votre position ? Vous souhaitez améliorer votre place dans ce classement ? Contactez-nous.
Nous verrons ici ce qui ressort des mesures effectuées sur les sites des établissements de chacune de ces catégories. Nous nous sommes limités aux pages d’accueil afin d’avoir un dénominateur commun et parce qu’il s’agit le plus souvent du point d’entrée pour les visiteurs.
Toutefois, l’analyse pour chaque site mériterait d’aller plus loin, notamment au vu des statistiques d’usage de chacun de ces sites, afin de se concentrer sur les pages les plus fréquentées mais aussi pour se faire une idée plus précise des parcours les plus fréquents. A noter qu’une bonne partie des sites étudiés proposent également l’accès à un ENT (Environnement Numérique de Travail). Ce type d’outil très répandu constitue un sujet à part entière lors de l’estimation des impacts environnementaux des services numériques utilisés par les élèves. D’autant plus dans un contexte sanitaire où une partie des enseignements se font à distance. Sur ce type de sujet, l’accessibilité devient d’autant plus un sujet essentiel afin de permettre à chacun d’accéder, même depuis chez lui, aux mêmes informations et aux mêmes fonctionnalités que ses camarades.
Résultats des Universités de France
Synthèse – chiffres clés
La moyenne d’impact carbone par page et par minute de ce classement est de 0,44 gEqCO2. 18 sites sur les 50 se situent en-dessous de cette moyenne.
L’Eco-score Greenspector moyen est de 47,38 et 26 sites se situent au-dessus.
Le Top 3
En termes d’impact carbone, le top 3 de ce classement est constitué des universités suivantes :
1. Université Savoie Mont Blanc : un site WordPress qui tire son épingle du jeu par l’optimisation des images ainsi que la mise en place du lazy-loading et du cache côté client. Ces bonnes pratiques (ajoutées à d’autres) font déjà une belle différence, même s’il reste quelques axes d’amélioration.
2. Université de Paris-Saclay : un site plutôt sobre mais surtout optimisé techniquement (lazy-loading des images, mise en cache, optimisation des médias, etc).
3. Université Le Havre Normandie : un site léger et élégant qui pourrait encore bénéficier de quelques optimisations techniques voire d’un peu plus de sobriété.
NB:
Initialement le site web de l’Université de Paris (ex Paris Diderot) : une page étonnamment dépouillée qui renvoie au final… vers le site de u-patis.fr qu’on retrouve dans le Flop 3 ! Ce site est donc hors-concours.
Résultats des grandes Écoles de Commerce de France
Synthèse – chiffres clés
La moyenne d’impact carbone par page et par minute de ce benchmark est de 0,51 gEqCO2. 11 sites sur les 38 se situent en-dessous de cette moyenne.
L’Eco-score Greenspector moyen est de 41,27 et 15 sites se situent au-dessus soit un peu moins de la moitié.
Le Top 3
En termes d’impact carbone, le top 3 de ce classement est constitué des écoles de commerce suivantes :
1. Kedge Business School : les médias sont dans l’ensemble optimisés et le cache correctement mis à profit. Il reste quelques axes d’amélioration.
2. Rennes School of Business : le cache est exploité mais certains médias gagneraient à être optimisés. La page d’accueil repose beaucoup sur le scroll, ce qui inciterait à mettre en place le chargement différé (lazy-loading).
3. Montpellier Business School : un site WordPress assez riche en contenus, la plupart optimisés, mais qui souffre d’un grand nombre de fichiers CSS et JS. Il faudrait peut-être voir du côté des plugins installés mais surtout du thème et du page-builder. D’autres axes d’amélioration restent à mettre en œuvre.
Anja Stoll, cheffe de projet RSE – Climat & Biodiversity Lead chez Kedge Business School
Témoignage de KedgeBusiness School
– Quelle place prend le numérique dans l’engagement environnemental de votre école ? Dans les établissements d’enseignement supérieur le numérique prends une place de plus en plus importante, autant au niveau de la qualité des équipements qu’au niveau des services. La crise sanitaire a considérablement augmenté les attentes au numérique et étendu ses usages.
Ayant une empreinte carbone, mais aussi une empreinte ressources et déchets importante Kedge a choisi en octobre 2020 de de s’inscrire dans le projet pilote « numérique responsable » porté par le mouvement « campus responsables ». Aux côtés de 3 autres établissements d’enseignement supérieur Kedge BS a pu profiter d’un accompagnement sur mesure pendant 8 mois sur le sujet.
Ce projet pilote nous a permis de faire un état des lieux et de définir un plan d’action pluriannuel qui couvre de nombreux aspects tels que la durée de vie des équipements IT, l’usage du cloud, l’impact de la visioconférence, les critères d’achat ou encore le reconditionnement des équipements en fin de vie. Pour autant, une stratégie de numérique responsable doit non seulement prendre en compte les aspects environnementaux, mais aussi sociaux. Ainsi le plan d’action comprend également des actions de formation et de sensibilisation à la tech for good, d’outils handi-compatibles ou encore la prévention du cyberharcèlement.
– Votre site obtient la meilleure note d’impact dans votre catégorie, quels sont les bonnes pratiques fonctionnelles, graphiques, techniques que vous avez mises en place que vous pourriez partager avec les autres écoles ?
Nos chefs de projets digitaux ont travaillé main dans la main avec le prestataire technique pour mettre en place de nombreux améliorations :
-Optimisation du poids des images visibles sur toutes les pages (traitement manuel en amont de la publication et compression automatique par le système) – Systèmes avancés de mise en cache serveur et navigateur afin de limiter le téléchargement systématique des ressources nécessaires au chargement d’une page – Utilisation du système de « Lazy loading » permettant de charger uniquement les images visible à l’écran (au lieu de charger toutes les images d’une page, même celles très bas que l’utilisateur n’ira pas voir) -Minification du code pour alléger au maximum le poids des fichier à télécharger à chaque chargement de page – Pas d’hébergement de fichier très lourds comme des vidéos (tout est sur Youtube)
Ceci découle d’une vraie volonté de la l’école d’intégrer une démarche durable et inclusive dans tous le métiers, y compris le digital. Ainsi entre 10 et 15% des moyens mis à disposition des développements informatiques sont directement alloués à des actions destinés à améliorer la performance environnementale de nos plateformes.
– Avez-vous déjà mesuré la consommation et calculer l’impact de votre site auparavant ? Oui, notre bilan carbone intègre systématiquement l’analyse de l’empreinte carbone de notre site web. Pour aller plus loin, un audit « webperf » est actuellement en cours dans l’objectif d’améliorer encore plus les performances et temps de chargement de notre site. À fortiori, les actions en découlant auront également pour effet de diminuer d’autant plus notre impact carbone.
Le Flop 3
En termes d’impact carbone, on trouve en bas du classement les écoles suivantes : ISG Paris, ESC Clermont et EMLV. Là encore, ces 3 sites sont très riches en contenus, notamment vidéo.
Résultats des Écoles d’Ingénieurs de France
Synthèse – chiffres clés
La moyenne d’impact carbone par page et par minute de ce benchmark est de 0,47 gEqCO2. La moitié des 50 sites se situent en-dessous de cette moyenne.
L’Eco-score Greenspector moyen est de 43 et 13 sites se situent au-dessus soit un peu moins de la moitié.
Le Top 3
En termes d’impact carbone, le top 3 de ce classement est constitué des écoles d’ingénieur suivantes :
2. CentraleSupélec : un site relativement sobre qui pourrait aller encore plus loin via la mise en œuvre de bonnes pratiques supplémentaires.
3. ESIEA : un site WordPress plutôt sobre au niveau des contenus mais qui offre encore quelques axes d’amélioration.
Le Flop 3
En termes d’impact carbone, on trouve en bas du classement les écoles suivantes : ISEP, ENIM et ESILV. Une fois de plus, ce sont des sites riches en contenus qui misent beaucoup sur la vidéo (voire pour certains sur un chatbot).
Résultats des meilleures Universités au Monde
Afin de contrebalancer tous ces classements limités à la France, il nous a paru intéressant de nous intéresser à un classement des sites d’universités à travers le monde.
Synthèse – chiffres clés
La moyenne d’impact carbone par page et par minute de ce benchmark est de 0,50 gEqCO2. Seuls 9 des 50 sites se situent en-dessous de la moyenne. On note ici que les extrêmes sont beaucoup plus marqués, notamment le Flop 3 qui regroupe 3 sites très impactant.
L’Eco-score Greenspector moyen est de 53,18 et 28 sites se situent au-dessus soit un peu moins de la moitié.
Le Top 3
En termes d’impact carbone, le top 3 de ce classement est constitué des universités suivantes :
1. Princeton University : ce site Drupal relativement léger bénéficie d’une gestion du cache très efficace. Un effort particulier semble avoir été consacré à l’accessibilité, même si quelques anomalies persistent.
2. Ku Leuven : une page riche en informations mais sobre en contenus.
3. University of Manchester : un site relativement léger et assez bien optimisé. Des efforts considérables sur l’accessibilité ont été effectués mais il reste quelques axes d’amélioration en termes de réduction d’impacts environnementaux.
Le Flop 3
En termes d’impact carbone, on trouve en bas du classement les universités suivantes : Peking University, Tsinghua University, University of Hong Kong. On trouve encore sur ces trois pages de nombreux contenus (y compris vidéo) mais aussi beaucoup d’animations, en particulier des carrousels.
Les derniers sites de ce classement ont en commun une page d’accueil extrêmement chargée en contenus et en composants. Ceci évoque une tendance de design que l’on retrouve sur certains sites asiatiques depuis plus de 10 ans.
Le design y est plus riche, plus complexe et coloré. Ceci est lié à des différences culturelles, linguistiques et techniques. Si ceci n’est pas rédhibitoire en soi et s’inscrit dans la volonté d’adapter le contenu aux utilisateurs, il devient dans ce cas d’autant plus déterminant de proposer la page de la façon la plus efficiente possible.
SKEMA Business School Lille Paris Sophia Antipolis
https://www.skema-bs.fr/
47
0.52
27
ISG Paris
https://www.isg.fr/campus/paris
47
1.14
28
Montpellier Business School
https://www.montpellier-bs.com/
49
0.31
29
Rennes School of Business
https://www.rennes-sb.fr/
50
0.29
30
Paris SB Paris
https://www.psbedu.paris/fr
50
0.39
31
HEC Paris
https://www.hec.edu/fr
56
0.43
32
EDC Paris Business School
https://www.edcparis.edu/fr/
57
0.47
33
KEDGE Business School Bordeaux Marseille
https://kedge.edu/
60
0.26
34
ESSCA Angers Paris Aix-en-Provence Lyon Bordeaux
https://www.essca.fr/
60
0.32
35
EM Normandie Le Havre
https://www.em-normandie.com/fr
61
0.35
36
ESSEC Cergy-Pontoise
https://www.essec.edu/fr/
62
0.32
37
emlyon Business School
https://em-lyon.com/
64
0.32
Position
Université
URL
Ecoscore (/100)
Impact Carbone (gEqCO2)
1
École centrale - Lyon
https://www.ec-lyon.fr/
67
0.22
2
CentraleSupélec
https://www.centralesupelec.fr/
60
0.23
3
ESIEA - Paris - Laval
https://www.esiea.fr/
54
0.27
4
Grenoble INP - Génie industriel
https://genie-industriel.grenoble-inp.fr/
63
0.28
5
ESTIA - Bidart
https://www.estia.fr/formations
68
0.28
6
Telecom Paris
https://www.telecom-paris.fr/
49
0.28
7
UTT - Troyes
https://www.utt.fr/
56
0.3
8
École des mines ParisTech
https://www.minesparis.psl.eu/
57
0.3
9
École polytechnique
https://www.polytechnique.edu/
48
0.31
10
AgroParisTech
http://www.agroparistech.fr/
49
0.31
11
Grenoble INP - Phelma
https://phelma.grenoble-inp.fr/
54
0.32
12
IMT Atlantique
https://www.imt-atlantique.fr/fr
55
0.32
13
INSA Toulouse
https://www.insa-toulouse.fr/fr/index.html
51
0.33
14
INP Bordeaux- ENSEIRB - Matmeca
https://enseirb-matmeca.bordeaux-inp.fr/fr
44
0.34
15
ENSTA Paris
https://www.ensta-paris.fr/
40
0.35
16
Grenoble INP - Ense³
https://ense3.grenoble-inp.fr/
44
0.35
17
ESIEE Paris - Marne-la-Vallée
https://www.esiee.fr/
53
0.35
18
CY Tech
https://cytech.cyu.fr/
54
0.35
19
École des ponts ParisTech - Marne-la-vallée
https://www.ecoledesponts.fr/
47
0.36
20
Efrei Paris
https://www.efrei.fr/
57
0.37
21
IG2I (Centrale Lille)
https://ig2i.centralelille.fr/
36
0.38
22
ECE - Paris
https://www.ece.fr/
54
0.39
23
Arts et Métiers Sciences et Technologies
https://artsetmetiers.fr/
44
0.4
24
École centrale - Nantes
https://www.ec-nantes.fr/
45
0.41
25
ECPM - Strasbourg
https://ecpm.unistra.fr/
31
0.42
26
École des mines - Nancy
https://mines-nancy.univ-lorraine.fr/
36
0.42
27
ENSEEIHT - INP Toulouse
https://www.enseeiht.fr/fr/index.html
41
0.43
28
Grenoble INP - Ensimag
https://ensimag.grenoble-inp.fr/
50
0.44
29
École des mines - Saint-Etienne
https://www.mines-stetienne.fr/
28
0.44
30
IMT Mines Alès
https://www.imt-mines-ales.fr/
40
0.44
31
ENSCP - Chimie ParisTech
https://www.chimieparistech.psl.eu/
31
0.44
32
INSA Lyon
https://www.insa-lyon.fr/
36
0.45
33
ESPCI Paris
https://www.espci.psl.eu/fr/
41
0.46
34
ITEEM (Centrale Lille)
https://iteem.centralelille.fr/
33
0.46
35
ISAE-SUPAERO - Toulouse
https://www.isae-supaero.fr/fr/
39
0.46
36
IMT Nord Europe
https://imt-nord-europe.fr/
36
0.47
37
Télécom SudParis - Evry
https://www.telecom-sudparis.eu/
39
0.48
38
IMT - Albi Carmaux
https://www.imt-mines-albi.fr/
38
0.48
39
ENSTA Bretagne - Brest
https://www.ensta-bretagne.fr/fr
40
0.51
40
École centrale - Lille
https://ecole.centralelille.fr/
26
0.54
41
École centrale - Marseille
https://www.centrale-marseille.fr/
45
0.55
42
UTC - Compiègne
https://www.utc.fr/
36
0.56
43
ENSAE Paris
https://www.ensae.fr/
26
0.64
44
ESTP - Paris
https://www.estp.fr/
40
0.66
45
ESTACA
https://www.estaca.fr/
46
0.74
46
UTBM - Belfort-Montbéliard
https://www.utbm.fr/
25
0.86
47
ENSCM - Chimie Montpellier
https://www.enscm.fr/fr/
26
0.86
48
ESILV - Paris-La Défense
https://www.esilv.fr/
17
0.93
49
ENI - Metz
https://enim.univ-lorraine.fr/
27
1.04
50
ISEP - Paris
https://www.isep.fr/
28
1.35
Position
Université
URL
Ecoscore (/100)
Impact Carbone (gEqCO2)
1
Princeton University
https://www.princeton.edu/
66
0.22
2
KU Leuven
https://www.kuleuven.be
73
0.22
3
University of Manchester
https://www.manchester.ac.uk/
69
0.22
4
LMU Munich
https://www.lmu.de/en/index.html
72
0.23
5
Heidelberg University
https://www.uni-heidelberg.de/en
65
0.24
6
University of British Columbia
https://www.ubc.ca/
58
0.24
7
Northwestern University
https://www.northwestern.edu/
71
0.25
8
Yale University
https://www.yale.edu/
61
0.25
9
King's College London
https://www.kcl.ac.uk/
63
0.26
10
University of Melbourne
https://www.unimelb.edu.au/
63
0.26
11
University of Edinburgh
https://www.ed.ac.uk/
62
0.26
12
Massachusetts Institute of Technology
https://web.mit.edu/
57
0.27
13
Nanyang Technological University Singapore
https://www.ntu.edu.sg/
62
0.27
14
Georgia Institute of Technology
https://www.gatech.edu/
61
0.28
15
University of Oxford
https://www.ox.ac.uk/
61
0.29
16
University of Washington
http://www.washington.edu/
64
0.29
17
University of California Berkeley
https://www.berkeley.edu/
74
0.3
18
Duke University
https://duke.edu/
59
0.3
19
Cornell University
https://www.cornell.edu/
67
0.3
20
University of Pennsylvania
https://www.upenn.edu/
67
0.32
21
University of Michigan-Ann Arbor
https://umich.edu/
60
0.32
22
Imperial College London
http://www.imperial.ac.uk/
62
0.33
23
New York University
https://www.nyu.edu/
49
0.34
24
University of Toronto
https://www.utoronto.ca/
58
0.35
25
McGill University
https://www.mcgill.ca/
46
0.37
26
École Polytechnique Fédérale de Lausanne
https://www.epfl.ch/
50
0.37
27
University of Cambridge
https://www.cam.ac.uk/
53
0.37
28
Stanford University
https://www.stanford.edu/
58
0.38
29
Carnegie Mellon University
https://www.cmu.edu/
45
0.38
30
Johns Hopkins University
https://www.jhu.edu/
49
0.39
31
London School of Economics and Political Science
https://www.lse.ac.uk/
58
0.41
32
Technical University of Munich
https://www.tum.de/en/
54
0.41
33
National University of Singapore
https://www.nus.edu.sg/
55
0.41
34
ETH Zurich
https://ethz.ch/en.html
44
0.42
35
University of California San Diego
https://www.ucsd.edu/
53
0.43
36
University of Illinois at Urbana-Champaign
https://illinois.edu/
37
0.45
37
Chinese University of Hong Kong
https://www.cuhk.edu.hk/english/index.html
42
0.46
38
Paris Sciences et Lettres - PSL Research University Paris
https://psl.eu/
40
0.48
39
Harvard University
https://www.harvard.edu/
6
0.49
40
California Institute of Technology
https://www.caltech.edu/
44
0.58
41
University of California Los Angeles
https://www.ucla.edu/
28
0.59
42
University of Texas at Austin
https://www.utexas.edu/
47
0.63
43
The University of Tokyo
https://www.u-tokyo.ac.jp/en/
40
0.66
44
Columbia University
http://www.columbia.edu/
41
0.7
45
The University of Chicago
https://www.uchicago.edu/
38
0.77
46
UCL
https://www.ucl.ac.uk/
42
0.87
47
University of Hong Kong
http://hku.hk/
21
1.61
48
Tsinghua University
https://www.tsinghua.edu.cn/en/index.htm
29
2.46
49
Peking University
https://english.pku.edu.cn/
27
3.1
Bilan
Tous classements confondus, on note que le site le plus impactant en CO2 l’est 7 fois plus que le moins impactant !
On note aussi que l’Ecoscore Greenspector moyen est plus élevé pour le classement monde que pour les classements d’établissements français. En moyenne, les sites du classement mondial sont plus nombreux à être mieux optimisés, ce qui n’empêche pas les 3 pires sites du classement monde d’être plus impactants en carbone que n’importe quel site des classements d’établissements français.
Sur les sites qui se hissent en haut de chaque classement, les avantages apportés par l’application de certaines bonnes pratiques sont indéniables. Toutefois, ceux qui s’en sortent le mieux complètent (ou précèdent) leurs actions sur l’efficience par un effort de sobriété.
Enfin, on trouve encore sur la plupart des sites des erreurs d’accessibilité, ce qui peut être rédhibitoire pour l’intégration d’élèves en situation de handicap ou en tout cas pour que ces derniers accèdent facilement à certaines informations ou services.
Pour plus d’explications des résultats et du détails des bonnes ou mauvaises pratiques, nous vous invitons à (re)découvrir le replay du webinar par Laurent DEVERNAY, expert sobriété numérique chez Greenspector.
Selon le site de l’Education Nationale, 24% de la population active en France serait en situation de handicap. Pour rappel, 80% des handicaps ne sont pas immédiatement visibles (notamment parce que les types de handicaps sont très nombreux).
Alors même que l’accessibilité des services numériques fait l’objet d’une réglementation en particulier en France (via le RGAA), la mise en conformité a encore bien du retard, notamment pour les services numériques publics. A titre d’exemple, une étude du WebAIM estime que 97,4% du million de sites web parmi les plus visités comportent au moins une erreur d’accessibilité.
Ce sera par exemple le cas pour des ENT ou sites sur lesquels la langue est mal définie, ce qui entraînera des problèmes pour les étudiants qui voudraient traduire automatiquement les textes dans une autre langue (et pour des étudiants utilisant un lecteur d’écran).
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 janvier 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é.
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.
