Catégorie : Sobriété du web

Impact environnemental des sites web des exposants au GreenTech Forum 2023

Posted on novembre 20, 2023novembre 22, 2023 by Thibault TUFFIN

Reading Time: < 1 minute

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

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

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

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

Métriques évaluées ou mesurées par Greenspector (60 secondes)	Moyenne
Impact carbone (g eqCO2)	0,33 gEqCO2
Ressource en eau (Litres)	0,05 Litres
Occupation des sols (cm²)	0,61 cm²
Consommation d’énergie (mAh)	5,27 mAh
Données échangées (Mo)	2,61 Mo
Mémoire consommée (Mo)	786 Mo
Nombre de requêtes web	55

Classement	version	Ecoscore	Energie	Données échangées	Mémoire	Requêtes	Carbon Impact (gEqCO2)	Empreinte Eau (Litres)	Empreinte Sol (cm2)
1	https://kleis.ch/	89	4,79	0,55	560,80	14	0,23	0,04	0,53
2	https://commown.coop/	77	4,41	0,37	781,06	8	0,20	0,04	0,49
3	https://hubblo.org/fr/	77	4,88	0,15	554,14	26	0,24	0,04	0,55
4	https://www.specinov.fr/	76	4,53	0,25	680,25	16	0,21	0,04	0,50
5	http://lewebvert.fr/	76	4,77	0,20	828,38	20	0,23	0,04	0,53
6	https://fresquedunumerique.org/	75	4,36	0,89	676,91	33	0,24	0,04	0,49
7	https://thegreencompagnon.com/	74	4,68	0,47	861,89	14	0,22	0,04	0,52
8	http://laruchequicode.com/	74	4,62	0,40	722,78	23	0,23	0,04	0,52
9	https://www.treebal.green/	74	4,58	0,43	819,20	27	0,23	0,04	0,52
10	https://smart-consultant.fr/	73	4,56	0,65	659,92	15	0,22	0,04	0,51
11	https://greenspector.com/fr/accueil/	73	4,68	0,42	638,41	36	0,25	0,04	0,53
12	https://www.fruggr.io/	73	5,19	1,42	849,56	16	0,26	0,05	0,58
13	https://algorila.com/	72	4,81	0,32	769,02	18	0,23	0,04	0,53
14	https://nuageo.fr/	72	4,87	0,35	853,77	21	0,23	0,04	0,54
15	https://greenoco.io/	71	4,88	1,62	760,39	39	0,28	0,05	0,56
16	https://www.appyuser.com/	71	5,34	2,50	690,71	52	0,33	0,06	0,61
17	https://aguaro.io/fr	70	4,09	1,09	655,25	38	0,24	0,04	0,47
18	https://infogreenfactory.green/	69	4,59	0,38	784,44	22	0,22	0,04	0,51
19	https://aeonics.io/	69	4,46	0,51	715,91	26	0,23	0,04	0,50
20	https://conserto.pro/	69	4,75	0,33	733,29	18	0,23	0,04	0,53
21	https://evea-conseil.com/fr	68	4,51	6,48	724,53	98	0,42	0,06	0,55
22	https://www.esaip.org/	66	4,54	1,11	720,32	41	0,26	0,04	0,52
23	https://www.chg-meridian.fr/	66	5,27	1,99	872,71	27	0,29	0,05	0,59
24	https://lecko.fr/greet/	66	4,83	2,46	927,45	57	0,32	0,05	0,56
25	https://www.planet-techcare.green/	66	4,86	2,14	865,60	63	0,32	0,05	0,57
26	https://groupe-isia.com/	65	4,98	0,87	618,44	23	0,25	0,05	0,56
27	https://www.wedolow.com/	65	5,05	1,37	873,91	42	0,29	0,05	0,58
28	https://www.luminess.eu/	65	5,06	3,02	699,61	38	0,31	0,05	0,58
29	https://mind7.com/	64	5,19	1,40	980,03	28	0,27	0,05	0,58
30	https://www.cisco.com/site/fr/fr/index.html	64	4,56	1,80	768,97	80	0,32	0,05	0,54
31	https://mavana.earth/	63	4,75	0,81	691,11	53	0,28	0,05	0,55
32	https://www.alterway.fr/	63	4,80	0,70	790,25	53	0,28	0,05	0,55
33	https://connexing.co/	63	4,93	4,50	670,17	41	0,34	0,05	0,57
34	https://www.fairphone.com/fr/	62	5,10	3,29	836,86	70	0,36	0,06	0,60
35	https://www.monsitevert.fr/	60	5,26	1,25	797,13	24	0,27	0,05	0,59
36	https://www.preo-ag.com/fr	60	5,44	2,32	942,09	57	0,34	0,06	0,63
37	https://carbonscore.fr/	59	5,83	1,67	691,48	16	0,29	0,05	0,65
38	https://www.apl-datacenter.com/fr/	58	4,83	1,58	855,30	75	0,32	0,05	0,57
39	http://www.magellan-consulting.eu	57	4,92	6,75	847,68	143	0,50	0,07	0,62
40	http://ijo.tech/	56	5,25	1,62	885,77	30	0,28	0,05	0,59
41	https://www.capefoxx.com/	56	5,31	2,36	708,23	49	0,32	0,05	0,61
42	http://agence-lucie.com/	56	5,53	2,99	558,45	99	0,41	0,06	0,66
43	https://www.soprasteria.com/fr/accueil	55	5,18	9,43	895,83	35	0,43	0,06	0,60
44	https://holomea.com/	61	4,96	2,77	964,79	34,00	0,30	0,05	0,56
45	https://www.formulemagique.com/	53	5,45	1,05	888,90	84	0,35	0,06	0,64
46	https://www.easyvirt.com/	51	5,55	2,51	900,22	102	0,40	0,06	0,66
47	https://www.colibris.app/	50	6,82	2,61	894,97	59	0,40	0,07	0,78
48	https://www.weeedoit.com/	49	5,32	2,52	847,77	103	0,39	0,06	0,64
49	https://www.fujitsu.com/fr/	49	6,11	7,54	816,09	95	0,51	0,07	0,73
50	https://www.ecologic-france.com/	47	5,33	2,15	941,95	33	0,30	0,05	0,60
51	https://www.wecount.io/	47	6,72	3,15	719,61	43	0,39	0,07	0,76
52	https://sopht.com/	46	5,32	2,81	852,10	128	0,43	0,07	0,65
53	https://www.sentrysoftware.com/	43	7,96	15,15	935,47	87	0,71	0,10	0,94
54	https://www.scaledynamics.com/	41	6,81	3,77	876,22	83	0,45	0,07	0,79
55	https://www.hp.com/fr-fr/home.html	38	6,33	2,02	774,44	72	0,39	0,07	0,73
56	https://www.technogroup.com/	38	6,29	12,71	756,05	91	0,60	0,08	0,75
57	https://www.escapegameenligne.com/	37	6,22	3,66	819,64	134	0,49	0,08	0,76
58	https://alternative-group.com/	36	7,60	6,29	772,08	88	0,54	0,08	0,89
59	https://harington.fr/	35	5,93	7,05	987,21	74	0,46	0,07	0,70
60	http://www.ecodair.org/	34	7,91	3,71	730,61	103	0,52	0,09	0,92
61	https://greenly.earth/fr-fr	29	6,47	5,64	944,98	245	0,67	0,10	0,85

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

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

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

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

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

Posted on octobre 4, 2023octobre 9, 2023 by Laurent DEVERNAY

Reading Time: 6 minutes

Introduction

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

Les chiffres clés

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

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

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

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

Côté développeur : forcer l’ouverture du lien dans un nouvel onglet (via l’attribut target=”_blank” ou via JS). Ceci revient néanmoins à ne pas laisser le choix à l’utilisateur. Il est alors recommandé de signaler ce comportement à l’internaute (Règle Opquast 141 – L’utilisateur est averti des ouvertures des nouvelles fenêtres). Sinon, ceci peut provoquer des problèmes d’accessibilité.

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

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

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

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

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

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

Méthodologie

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

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

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

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

Chargement de la page de test

Pause de 30s sur la page de test

Chargement de la page destination (clic sur le lien)

Pause de 30s sur la page destination

Retour en arrière

Pause de 30s sur la page d’origine

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

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

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

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

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

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

Résultats

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

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

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

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

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

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

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

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

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

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

Conclusion

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

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

Posted on septembre 26, 2023septembre 26, 2023 by Laurent DEVERNAY

Reading Time: 6 minutes

Introduction

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

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

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

https://ecolog.isit-europe.org/

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

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

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

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

Des erreurs sont survenues pour la mesure de deux sites :

INSA Toulouse : https://www.insa-toulouse.fr/
Télécom Nancy : https://telecomnancy.univ-lorraine.fr/

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

Le site de l’INSA Toulouse a bénéficié d’une refonte depuis notre classement de 2022. Il en ressort une réduction des données transférées et, a priori, une réduction des impacts sur les terminaux des utilisateurs. Pour autant, a minima, quelques optimisations rapides sont encore possibles.

Le site de Télécom Nancy apparaît plutôt lourd, notamment en raison du manque d’optimisation de certains contenus mais surtout d’un manque de sobriété (dont témoigne par exemple l’intégration de plusieurs contenus de réseaux sociaux).

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

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

100 % des utilisateurs et serveurs localisés en France

Répartition des terminaux utilisateurs (source : https://datareportal.com/reports/digital-2023-france [EN]) :

50% sur smartphone
3 % sur tablette
47 % sur PC

Synthèse et chiffres clés

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

URL	Ecoscore Global	Requêtes HTTP	Energie (mAh)	Données (Mo)	Impact GES (gEqCO2)	Empreinte Eau (L)	Empreinte sol (cm_)
https://www.cpe.fr/	61	69	5,76	2,13	0,77	0,13	1,46
https://www.cesi.fr/	72	31	4,63	3,35	0,79	0,14	1,54
https://www.efrei.fr/	61	62	5,30	2,13	0,84	0,15	1,62
https://www.insa-centrevaldeloire.fr/fr/	58	86	4,52	3,02	0,84	0,14	1,53
https://www.isima.fr/	73	75	4,85	2,13	0,85	0,15	1,61
https://www.polytech.universite-paris-saclay.fr/	62	36	5,07	2,28	0,85	0,15	1,70
https://www.utt.fr/	57	45	5,16	3,44	0,87	0,15	1,68
https://www.esiee.fr/	65	94	5,25	1,78	0,89	0,15	1,67
https://www.esiea.fr/	60	55	5,65	2,21	0,90	0,16	1,76
https://www.insa-rouen.fr/	66	81	4,68	4,00	0,92	0,16	1,69
https://www.3il-ingenieurs.fr/	52	32	5,96	1,51	0,93	0,17	1,90
https://polytech.univ-cotedazur.fr/	53	53	4,97	6,06	0,96	0,16	1,75
https://www.ensiie.fr/	50	90	5,29	5,92	0,98	0,16	1,72
https://www.insa-lyon.fr/	54	131	5,14	4,01	0,98	0,16	1,71
https://enseirb-matmeca.bordeaux-inp.fr/fr	50	90	5,42	7,12	1,02	0,17	1,77
https://www.polytech-lille.fr/	43	58	6,29	5,90	1,11	0,19	2,07
https://www.enseeiht.fr/fr/index.html	38	103	5,47	6,24	1,12	0,19	1,99
https://www.sup-galilee.univ-paris13.fr/	48	57	6,84	2,04	1,14	0,20	2,28
https://ensimag.grenoble-inp.fr/	39	100	5,80	11,87	1,22	0,20	2,01
https://www.polytech.sorbonne-universite.fr/	42	72	6,42	4,40	1,24	0,22	2,39
https://isen-mediterranee.fr/	47	128	6,24	10,59	1,28	0,21	2,11
https://www.ensicaen.fr/	40	53	8,02	3,01	1,28	0,23	2,58
https://www.isep.fr/	36	110	6,26	19,82	1,42	0,22	2,12
https://polytech.univ-tours.fr/	40	98	5,92	28,49	1,52	0,22	2,04
http://www.enssat.fr/	51	64	5,82	39,19	1,57	0,21	1,82
https://www.utbm.fr/	26	282	7,52	13,73	1,66	0,26	2,49
https://www.utc.fr/	20	139	10,90	18,84	2,06	0,34	3,50
https://www.epita.fr/	36	71	13,89	4,89	2,12	0,38	4,30
https://cytech.cyu.fr/	46	69	5,99	67,85	2,14	0,26	1,97

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

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

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

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

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

Le Top 3

CPE

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

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

CESI

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

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

EFREI

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

Le Flop 3

CY Tech

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

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

EPITA

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

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

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

UTC

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

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

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

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

Conclusion

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

Publication des Web Sustainability Guidelines du W3C

Posted on septembre 13, 2023septembre 14, 2023 by Laurent DEVERNAY

Reading Time: 2 minutes

Le W3C

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

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

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

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

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

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

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

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

Et maintenant ?

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

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

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

Bonne pratique : optimiser les polices de caractères

Posted on mai 16, 2023mai 26, 2023 by Laurent DEVERNAY

Reading Time: 4 minutes

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

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

*Proportion de sites web utilisant des web fonts*

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

Référentiels existants

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

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

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

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

Favoriser les polices standards

Bonnes pratiques

Objectifs

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

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

Quand ?

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

Facilité de mise en œuvre

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

Gains estimés

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

Cas particuliers

Google Fonts

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

Icônes

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

Cas d’étude

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

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

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

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

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

Requêtes initiales

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

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

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

Aller plus loin

Best practices for fonts : survol des différentes bonnes pratiques liées aux polices de caractères, principalement dans l’optique d’améliorer la performance d’un site web
Introduction to optimising web fonts : astuces et outils pour l’optimisation des polices des caractères
Reduce web font size : différentes stratégies d’optimisation
Wakamaifondue : un outil gratuit en ligne pour analyser ce qui se trouve dans un fichier de police de caractères
Font Subsetter : un outil gratuit et en ligne pour limiter le nombre de caractères dans le fichier d’une police.
Unicode range subsetting : une approche du Subset se basant directement sur l’unicode afin de ne conserver que les caractères vraiment utilisés.
Self-hosting explained (including Google Fonts) : comment héberger soi-même des polices de caractères

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

Posted on mai 2, 2023mai 4, 2023 by Olivier PHILIPPOT

Reading Time: 3 minutes

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

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

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

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

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

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

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

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

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

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

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

Je contacte l’équipe Greenspector

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

Posted on avril 25, 2023avril 26, 2023 by Aurélie Boulais

Reading Time: 11 minutes

– Édition 2023 –

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

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

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

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

Les résultats en bref

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

Le monde
Actu.fr
Ouest-France

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

Rfi
France24
L’Est Républicain

Les pages d’articles les moins impactantes :

Huffingtonpost
Actu.fr
France Info

Les pages d’articles les plus impactantes :

Sud Ouest
La nouvelle république
Rfi

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


20 Minutes.fr	La-croix.com	Leprogres.fr
Actu.fr	Ladepeche.fr	Letelegramme.fr
Bfmtv.com	Lanouvellerepublique.fr	Lexpress.fr
Cnews.fr	Laprovence.com	Liberation.fr
Estrepublicain.fr	Lavoixdunord.fr	Lindependant.fr
Fixe Rfi.fr	Ledauphine.com	L'Obs.com
France24.com	LeFigaro.fr	Midilibre.fr
Francebleu.fr	LeMonde.fr	Ouest-france.fr
Franceinfo.fr	LeParisien.fr	ParisMatch.com
Huffingtonpost.fr	LePoint.fr	Sudouest.fr

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

Limites de la mesure

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

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

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

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

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

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

Comment toute la bulle autour du microtargeting et en particulier de la pub en ligne pourrait éclater : https://www.wired.com/story/ad-tech-could-be-the-next-internet-bubble/

Combien de pubs nous voyons chaque jour (le résultat va vous étonner. Ou pas, malheureusement) : https://www.gradschools.com/degree-guide/how-many-ads-do-you-see-each-day
Pourquoi l’intégration technique des publicités sur les sites est toujours aussi problématique : https://schepp.dev/posts/ad-integration-in-2020/
L’impact environnemental des publicités et de la collecte de stats : https://marmelab.com/blog/2022/01/17/media-websites-carbon-emissions.html
Les liens entre les cookies, la pub en ligne et la presse en ligne : https://www.wired.com/story/can-killing-cookies-save-journalism/

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

Analyse des résultats au niveau global

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

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

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

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

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

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

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

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

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

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

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

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

Les pages d’accueil

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

Le Monde

1 er – Le Monde

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

Actu.fr

2 ème – Actu.fr

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

Ouest France

3 ème – Ouest-France

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

Conclusion pour le top 3 des pages d’accueil

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

Flop 3 (pages d’accueil les plus impactantes)

RFI

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

RequestMap de la page d’accueil de rfi.fr

France 24

La structure et les constats sont similaires pour cette page.

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

L’Est Républicain

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

Conclusion pour le flop 3 des pages d’accueil

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

Passons maintenant aux articles.

Les articles

Top 3 (articles les moins impactants) 

Huffingtonpost

1er – Huffingtonpost

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

Actu.fr

2 ème – Actu.fr

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

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

France Info

3 ème – France Info

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

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

Conclusion pour le top 3 des articles

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

Flop 3 (articles les plus impactants)

Sud Ouest

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

La Nouvelle République

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

RFI

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

Conclusion pour le flop 3 des articles

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

Conclusion

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

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

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

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

Découvrez nos solutions

Tableaux des résultats

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

URL	Ecoscore	Requests	Data (Mo)	Énergie (mAh)	Carbon impact (gEqCO2)	Water impact (Litre)	Surface impact (m2)
https://www.francetvinfo.fr/	72	61	0,68	4,58	0,27	0,05	0,59
https://www.ouest-france.fr/	72	50	1,02	4,75	0,36	0,06	0,65
https://www.lemonde.fr/	72	34	1,27	4,72	0,49	0,07	0,63
https://www.huffingtonpost.fr/	65	68	1,20	4,98	0,44	0,08	1,02
https://actu.fr/	64	30	0,94	5,27	0,60	0,11	1,28
https://www.nouvelobs.com	64	57	0,86	5,42	1,00	0,18	2,23
https://www.parismatch.com/	58	78	1,75	5,04	0,45	0,07	0,73
https://www.lepoint.fr/	63	55	2,05	4,89	0,28	0,05	0,53
https://www.20minutes.fr/	59	79	1,91	5,53	0,31	0,05	0,58
https://www.letelegramme.fr/	60	70	2,51	5,15	0,47	0,08	1,01
https://www.lindependant.fr/	68	67	2,44	5,25	0,36	0,06	0,63
https://www.lexpress.fr/	55	101	2,38	5,36	0,53	0,08	0,76
https://www.lavoixdunord.fr/	63	55	2,83	4,95	0,51	0,08	0,72
https://www.midilibre.fr/	63	65	2,89	5,33	0,32	0,05	0,57
https://www.ladepeche.fr/	51	70	2,90	5,36	0,58	0,10	1,22
https://www.bfmtv.com/	55	169	3,98	4,91	0,56	0,09	0,99
https://www.liberation.fr/	57	52	3,02	5,79	0,26	0,05	0,54
https://www.leprogres.fr/	49	68	2,49	6,36	0,43	0,07	0,77
https://www.francebleu.fr/	57	114	3,21	6,07	0,31	0,05	0,57
https://www.leparisien.fr/	41	83	2,84	6,59	0,39	0,07	0,73
https://www.laprovence.com/	40	161	4,17	5,71	0,35	0,06	0,60
https://www.sudouest.fr/	47	84	2,72	7,19	0,39	0,06	0,64
https://www.cnews.fr/	51	31	0,81	9,23	0,36	0,06	0,66
https://www.la-croix.com/	41	57	1,75	8,96	0,34	0,06	0,61
https://www.lefigaro.fr/	31	142	2,34	8,33	0,35	0,06	0,62
https://www.lanouvellerepublique.fr/indre	47	152	4,82	6,17	0,31	0,05	0,62
https://www.ledauphine.com/	40	73	2,54	10,74	0,28	0,05	0,55
https://www.estrepublicain.fr/	39	70	2,62	11,33	0,34	0,06	0,60
https://www.france24.com/fr/	34	38	6,56	20,14	1,10	0,20	2,43
https://www.rfi.fr/fr/	35	44	7,27	21,98	0,45	0,08	0,83

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

Site de presse	Ecoscore	Requests	Energy (mAh)	Data (Mo)	Carbon impact (gEqCO2)	Water impact (Litre)	Surface impact (m2)
laVoixDuNord	75	51	5,14	2,10	0,31	0,05	0,59
ouestFrance	74	49	5,00	0,87	0,28	0,05	0,57
franceInfo	72	44	4,85	0,58	0,27	0,05	0,55
HuffingtonPost	71	42	4,62	0,76	0,26	0,05	0,53
leMonde	71	33	5,11	1,84	0,29	0,05	0,58
actu	69	27	5,12	0,92	0,26	0,05	0,57
bfmtv	69	55	4,74	0,88	0,28	0,05	0,55
liberation	68	35	5,37	1,96	0,30	0,05	0,61
lePoint	68	58	5,30	2,12	0,33	0,05	0,61
obs	66	57	5,29	0,78	0,30	0,05	0,61
leParisien	61	39	5,28	2,17	0,31	0,05	0,60
leTelegramme	61	58	5,98	4,67	0,40	0,06	0,69
parisMatch	60	81	5,26	2,20	0,36	0,06	0,62
lesxpress	60	94	5,16	2,56	0,38	0,06	0,62
laDepeche	60	52	6,08	4,54	0,40	0,06	0,70
leDauphine	58	49	6,28	2,28	0,36	0,06	0,72
independant	58	47	5,58	4,22	0,37	0,06	0,64
leProgres	58	50	6,40	2,44	0,37	0,06	0,73
estRepublicain	56	61	6,45	3,50	0,41	0,07	0,74
franceBleu	55	78	5,75	2,80	0,39	0,06	0,67
cnews	53	26	8,34	0,66	0,39	0,07	0,92
laCroix	52	74	5,89	2,28	0,38	0,06	0,69
midiLibre	52	48	6,00	4,97	0,40	0,06	0,69
leFigaro	52	145	5,73	2,49	0,46	0,07	0,71
20minutes	48	107	5,85	3,00	0,43	0,07	0,70
rfi	44	28	21,26	6,91	1,04	0,19	2,34
laProvence	43	164	6,93	5,06	0,58	0,09	0,85
france24	42	36	19,79	6,19	0,98	0,18	2,19
laNouvelleRepublique	32	90	11,29	31,42	1,14	0,15	1,32
sudOuest	24	213	14,64	28,53	1,38	0,19	1,75

Quelle est l’empreinte environnementale des 10 sites et applications de m-commerce les plus visités en France en 2023 ?

Posted on avril 20, 2023juin 29, 2023 by Thibault TUFFIN

Reading Time: 9 minutes

Étude en partenariat avec LSA

Consulter notre interview

Le marché du e-commerce en France en 2022 s’élevait à 146,7 milliards d’euros de chiffre d’affaires. C’est une croissance en hausse de 13,8% par rapport à 2021. Bien que le chiffre d’affaires (CA) des ventes de produits soit en recul par rapport à l’année précédente, la hausse considérable (+36%) du CA des ventes de services soutient la croissance globale du secteur du e-commerce.

Accès rapides

Méthode de sélection des sites web et applications
Définition du parcours utilisateur
Classement de l’empreinte environnementale des 10 sites web
Projections des impacts carbone
Classement de l’empreinte environnementale des 10 applications
Tableaux des résultats
Méthodologie

On comptait 2,3 milliards de transactions effectuées sur internet en France en 2022, soit 6,5% de plus par rapport à 2021. L’inflation et la vente de services a contribué à une augmentation du panier moyen avec 6,9% d’augmentation. Il était en moyenne de 65 euros en 2022.

Cet article peut être exploité à titre de comparaison avec le précédent contenu réalisé sur le sujet en 2022. L’article portait sur les chiffres du e-commerce en 2021 et sur le classement des applications et des sites web de m-commerce du 2 ème trimestre 2021.

Le e-commerce désigne toutes les transactions effectuées sur Internet, tandis que le m-commerce désigne tous types d’achat effectué sur un site de commerce en ligne avec un appareil mobile. Le m-commerce est donc une sous-catégorie du e-commerce.

Méthode de selection des sites web et applications

Pour cette nouvelle version, nous nous sommes basés sur la mesure des 10 sites et applications de m-commerce les plus visités en France (chiffres du 4ème trimestre 2022 exposés par la Fevad). Par rapport au classement précédent, 2 acteurs font leur apparition : Rakuten et Darty. C’est eBay et ManoMano qui sortent du top 10.

Définition du parcours utilisateur

Après avoir affiné la sélection des 10 applications et sites web à mesurer, nous avons repris le parcours qui avait été défini dans l’article de l’année dernière.

Mise en place de la solution Greenspector

Nous avons utilisé notre solution innovante pour mesurer l’impact environnemental des différentes étapes du parcours utilisateur. Nous avons exécuté les tests automatisés à plusieurs reprises sur un appareil réel, ici le Samsung Galaxy Note 8. Nous avons mesuré les consommations de ressources (énergie, mémoire, données) et les temps de réponse. Ces données nous ont ensuite permis d’obtenir l’impact environnemental des applications et sites web. On vous explique tout cela en détail dans notre méthodologie.

En savoir plus sur notre solution

Classement de l’empreinte environnementale des 10 sites de m-commerce les plus visités en France

Les 3 sites les moins impactants sont : Leclerc, Leroy Merlin et Fnac.

En comparaison à l’article sorti l’année dernière, Cdiscount redescend du podium tandis que le site de la Fnac se hisse dans le top 3 des sites les moins impactants.

Les 3 sites les plus impactants sont : Amazon, Rakuten et Darty.

Le site Amazon est 2,2 fois plus impactant que le site Leclerc.

La moyenne d’impact carbone de ces 10 sites web est de 1,09gEqCO2 pour une durée moyenne du scénario (voir la méthodologie en fin d’article) de 1 minute et 58 secondes, soit l’équivalent de 5 mètres effectués en véhicule léger.

Projection des impacts carbone globaux sur un mois

Dans l’article de l’année dernière nous nous étions basés sur les chiffres exposés dans le rapport de l’ECN. Pour cette nouvelle étude nous nous sommes appuyés sur le baromètre de la Fevad enrichi par Médiamétrie afin d’être au plus proche de la réalité.

Pour cette projection, nous considérons que la part du trafic global du e-commerce est de 55% sur mobile, 39% sur PC et 6% sur tablette (source). Nous nous sommes également appuyés sur l’outil de l’ADEME pour projeter les équivalences.

Avec 16,15 millions d’utilisateurs mensuels en moyenne et une durée moyenne de visite de 5 minutes et 50 secondes, ces 10 sites e-commerce ont en moyenne un impact projeté de 172 tonnes d’EqCO2 par mois (29 tonnes sur mobiles, 139 tonnes sur PC, 4 tonnes sur tablettes). C’est l’équivalent de 20 fois la circonférence de la Terre parcourue en véhicule léger.

Projection d’impact pour le site web le plus et le moins sobre

Concernant le meilleur site web de ce classement (Leclerc) pour 14,84 millions de visites / mois ayant une durée de 3 minutes, l’impact carbone total serait de 58 tonnes d’EqCO2 par mois (9 tonnes sur mobile, 47 tonnes sur PC et 1 tonne sur tablette). C’est l’équivalent de 6 fois la circonférence de la Terre parcourue en véhicule léger.

Concernant le site web le moins bon de ce classement (Amazon) pour 38,29 millions de visites / mois ayant une durée de 8 minutes, l’impact carbone serait de 690 tonnes d’EqCO2 par mois (121 tonnes sur mobile, 553 tonnes sur PC et 15 tonnes sur tablette). C’est l’équivalent de 79 fois la circonférence de la Terre parcourue en véhicule léger.

Le fait que le site de Leclerc soit en tête du classement s’explique principalement par la faible consommation en énergie des étapes de visualisation du produit et de visualisation du panier. Seules les informations essentielles sont présentes sur cette page de recherche (nom des produits, prix, disponibilité). Sur la fiche produit, il y a la possibilité d’ajouter rapidement le produit au panier, et des menus déroulants sont proposés si le client souhaite plus d’informations. Ce site est également celui qui échange le moins de données pour réaliser le scénario complet.

En analysant la page des résultats de recherche des produits grâce à notre outil de mesure, on peut voir que de nombreuses bonnes pratiques sont appliquées. Il y a peu d’échanges réseaux avec 19 requêtes HTTP et un seul fichier CSS. Le chargement différé (lazy-loading) des images est appliqué.

Le fait que le site de Amazon soit dernier du classement s’explique par les étapes de recherche et de visualisation du produit. En effet, ce site consomme beaucoup d’énergie sur ces phases. L’échange de données est également important. Il y a 2,62Mo de données échangées pour la phase de recherche, et 5,85Mo de données échangées pour la visualisation de la fiche produit. Lors de la recherche, beaucoup d’informations apparaissent (indication « Suggestions », « Sponsorisé », « Amazon Choice » ou « N°1 des ventes », nom du produit, note, nombre d’avis, prix, réduction, date de livraison). Cependant, contrairement à l’année dernière, on constate qu’il n’y a plus de vidéo publicitaire en autoplay sur cette phase. Lors de la visualisation du produit, beaucoup d’informations apparaissent également (offres, dates de livraison en cas de livraison gratuite ou accélérée, détails du produit, produits fréquemment achetés ensemble…). De plus, le client est obligé de scroller avant de pouvoir accéder et cliquer sur le bouton « Ajouter au panier ».

En rentrant plus en détail sur la page de recherche d’un produit, il y a beaucoup d’échanges réseaux avec 119 requêtes HTTP et 11 fichiers CSS. Ce sont des chiffres en hausse par rapport à l’année dernière qui étaient respectivement de 109 et 9. Le chargement différé (lazy-loading) des images n’est pas appliqué, ce qui implique un chargement des images non visibles à l’écran. Cette pratique est à proscrire, car l’utilisateur ne scrollera pas forcément jusqu’à ces images.

Classement de l’empreinte environnementale des 10 applications de m-commerce les plus visitées en France

Les 3 applications les moins impactantes sont : Carrefour, Darty et Veepee

Les 3 applications les plus impactantes sont : Amazon, Aliexpress et Leroy Merlin

Nous observons que l’application Amazon a un impact carbone 3 fois plus important que l’application Carrefour.

La moyenne d’impact carbone de ces 10 applications est de 0,81 gEqCO2 pour une durée moyenne du scénario de 1 minutes et 58 secondes, soit l’équivalent de 3 mètres effectués en véhicule léger.

L’application Carrefour tient sa place des phases de visualisation de la fiche produit et de l’ajout du produit au panier qui sont plus faibles en consommation d’énergie et en quantité de données échangées. Sur l’étape d’ajout au panier on peut expliquer cela par le fait que cette dernière ne redirige pas automatiquement vers le panier et ne génère qu’un simple changement sur le bouton d’ajout au panier qui devient un sélecteur de quantité.

Cette année encore Amazon est à la dernière place du classement. Ce résultat s’explique une nouvelle fois par les phases de recherche et de visualisation du produit, pendant lesquelles l’application consomme beaucoup d’énergie. En termes de données échangées nous observons 4,73Mo sur l’étape de visualisation du produit (contre 0,05Mo pour Carrefour) et 4,15Mo sur l’étape recherche (contre 0,19Mo pour Carrefour).

Bilan de l’étude

Cette année encore nous observons que l’impact est près de trois fois plus important entre la plateforme la plus sobre et celle la plus impactante.

Pour faire ses achats en ligne, il vaut mieux passer par les applications que par les sites web. En effet, sur le scénario étudié, les sites web sont en moyenne 44% plus impactants. Seuls Leroy Merlin et Leclerc ont un impact carbone plus important sur application que sur le web. On rappelle tout de même que les applications ont un impact au niveau de leur téléchargement et de leurs mises à jour. Elles sont donc à privilégier seulement en cas de commandes régulières.

Nous tenons à compléter ce bilan par une observation que nous avons faite durant nos tests. En effet, nous avons observé que sur certains sites web et applications le parcours pouvait changer ou être altéré. C’est le cas pour Amazon qui a mis en place de l’AB testing. Cette méthode permet à l’application et au site web de notamment varier les affichages. Par exemple, sur la fiche descriptive d’un produit, la description peut être différente d’un utilisateur à l’autre.

Dans notre cas nous avons rencontré un phénomène de changement de parcours sur le site web d’Amazon. Lors d’un premier test nous étions redirigé directement vers le panier avec l’ajout du produit à ce dernier. Lors d’un second test effectué le lendemain nous n’étions plus redirigé automatiquement vers la page panier. À la place de cela, nous devions nous même nous rendre sur le panier en cliquant sur l’icône prévu à cet effet.

En fonction du parcours, le site ou l’application consommera plus ou moins d’énergie et échangera plus ou moins de données. L’AB testing est une fonctionnalité exploitée par de nombreuses solutions numérique dans le monde et nous le traitons dans nos automatisations de parcours grâce à notre langage GDSL. Dans le cas de notre étude nous avons bien sûr pris le soin de baser nos mesures sur un seul et même parcours.

Tableaux des résultats

Classement des 10 sites web les plus visités en France

Sites web	url	Energie (mAh)	Données échangées (Mo)	Impact carbone (gEqCO2)	Empreinte eau (Litres)	Empreinte sols (cm2)	Durée du scénario (secondes)
Leclerc	e.leclerc	12,09	3,97	0,67	0,12	1,37	102,71
Leroy Merlin	leroymerlin.fr	14,85	4,19	0,79	0,14	1,67	123,27
Fnac	fnac.com	17,26	4,43	0,90	0,16	1,94	109,37
Cdiscount	https://cdiscount.com/	15,07	7,32	0,94	0,16	1,73	123,48
Carrefour	carrefour.fr	18,93	4,74	0,99	0,18	2,12	125,94
Aliexpress	https://fr.aliexpress.com/	18,35	6,75	1,05	0,18	2,08	128,71
Veepee	veepee.fr	17,00	14,27	1,32	0,20	2,03	118,11
Darty	https://www.darty.com/	22,19	9,98	1,35	0,23	2,54	117,84
Rakuten	https://fr.shopping.rakuten.com/	21,57	12,12	1,41	0,23	2,50	113,64
Amazon	amazon.fr	24,38	11,17	1,49	0,25	2,80	123,62

Classement des 10 applications les plus visitées en France

Application	Version	Energie (mAh)	Données échangées (Mo)	Impact carbone (gEqCO2)	Empreinte eau (Litres)	Empreinte sols (cm2)	Durée du scénario (secondes)
Carrefour	16.9.1	11,27	1,35	0,52	0,10	1,25	107,77
Darty	4.2.5	11,40	2,70	0,59	0,11	1,28	108,52
Veepee	5.43.1	9,87	5,70	0,65	0,11	1,15	102,25
Fnac	5.3.6	13,46	2,37	0,66	0,12	1,50	126,91
Cdiscount	1.62.0-twa	16,63	1,07	0,73	0,14	1,83	111,73
Leclerc	19.2.0	14,38	3,42	0,74	0,13	1,61	127,75
Rakuten	9.3.0	13,75	4,03	0,74	0,13	1,55	130,35
Leroy Merlin	8.11.2	13,30	8,85	0,93	0,15	1,56	119,27
Aliexpress	8.67.2	16,17	9,12	1,06	0,17	1,88	120,11
Amazon	24.6.0.100	21,59	14,29	1,51	0,24	2,53	130,15

La sélection se porte sur des applications et sites dans lesquels nous pouvons définir un parcours commun. Nous avons donc écarté certains sites et apps qui présentaient un parcours trop différent de celui affiché ci-dessous. Exemple : Booking.com.

Nous avons également écarté 2 solutions basées sur l’achat entre particuliers qui sont Leboncoin et Vinted.

Pour chaque site et chaque application, mesurés sur un Samsung Galaxy Note 8 (Android 9), les mesures ont été réalisées à partir de scripts utilisant le langage GDSL (Greenspector Domain-Specific Language). Ce langage permet d’automatiser des actions à réaliser sur un téléphone. Les mesures ont été réalisées entre le 10 et 19 avril 2023.

Le scénario est défini en nous basant sur le parcours utilisateur d’achat d’un produit. Nous n’allons pas jusqu’à l’étape de paiement. Nous nous arrêtons à la visualisation du produit.

Détail du scénario commun aux 20 mesures :

-Lancement du site ou de l’application
-Pause de 30 secondes sur la page d’accueil
-Recherche d’un produit en passant par la barre de recherche, puis visualisation des produits proposés
-Sélection d’un produit, puis visualisation de ses caractéristiques (détails, avis…)
-Ajout du produit au panier
-Pause de 30 secondes sur la page du panier

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 wifi peuvent être différentes sur un PC portable avec un réseau filaire par exemple. Pour chacune des itérations sur les sites internet, le cache est préalablement vidé.

Côté projection de l’empreinte, les paramètres pris en compte pour réaliser ces classements sont :

Ratio de visualisation : 100% Smartphone
Ratio de visualisation : 100% France
Localisation des serveurs : 100% Monde

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

Bonne pratique : Limiter le nombre de services tiers

Posted on avril 12, 2023novembre 13, 2023 by Laurent DEVERNAY

Reading Time: 6 minutes

L’article en résumé

Un service tiers c’est quoi ? Ce sont des services qui permettent d’integrer une fonctionnalité ou un contenu complexe via du code dont on a peu de contrôle. Les 10 services tiers les plus fréquents bloquent le chargement des sites pendant environ 1,4s. Les polices google sont le service le + répandu alors même que son utilisation peut contrevenir au RGPD.

Les impacts des services-tiers sont loin d’être négligeables. En termes environnementaux, de performance, de sécurité mais aussi de gestion des données personnelles, de captation de l’attention et parfois même d’accessibilité. Il convient donc d’y avoir recours le moins possible. Ce dernier point est soutenu par les référentiels du RGESN et du GR491.

Les bonnes pratiques pour limiter les services tiers ?

Votre site est en construction : ne pas inclure de services tiers
Votre site est déjà construit : limiter l’ajout de contenus ou supprimer certains services tiers ( en vérifiant la compatibilité avec la conception, marketing ou stratégie déjà en place)
Votre site se chargera plus vite : un bonus pour le numérique responsable ainsi que l’expérience utilisateur.

Un exemple concret :
Lors d’un audit client, il a été décidé de supprimer le fil twitter présents sur plusieurs pages du site.

Résultats :
une amélioration significative des métriques et indicateurs.

En particulier :

Réduction de la vitesse de décharge de la batterie de 36%
Réduction de la charge CPU de 76%
Réduction du volume de données transférées de 68%

Contexte

Les services-tiers sont présents sur 94% des sites web et représenteraient 45% des requêtes effectuées par l’ensemble des sites web. Ces services servent à intégrer une fonctionnalité ou un contenu complexe via du code le plus souvent hébergé sur un autre site, en ayant peu ou pas de contrôle sur celui-ci. Ainsi, il peut s’agir d’une solution d’analytics, d’une vidéo, des contenus d’un réseau social, d’un captcha, de trackers, etc.
En voici une liste (triée par catégories), construite par Patrick Hulce.

Tweet de Marcel Freinbichler

Traduction : En raison de RGPD, USA Today a décidé d’exécuter une version distincte de son site web pour les utilisateurs de l’UE (Union Européenne), dans laquelle tous les scripts de suivi et les publicités ont été supprimés. Le site semblait très rapide, j’ai donc fait un audit de performance. À quelle vitesse Internet pourrait être sans tous les déchets ! 🙄

5,2 Mo → 500 Ko

Vous trouverez plus d’informations à leur sujet ainsi que des statistiques sur leur utilisation dans le chapitre Third-parties du Web Almanac : https://almanac.httparchive.org/en/2022/third-parties

Il en ressort notamment que les 10 plus fréquents bloquent en moyenne le chargement des sites pendant 1,4s et que des optimisations techniques restent souvent possibles (minification, compression, chargement différé mais aussi suppression de code JS obsolète). Aussi, la plupart des services tiers les plus utilisés sont liés à Google.

Il est d’ailleurs intéressant de noter que les polices Google sont le service le plus répandu, alors même que leur utilisation peut contrevenir au RGPD. Une façon d’y remédier est d’héberger soi-même les fichiers correspondants. Le mieux reste bien sûr de s’en tenir le plus possible aux polices système disponibles sans requête supplémentaire.

Il ressort de tout ceci que les impacts des services-tiers, en particulier sur les sites web mais aussi les applications mobiles, sont loin d’être négligeables. En termes environnementaux, de performance, de sécurité mais aussi de gestion des données personnelles, de captation de l’attention et parfois même d’accessibilité (voir à ce sujet l’article de Temesis : https://www.temesis.com/blog/contenus-tiers-exemptes-deroges-audites/). Il convient donc d’y avoir recours le moins possible.

Chez Greenspector, c’est quelque chose que nous regardons de très près pour nos clients, via des outils spécifiques permettant de lister les services tiers et d’estimer leurs impacts respectifs. C’est d’ailleurs là une valeur ajoutée non-négligeable de la mesure. Et une étape incontournable pour réduire les impacts environnementaux et améliorer l’expérience utilisateur.

Intéressons-nous aujourd’hui à la bonne pratique de sobriété qui consiste à intégrer le moins possible de services-tiers dans un service numérique.

Référentiels existants

On retrouve ce critère dans la famille Spécifications du RGESN (Référentiel Général d’écoconception de services numériques) : 2.5 – Le service numérique a-t-il pris en compte les impacts environnementaux des services tiers utilisés lors de leur sélection ?

On le retrouve également dans le GR491 (Guide de référence de conception responsable de services numériques) : Est-ce que les services tiers (fils réseaux sociaux, social wall, carrousels, google maps etc) ne sont pas utilisés par facilité pour pallier le manque de ressources de production de contenus ?

Bonne pratique

Objectif

Cette bonne pratique de sobriété consiste donc à limiter le nombre de services-tiers dans un service numérique.

Quand ?

Elle intervient dès la conception du service (choisir de ne pas inclure les services en question) mais aussi lors de l’ajout de contenu (afin par exemple de ne pas intégrer directement une vidéo Youtube dans un article).

Facilité de mise en œuvre

Il est facile techniquement de supprimer un service-tiers. En revanche, cette suppression peut nécessiter en amont des discussions sur la conception, le marketing ou la stratégie. C’est d’ailleurs pour cela que cette décision doit intervenir le plus tôt possible dans le projet.

Gains estimés

Les gains peuvent être conséquents sur plusieurs domaines liés au Numérique Responsable. Dans tous les cas, l’expérience utilisateur en bénéficie.

Cas d’étude

Lors de l’accompagnement d’un client (audit initial puis mesures quotidiennes et expertise), il a été décidé de supprimer le fil Twitter présent sur plusieurs pages du site. La modification a eu lieu le 1er février 2023. Les mesures sur la page d’accueil mettent en avant les gains liés à cette modification, constats que l’on observe par la mesure des consommations de ressources IT et d’énergie via l’outil Greenspector.

Evolution des métriques liées au chargement de la page entre le 1er et le 2 février 2023

Ecoscore (benchmark web) du 1er février 2023

Ecoscore (benchmark web) du 2 février 2023

On constate donc ici une amélioration significative des métriques et indicateurs. En particulier :

Réduction de la vitesse de décharge de la batterie de 36%

Réduction de la charge CPU de 76%
Réduction du volume de données transférées de 68%

Suite à la projection environnementale via la méthodologie Greenspector, on constate que l’impact de cette page d’accueil était, avant suppression du fil Twitter, de 0.95g eqCO2. Après suppression de ce fil, il est de 0.54g eqCO2.

La page en question a plus de 2,5 millions de vues par an.

Dans un souci de simplification, on laisse de côté ici les apports du cache côté client (même s’ils sont sûrement non-négligeables), les disparités de temps passé par chacun sur cette page, ainsi que les modifications apportées à celle-ci sur ce laps de temps.

On passe alors d’un impact sur un an de 2,38T eqCO2 à 1,36T eqCO2, soit une réduction de plus de 40% de l’impact en termes d’émissions de gaz à effet de serre.

Pour les autres impacts évalués, la tendance est similaire. Ainsi, sur un an, on passe de 383047 à 224675 L d’eau consommée et de 383 à 230 m² d’occupation des sols.

Aller plus loin

Pour les services-tiers jugés indispensables, il existe des méthodes pour en réduire l’impact (via des bonnes pratiques d’efficience). Il peut notamment s’agir d’avoir recours à une façade pour intégrer une carte interactive ou une vidéo sous la forme d’une vignette cliquable.

Certains articles abordent le sujet sous l’angle de la performance web :

Reducing the Site-Speed Impact of Third-Party Tags, par Andy Davies [article en anglais] : améliorer la performance via la gestion des tags.
How to Find the Third-Parties on Your Site, par Simon Hearne [article en anglais] : présentation de l’outil RequestMap, intégré dans Webpagetest pour détecter les services-tiers. Cet outil avait déjà été abordé sur le blog de Greenspector dans le cas d’une application Android.
Identifying, Auditing, and Discussing Third Parties, par Harry Roberts [article en anglais] : comment auditer les services-tiers d’un site
Reducing The Web’s Carbon Footprint: Optimizing Social Media Embeds, par Michelle Baker [article en anglais] : comment intégrer les contenus de réseaux sociaux de façon efficiente.
Partytown [article en anglais] : une librairie qui propose de gérer les services-tiers via un WebWorker

Are my third parties green, par Fershad Irani [article en anglais] : un outil en ligne pour évaluer l’impact environnemental des services-tiers via la provenance de l’électricité alimentant les serveurs.

Optimiser son site pour l’impression

Posted on janvier 11, 2023janvier 31, 2023 by Laurent DEVERNAY

Reading Time: 2 minutes

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

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

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

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

Le référentiel des 115 bonnes pratiques d’écoconception web du collectif GreenIT.fr propose la BP_027 : “Fournir une CSS print”. Le bref exemple fourni couvre déjà une bonne partie des recommandations que nous détaillerons dans le reste de l’article.
Le GR491 propose de vérifier qu’une version épurée est bien disponible pour l’impression et qu’une police optimisée pour l’impression est utilisée.

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

Limiter le nombre de pages

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

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

Limiter les surfaces d’encre

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

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

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

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

Comment mettre en œuvre ces recommandations ?

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

Conclusion

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