Catégorie : Numérique responsable

Hébergeurs web, impact et actions de sobriété

Posted on février 8, 2023mars 7, 2023 by Laurent DEVERNAY

Reading Time: 9 minutes

L’article s’appuie sur des mesures réalisées en novembre 2022. Il se peut que certaines entreprises aient depuis modifié leur site web.

Résumé de l’article

Les fournisseurs d’hébergement web sont de plus nombreux à s’affirmer écoresponsables.

– Nous avons mesuré la page d’accueil de 21 hébergeurs web.
– Nous avons analysé la page d’accueil du premier du classement qui est Empreinte Digitale.
– Nous avons ensuite analysé la page d’accueil du dernier du classement qui est Infomaniak.
– Nous avons ensuite jeté un oeil au site de Greenshift en exposant un extrait des requêtes HTTP de la page d’accueil.

Pour finir nous avons passé en revue les bonnes pratiques de sobriété et d’accessibilité qui révèlent que Eolas et Empreinte Digitale comportent le moins d’erreurs d’accessibilité contrairement au site Infomaniak qui est le site en comportant le plus.

Dans le prochain article, nous nous intéresserons aux critères nécessaires afin d’évaluer l’écoresponsabilité d’un hébergeur.

Lorsqu’on s’intéresse à la sobriété numérique, la question de l’hébergeur revient très souvent. En effet, il s’agit là d’un levier très intéressant et transverse pour réduire l’impact environnemental des services numériques. Les choses se compliquent lorsque l’on cherche à démêler le vrai du faux afin de choisir le meilleur hébergeur possible en fonction des contraintes métiers du projet. Certains fournisseurs vont jusqu’à parler de neutralité carbone voire même de négativité carbone (Anglais).

Les affirmations de neutralité carbone reposent le plus souvent sur la provenance de l’électricité utilisée selon une approche market-based (les affirmations du fournisseur) ou location-based (mix énergétique de la zone géographique). Sachant qu’une partie des scopes 1, 2 et 3 sont souvent négligées, tout ceci rend ces affirmations caduques. L’objet de cet article n’est pas forcément de creuser en détail ce point mais vous trouverez de premiers éléments de réponse ici :

[Youtube, 24min 16s] Outils d’empreinte carbone des cloud public, une intervention de Pierre Rust de chez Orange Innovation

Les “neutralités carbone” des entreprises du numérique, par EcoInfo

Aujourd’hui, dans tous les cas, les affirmations d’écoresponsabilité des hébergeurs reposent le plus souvent sur le PUE (Power Usage Effectiveness (Anglais)) et la provenance de l’électricité utilisée. Ceci semble bien insuffisant. Côté Greenspector, nous avons donc décidé de nous pencher sur le sujet, de voir ce qui était proposé aujourd’hui et de nous baser sur la littérature existante afin de déterminer sur quels critères se baser pour choisir son hébergeur. Nous avons alors pu classer plusieurs hébergeurs français (ou proches).

Dans ce premier article, nous avons décidé d’évaluer la page d’accueil de leurs sites du point de vue de la sobriété numérique, afin de vérifier si elles reflètent leurs affirmations liées à l’environnement. Cette approche est bien sûr biaisée et non représentative mais elle permet déjà de se faire une idée du positionnement de chacun de ce point de vue.

Ce n’est qu’avec le second article que nous pourrons vraiment départager les hébergeurs, en les passant au crible des critères que nous aurons retenus.

Comparaison des pages d’accueil

En raison de leurs intentions concernant les impacts environnementaux, 21 hébergeurs ont été retenus. Nous avons sélectionné en priorité ceux qui affichent des efforts pour réduire les impacts environnementaux des services qu’ils proposent. Nous en avons peut-être oublié certains. Si tel est le cas, n’hésitez pas à nous le faire savoir !

Partant de cette liste, nous avons mesuré la page d’accueil de chacun avec l’outil Greenspector en vue de les comparer.

Nom	URL	Ecoscore	Energie (mAh)	Données transférées (Mo)	Requêtes HTTP
Webaxys	https://webaxys.fr/	89	4,173192	0,47913	21
Empreinte Digitale	https://cloud.empreintedigitale.fr/	85	5,009883	0,313111667	18
Greenshift	https://www.greenshift.co/fr/	80	4,253108	1,079741667	51
Eolas	https://www.eolas.fr/	73	4,449822	1,416203333	59
IONOS	https://www.ionos.fr	72	4,586076	0,9967127	27
Scaleway	https://www.scaleway.com/	72	5,083758	2,247849663	29
OVH	https://www.ovhcloud.com/fr/	72	5,553175	1,832020334	64
Neutral IT	https://neutral-it.com/	69	6,62236	1,286239	49
o2switch	https://www.o2switch.fr/	67	5,3824	0,979763667	90
Ikoula	https://www.ikoula.com/	66	5,315384	1,54606967	33
PlanetHoster	https://www.planethoster.com/	66	5,469159	1,778474	76
DRI	https://www.dri.fr/	60	5,98907	0,451148333	27
Datacampus	https://datacampus.fr/	60	5,691275	13,14124667	64
EX2	https://www.ex2.com/	58	5,474202	9,756049	91
Data Center Light	https://datacenterlight.ch/	56	4,686341	2,86276037	51
Sostradata	https://www.sostradata.fr/	52	7,235153	17,19431033	89
Digital Forest	https://digitalforest.fr/	51	6,225642	0,897602	35
OVEA	https://www.ovea.com/	45	7,01255	4,253318032	111
Infomaniak	https://www.infomaniak.com/	39	10,30043	3,092772997	72

Résultats des mesures sur les pages d’accueil

Résultats de la projection environnementale

Description de l’image présentant les impacts environnementaux des sites des hébergeurs web

L’image classe les sites web par écoscore. On affiche donc ce dernier en plus de trois données liées à l’impact environnemental : le gramme equivalent CO2 exprimé en gEqCO2, la quantité d’eau utilisée exprimée en litres et l’utilisation des sols exprimée en m2. C’est un classement du plus grand au plus petit ecoscore :

Empreinte Digitale avec un ecoscore de 85 pour 0,24 gEqCO2, 0,04 litres et 0,56m2. Greenshift avec un ecoscore de 80 pour 0,26 gEqCO2, 0,04 litres et 0,49m2. Eolas avec un ecoscore de 73 pour 0,28 gEqCO2, 0,05 litres et 0,52m2. Webaxys avec un ecoscore de 73 pour 0,48 gEqCO2, 0,06 litres et 0,58m2. IONOS avec un ecoscore de 72 pour 0,24 gEqCO2, 0,04 litres et 0,52m2. Scaleway avec un ecoscore de 72 pour 0,29 gEqCO2, 0,05 litres et 0,57m2. OVH avec un ecoscore de 72 pour 0,34 gEqCO2, 0,06 litres et 0,64m2. Neutral IT avec un ecoscore de 69 pour 0,34 gEqCO2, 0,06 litres et 0,75m2. O2 Switch avec un ecoscore de 67 pour 0,35 gEqCO2, 0,06 litres et 0,64m2. Ikoula avec un ecoscore de 66 pour 0,29 gEqCO2, 0,05 litres et 0,60 m2. PlanetHoster avec un ecoscore de 66 pour 0,35 gEqCO2, 0,06 litres et 0,64 m2. Clever Cloud avec un ecoscore de 61 pour 0,39 gEqCO2, 0,06 litres et 0,61 m2. DRI avec un ecoscore de 60 pour 0,29 gEqCO2, 0,05 litres et 0,67 m2. Data Campus avec un ecoscore de 60 pour 0,55 gEqCO2, 0,07 litres et 0,67 m2. EX2 avec un ecoscore de 58 pour 0,51 gEqCO2, 0,07 litres et 0,66 m2. Data center light avec un ecoscore de 56 pour 0,31 gEqCO2, 0,05 litres et 0,54 m2. SostraData avec un ecoscore de 52 pour 0,72 gEqCO2, 0,10 litres et 0,86 m2. Digital Forest avec un ecoscore de 51 pour 0,32 gEqCO2, 0,06 litres et 0,70 m2. Ovea avec un ecoscore de 45 pour 0,51 gEqCO2, 0,08 litres et 0,83 m2. Infomaniak avec un ecoscore de 39 pour 0,57 gEqCO2, 0,10 litres et 1,77 m2.

Regardons maintenant plus en détail

Du côté de l’Ecoscore (dont vous retrouverez la méthodologie de calcul sur le blog Greenspector), c’est la page d’accueil du site de Webaxys qui s’en sort le mieux et Infomaniak le moins bien. Pour Infomaniak, ceci s’explique notamment par le fait que l’impact énergétique du site est très élevé. C’est même le plus élevé de l’échantillon. A l’opposé, de ce point de vue, c’est une fois de plus Webaxys qui s’en sort le mieux. Empreinte Digitale présente le volume de données transférées le plus faible alors que Sostradata en transfère le plus (plus de 17 Mo!). Concernant les requêtes HTTP, la page d’accueil du site d’Empreinte Digitale en utilise le moins alors que celle de OVEA en présente le plus (à première vue, quelques optimisations seraient assez faciles à mettre en œuvre en évitant les doublons et en différant le chargement du chat voire en questionnant la pertinence de celui-ci).

Les pages d’accueil des sites de Webaxys et d’Empreinte Digitale sortent clairement du lot et nous allons maintenant les analyser plus en détail. Nous complèterons ensuite par une rapide analyse des éléments du site d’Infomaniak qui le rendent plus impactant. Nous terminerons par un petit tour d’horizon des autres sites.

Empreinte Digitale

Cette page d’accueil est particulièrement légère, ce qui est l’occasion de noter l’application de plusieurs bonnes pratiques :

Images optimisées et lazy-loadées
Services-tiers maîtrisés et à priori tous auto-hébergés
Très peu de JS et de CSS
Utilisation uniquement de polices système

Le site est agréable et attractif. Le score pourrait être encore meilleur sans l’animation mais celle-ci est absente sur mobile. Le choix du dithering pour certaines images met en avant la volonté de produire un site aussi léger que possible mais n’est pas forcément nécessaire.

Webaxys

On retrouve ici des images légères et lazy-loadées, au service simple et attractif.

Sur ce type de site très optimisé et léger, certains défauts ressortent d’autant plus, en particulier l’utilisation des polices Google.

On constate ici 7 requêtes uniquement pour ces polices alors qu’une police système aurait probablement convenu. Il faut également rappeler que leur utilisation depuis les serveurs Google peut poser problème vis-à-vis du RGPD. Une police variable pourrait à la rigueur permettre de limiter le nombre de fichiers et un subset (se limiter aux caractères utiles) en réduire la taille. Mais la priorité serait bien d’avoir recours à une police système.

Enfin, la dernière requête de la liste correspond vraisemblablement à FontAwesome. On récupère donc ici une police d’icônes alors que quelques icônes seulement sont utiles (et pourraient être intégrées en SVG optimisé, peut-être même directement dans le HTML).

Infomaniak

Le site d’Infomaniak dénote par son Ecoscore faible et son impact énergétique élevé.

En y regardant de plus près, on note déjà que l’essentiel du poids de la page est dû à de nombreux fichiers JS (une quarantaine en tout!).

De plus, l’animation en haut de page (pour la recherche d’un nom de domaine) semble être l’une des causes de la surconsommation énergétique, mis en évidence dans l’outil Greenspector :

*Sollicitation du CPU pour l’affichage de la page*

D’autres pistes d’explication de cette surconsommation peuvent être à chercher du côté des traitements JS. Dans tous les cas, celle-ci devrait être analysée et limitée.

Autres sites

La page d’accueil du site de Greenshift montre un impact énergétique peu élevé, malgré l’inclusion d’animations lors du chargement de la page. En revanche, niveau utilisabilité, la présence de scroll horizontal sur mobile n’est pas idéale.

Pour le site de Sostradata, qui présente le volume de données transférées le plus élevé de l’échantillon, un coup d’oeil rapide permet de noter des premiers axes d’amélioration :

Eviter d’inclure directement un composant Google Maps sur la page d’accueil
Optimiser les images (taille, format, qualité, lazy-loading)

*Extrait des requêtes HTTP de la page (via les DevTools de Firefox)*

Bonnes pratiques de sobriété numérique

En termes de bonnes pratiques, il est à noter que la page d’accueil de Neutral IT est celle qui respecte le plus de critères.

De ce point de vue, nous avons constaté que certaines bonnes pratiques ne sont quasiment jamais mises en œuvre sur les pages de notre échantillon. Pour améliorer l’impact, il faut systématiquement penser à :

Ne pas laisser le navigateur retailler les images, cela permet de limiter la consommation des ressources du terminal
Ne télécharger que les images nécessaires et faire du lazy loading
Autant que possible, ne pas intégrer de code css et js dans les fichiers HTML; cela évitera le rechargement systématique de tout le fichier en cas de besoin
Et bien sûr, une fois que les fichiers css et js sont indépendants, il faudra les minifier pour gagner en volume

Bonnes pratiques d’accessibilité

En complément des mesures et de la vérification de bonnes pratiques (deux approches complémentaires et difficilement dissociables), nous avons eu la curiosité d’évaluer brièvement les sites retenus sous l’angle de l’accessibilité. S’il est important de réduire les impacts environnementaux des services numériques, ceci ne peut pas se faire sans garder en tête de s’assurer que le site s’adapte à tous les contextes d’utilisation afin de n’exclure personne. A quoi bon avoir le site le moins impactant possible s’il est inutilisable pour une partie de la population ?

Notre volonté ici n’étant pas d’être exhaustifs, nous nous sommes appuyés sur l’outil aXe (Anglais) (rappelons ici que ce type d’outil n’a pas pour vocation à couvrir l’ensemble des critères des WCAG (Anglais) ou du RGAA) et sur la vérification manuelle de certains critères (zoom à 200%, linéarisation du contenu, alternatives textuelles, etc). En accessibilité comme en sobriété numérique, il n’y a pas de baguette magique !

Au final, nos constats sont les suivants :

Les sites web d’Eolas et Empreinte Digitale comportent le moins d’erreurs d’accessibilité
Malgré son impact environnemental réduit, le site de Webaxys présente plusieurs erreurs assez faciles à résoudre
Le site d’Infomaniak est parmi les sites qui en comportent le plus
Parmi les erreurs les plus fréquentes, on retrouve principalement celles mises en avant par l’étude WebAIM Million (Anglais) (ce qui est cohérent) :

On constate donc ici (une fois de plus) qu’accessibilité et sobriété numérique sont liées. Il serait délicat d’affirmer que ceux qui ne veillent pas à la sobriété de leurs sites web ne se préoccupent pas de l’accessibilité (et inversement). En revanche, il est important de rappeler qu’il sera d’autant plus simple d’appliquer des critères d’accessibilité sur un site sobre et davantage encore lorsque les deux démarches sont menées conjointement tout au long du cycle de vie du projet.

Conclusion

Une première analyse rapide des sites web des hébergeurs retenus permet de distinguer ceux qui font l’effort d’un site sobre (et accessible). Si ceci ne témoigne pas de l’attention qu’ils portent à la réduction des impacts environnementaux de leurs offres d’hébergement, il sera intéressant de voir si les tendances remarquées ici se confirment par la suite.

Dans le prochain article de cette série, nous nous intéresserons aux critères nécessaires afin d’évaluer l’écoresponsabilité d’un hébergeur. Nous reviendrons aux sites des hébergeurs retenus afin de déterminer comment chacun se positionne par rapport aux critères en question.

Pour chacun de ces sites web et applications, mesurés sur un smartphone S9 (Android 10), les mesures ont été effectuées à l’aide de notre Greenspector Benchmark Runner, qui permet des tests automatisés. Seule la page d’accueil des sites web a été mesurée.

Détails des scénarios :

Chargement de l’application
Inactivité du site web en avant-plan
Défilement
Inactivité du site web en arrière-plan

Chaque mesure est la moyenne de 5 mesures homogènes (avec un faible écart-type). La consommation mesurée sur un smartphone donné selon un réseau de type wifi peut être différente sur un ordinateur portable avec un réseau filaire par exemple. Pour chaque itération, le cache est vidé au préalable.

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

Laurent DEVERNAY

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.

ldevernay.github.io/

Réduire les impacts de l’autocomplétion

Posted on janvier 3, 2023janvier 4, 2023 by Laurent DEVERNAY

Reading Time: 4 minutes

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

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

Prenons l’exemple du moteur de recherche de Google :

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

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

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

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

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

Premières recommandations

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

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

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

Limiter les recherches inutiles par les moteurs de recherches locaux : pour cela, on se base sur le nombre de lettres saisies afin d’espacer les requêtes
Limiter le nombre de requêtes entre le client et le serveur : cette bonne pratique plus générale s’applique tout à fait ici

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

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

Préconisations

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

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

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

Seuls les champs pertinents sont renvoyés. Par exemple, il n’est pas toujours nécessaire d’afficher une image pour chaque résultat

On ne renvoie que les éléments nécessaires (pertinence des réponses et pagination des résultats)

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

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

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

Espacer les requêtes dans le temps

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

Limiter le nombre de requêtes pour saisies rapides

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

Mesurer la pertinence en local

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

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

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

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

Retour sur l’exemple du moteur de recherche Google

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

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

Conclusion

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

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

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

Laurent DEVERNAY

ldevernay.github.io/

Supprimer ses mails c’est inutile, travailler sur des solutions d’email sobre c’est obligatoire

Posted on novembre 28, 2022février 9, 2023 by Olivier PHILIPPOT

Reading Time: 2 minutes

La découverte du fait que le numérique n’était pas si virtuel et qu’il pouvait avoir un impact sur l’environnement a amené une multitude d’injonctions suivi d’une multitude de critiques et de contre-injonctions. “Il faut supprimer ses mails”, “Non c’est comme faire pipi dans la douche, cela ne sert à rien”… La critique de ces actions par les acteurs du numérique est assez forte relativement à la grande partie de la population “non technique” qui a pris cela à cœur (et qui a augmenté son éco-anxiété !).

Ces discussions ont aussi amené à départager le plus pollueur entre l’usage et la fabrication. Usage du mail versus Fabrication du terminal sur lequel on lisait le mail. Ce dernier étant annoncé comme plus impactant, cela allait dans le sens d’une inutilité d’optimiser la partie mail!

Oui l’impact se concentre sur la fabrication des terminaux. Oui l’impact unitaire d’un mail est faible, surtout comparé à une raclette (c’est une private joke, une blague qui circule chez les détracteurs de la sobriété numérique). Ce sont des messages assez rassurants dans un monde binaire. Rassurant pour limiter l’eco-anxiété. Mais surtout rassurant pour les acteurs du numérique pour ne pas traiter le problème et continuer le business-as-usual.

Car oui il y a bien un potentiel problème. En effet, l’effet d’échelle fait qu’un impact unitaire faible peut amener à un impact important avec un grand nombre d’utilisateurs et des usages de plus en plus nombreux. Les 4% d’impact du numérique n’arrivent pas comme cela. Surtout quand on liste et observe ce qui se passe sur internet chaque minute.

Une diversité et une fréquence beaucoup plus importante que la raclette (pour information, il faudrait manger 12 fois de la raclette par an)

L’emballage plastique de nos aliments, pris unitairement n’a pas un impact énorme. C’est quelques milligrammes de plastique mais ce dernier est bien un problème environnemental global. Comme le dirait Gerry McGovern, le plastique est une plaie environnementale mais si tu as un sac plastique, utilise-le !

“Avoid plastic packaging. Bring your own bag and avoid the barcodes. Whenever you can replace plastic with another material, do, but don’t replace it simply for the sake of it. If you have a plastic bag, use the hell out of it.”
Gerry McGovern

En tant qu’acteur du numérique, nous devons travailler sur les impacts car l’effet d’échelle fait que nos solutions ont un impact global non négligeable. Utiliser l’argument “d’ordre de grandeur” en ne prenant que l’impact unitaire n’est pas valide.

Derrière un email, il y a un éditeur de solution. Derrière un réseau social, aussi. Chaque acteur du numérique contribue à une brique utilisée au final par un utilisateur.

Il est donc nécessaire d’optimiser nos solutions, de proposer de meilleure gestion des solutions. Quid des options de suppression de mail intelligente qui seraient proposées dans les solutions mail ? Quid la fourniture de solutions d’aide à la rédaction de mail sobre (pièces jointes, signatures…) ? C’est possible, les éditeurs l’ont fait pour la gestion des spams, pourquoi ne pas aller plus loin ?

Quant à la sensibilisation des utilisateurs, elle est nécessaire mais elle doit être moins anxiogène, sans passer dans du whataboutisme.

Olivier PHILIPPOT

Expert Sobriété Numérique
Auteur des livres «Green Patterns», «Green IT – Gérer la consommation d’énergie de vos systèmes informatiques», …
Conférencier (VOXXED Luxembourg, EGG Berlin, ICT4S Stockholm, …)
Fondateur du Green Code Lab, association nationale de l’écoconception des logiciels

Le numérique responsable chez Greenspector

Posted on août 24, 2022août 24, 2022 by Laurent DEVERNAY

Reading Time: 6 minutes

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

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.

Pour cela, les référentiels se multiplient. On citera par exemple le GR491 de l’INR, le RGESN de la DINUM, les 115 bonnes pratiques ou encore OPQUAST.

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.

Pourtant, aujourd’hui encore, 97,4% des sites web parmi les plus utilisés comportent au moins une erreur d’accessibilité. La mise en conformité des démarches administratives est elle aussi loin de ce qu’on pourrait en attendre. L’accessibilité reste néanmoins un sujet essentiel pour le numérique responsable et contribue à assurer l’utilisabilité des services numériques ainsi que leur pérennité.

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 :

Laurent DEVERNAY

ldevernay.github.io/

Un site sobre est-il nécessairement moche ?

Posted on juillet 11, 2022juillet 12, 2022 by Laurent DEVERNAY

Reading Time: 9 minutes

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

Accès rapides
Classement des sites sobres
Méthodologie
Analyse du classement
Conclusion

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

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

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

Où sont les sites sobres ?

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

Voici les listes en question :

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

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

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

Sites sobres : le verdict par la mesure

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

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é.

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

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

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

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

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

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

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

Analyse du classement des sites sobres

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

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

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

E-commerce

La liste contient 3 sites de e-commerce :

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

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

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

Magazines et presse en ligne

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

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

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

Autres sites

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

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

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

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

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

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

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

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

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

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

Conclusion

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

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

Laurent DEVERNAY

ldevernay.github.io/

Métavers et Numérique Responsable : métavert ?

Posted on juin 14, 2022juin 29, 2022 by Laurent DEVERNAY

Reading Time: 5 minutes

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.

Vous trouverez assez facilement des experts vantant les mérites du métavers pour désengorger les routes, se projeter dans des bureaux spacieux à moindre coût, réaliser des interventions chirurgicales depuis l’autre bout du monde, etc.

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.

Laurent DEVERNAY

ldevernay.github.io/

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

Posted on mai 31, 2022juin 3, 2022 by Kimberley DERUDDER

Reading Time: < 1 minute

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

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

Classement de l’empreinte environnementale des partenaires

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

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

Classement	Nom	Ecoscore	Carbon Impact (gEqCO2)	Requêtes	Énergie (mAh)	Données échangées (Mo)	Empreinte Eau (Litres)	Empreinte Sol (m²)
1	NumériqueResponsable Zici	86	0.15	7	3.36	0.102	0.03	0.37
2	Treebal	80	0.18	17	3.44	0.774	0.03	0.39
3	Empreinte Digitale	72	0.19	25	3.5	0.586	0.03	0.4
4	ASI	71	0.2	25	3.55	0.618	0.03	0.4
5	Parthema	76	0.21	23	3.82	0.72	0.04	0.43
6	BDM	77	0.22	19	4.02	1.1	0.04	0.45
7	Greenspector	67	0.22	38	3.74	0.386	0.04	0.43
8	GreenTechInnovation	64	0.22	14	4.12	1.57	0.04	0.46
9	Marché de l'impact	74	0.23	13	4.53	1.21	0.04	0.5
10	Troopers	55	0.23	18	4.81	0.42	0.04	0.54
11	CIC Ouest	72	0.23	30	3.97	0.99	0.04	0.45
12	Aguaro	70	0.23	38	3.76	0.939	0.04	0.43
13	Sigma	72	0.24	50	3.51	0.85	0.04	0.41
14	France 3	62	0.25	34	4.28	1.09	0.04	0.49
15	MyScript	70	0.25	43	3.91	1.24	0.04	0.45
16	Toovalu	66	0.25	22	3.9	2.64	0.04	0.44
17	HumanCraft	77	0.26	7	4.94	2.02	0.05	0.55
18	Popotecolors	58	0.26	43	4.16	1.34	0.04	0.48
19	Les Tilleuls Coop	71	0.27	55	3.82	1.38	0.04	0.45
20	MAIF	61	0.27	38	4.23	1.95	0.04	0.48
21	Shopopop	67	0.28	48	4.1	2.19	0.04	0.48
22	Stampyt	51	0.29	53	4.35	1.77	0.05	0.51
23	Ecole de Design	63	0.29	59	4.07	1.81	0.05	0.48
24	Soho Coaching	62	0.29	19	4.57	3.66	0.05	0.51
25	Banque Populaire GO	58	0.3	57	4.5	1.55	0.05	0.52
26	Gesco	56	0.3	65	4.03	1.83	0.05	0.48
27	SNCF	63	0.3	60	4.16	1.88	0.05	0.49
28	Wavestone	66	0.3	38	4.1	3.37	0.04	0.47
29	The Tribe	56	0.32	70	4.32	1.94	0.05	0.51
30	JaiOuiDire	46	0.32	35	5.07	2.95	0.05	0.58
31	ScaleWay	57	0.33	58	4.68	2.65	0.05	0.55
32	SEIF	47	0.33	52	5.54	1.15	0.06	0.63
33	Dosites	45	0.33	16	6.19	2.25	0.06	0.69
34	Fabernovel	37	0.34	36	5.28	3.32	0.05	0.6
35	Oxiane	53	0.34	87	4.49	1.43	0.05	0.54
36	Twilio	46	0.35	62	4.4	3.91	0.05	0.52
37	Largo	46	0.35	58	4.52	3.72	0.05	0.53
38	Easyvirt	57	0.35	95	4.34	1.79	0.05	0.53
39	Usbek&Rica	46	0.36	30	6.94	1.44	0.06	0.78
40	Faguo	38	0.36	68	5.04	2.56	0.06	0.59
41	Performanse	40	0.37	45	6.18	2.55	0.06	0.7
42	Nantes Université	61	0.37	60	4.33	4.81	0.05	0.51
43	Akeneo	54	0.38	103	4.16	2.78	0.05	0.51
44	Polypus	39	0.4	52	5.19	5.44	0.06	0.6
45	RepasLucide	67	0.4	50	3.91	7.75	0.05	0.46
46	Audencia	41	0.41	85	4.95	3.94	0.06	0.59
47	WebForce	49	0.41	97	5.24	2.37	0.06	0.63
48	SNCF	42	0.41	74	5.14	4.08	0.06	0.61
49	BeApp	33	0.42	64	5.67	4.3	0.06	0.66
50	La Poste	49	0.42	92	5.35	3.03	0.06	0.64
51	Lumiplan	66	0.42	60	4.67	6.43	0.06	0.55
52	Eni Ecole	46	0.42	75	5.31	4.25	0.06	0.63
53	Voyelle	43	0.44	136	4.77	2.15	0.06	0.6
54	Whoz	55	0.45	116	4.75	4.32	0.06	0.59
55	Mojom	36	0.46	126	4.56	4.23	0.06	0.57
56	RadioFrance	35	0.48	149	5.74	1.19	0.07	0.71
57	D Vine	36	0.49	88	6.22	5.2	0.07	0.73
58	Astraga	31	0.53	87	8.25	3.07	0.09	0.95
59	Flythenest	28	0.54	164	5.44	3.88	0.07	0.69
60	Métropole de Nantes	46	0.55	53	5.73	11.25	0.07	0.67
61	The Fork	N/A	0.61	63	8.79	7.15	0.09	1
62	Stratosfair	34	0.63	96	11.17	1.47	0.11	1.27
63	Unstatic	35	0.63	54	7.04	12.53	0.08	0.81
64	ADN Consulting	29	0.64	100	9.5	5.08	0.1	1.1
65	GuestSuite	30	0.69	134	5.71	12.18	0.08	0.71
66	Pôle Images & Réseaux	30	0.73	72	7.18	15.8	0.09	0.84
67	AFBSHOP	23	0.88	180	7.23	15.3	0.11	0.91
68	Hypercube	23	1.01	112	16.36	8.36	0.16	1.86
69	OnePoint	41	1.16	69	4.85	41.01	0.11	0.62
70	WR2Studio	32	1.48	132	6.61	48.05	0.14	0.86
71	KoralPlay	30	1.99	50	12.31	67.02	0.2	1.46

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

Kimberley DERUDDER

Kimberley DERUDDER a été responsable marketing et communication chez Greenspector pendant plus de 5 ans. Diplômée d’un master Marketing – Communication, Kimberley s’est spécialisée en Inbound Marketing après ses deux premières années chez Greenspector. Aujourd’hui en charge de l’animation de la stratégie marketing, social media et de la génération de leads, elle s’occupe également des comparatifs et des battles d’applications.

CAPTCHA et sobriété numérique

Posted on mai 9, 2022mai 10, 2022 by Laurent DEVERNAY

Reading Time: 3 minutes

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é.

L’accessibilité des CAPTCHA est un problème récurrent et les solutions sont nombreuses. Le principal mot d’ordre ici est de ne pas utiliser de CAPTCHA. Ainsi, le poids de la sécurisation des formulaires ne doit plus reposer sur les utilisateurs. Le sujet a été précédemment discuté, entre autres chez Orange.

Il en ressort plusieurs possibilités :

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 honeypot qui 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.

Ressources pour aller plus loin

How to make CAPTCHA accessible to everyone

Cleaning up bad bots (and the climate)

Laurent DEVERNAY

ldevernay.github.io/

Quelle est l’empreinte environnementale des sites web des 12 candidats à l’élection présidentielle de 2022 ?

Posted on mars 29, 2022juin 20, 2023 by Kimberley DERUDDER

Reading Time: 7 minutes

Introduction

L’objectif de cet article n’est pas de vous donner des consignes de votes mais de vous sensibiliser sur la base d’un thème d’actualité : celui de la sobriété numérique. En tant qu’experts, nous avons évalué l’empreinte environnementale des sites web des 12 candidats à l’élection présidentielle 2022. Nous nous sommes basés sur la page d’accueil de chacun de ces sites. Pour rappel, nous avions déjà réalisé cet exercice en 2017.

Accès rapides

Classement de l’empreinte environnementale
Énergie consommée
Volume de données échangées
Tableau des résultats
Méthodologie

Si les sites web de campagnes sont éphémères, compte tenu du grand nombre d’internautes (et plus particulièrement de mobinautes), il est tout à fait intéressant de mesurer leurs impacts et consommations en énergie-ressources sur nos smartphones. Plus une URL est couramment consultée, plus réduire son impact numérique est essentiel. Les sites web des candidat.e.s à la présidentielle 2022 sont-ils écoconçus ? Répondent-ils tous à un numérique efficient et responsable ? Ont-ils évolué depuis 2017 ? Toutes les réponses dans cet article.

L’expertise de Greenspector

Nous avons déterminé cette empreinte en suivant notre méthodologie habituelle : chargement de la page d’accueil du site sur un smartphone (le scénario complet est décrit ci-dessous dans la partie méthodologie), mesure des consommations d’énergie, de données échangées et d’autres ressources, puis projection d’impact à partir de ces mesures. La projection d’impact est basée sur notre propre modèle, établi par notre équipe R&D. Elle tient compte des composantes nécessaires à la consultation du site (terminal, réseau, datacenter) et de l’ensemble des phases de cycle de vie pour les terminaux et datacenters. Les 3 impacts évalués sont : gaz à effet de serre, empreinte eau, utilisation des sols (plus de détails ci-dessous).

Et maintenant, place aux résultats !

Classement de l’empreinte environnementale des sites web des 12 candidat.e.s à la présidentielle 2022

Les 3 candidat.e.s dont le site web sont parmi les moins impactants sont : Nathalie Arthaud, Anne Hidalgo et Emmanuel Macron.

À l’inverse, les 3 candidat.e.s dont le site web sont parmi les plus impactants sont : Jean Lassalle, Marine Le Pen et Fabien Roussel.

Nous observons 6x plus d’impact par page entre le site le moins impactant et le site le plus impactant de ce classement.

La moyenne d’impact carbone de ces 12 sites web est de 0,57 gEqCO₂ sur une minute soit l’équivalent de 5 mètres effectués en véhicule léger. 6 sites web se trouvent en dessous.

Si l’on projette l’impact carbone du meilleur site web de ce classement (celui de la candidate Nathalie Arthaud) pour 100 000 personnes naviguant 10 minutes sur ce même site, cet impact serait de 240 kg eqCO₂. Soit l’équivalent de 2142 km effectués en véhicule léger.
À l’inverse, pour le site le moins bon de ce classement (celui du candidat Jean Lassalle), l’impact carbone serait de 1460 kg eqCO₂ soit l’équivalent de 13 035 km effectués en véhicule léger. L’écart d’impact entre ces deux sites est de x6.

Le site de la candidate Nathalie Arthaud est le meilleur de ce classement. Avec un ecoscore Greenspector de 68/100.

Une utilisation de ressources énergétiques qui maintient l’autonomie sur un appareil mobile à un bon niveau.

Un chargement rapide de la page et une interaction rapide avec les internautes. Quelques traitements légers dans la page peu gourmands en temps de traitement et en énergie.

Des échanges réseaux plutôt maîtrisés mais perfectibles notamment sur la gestion du cache qui oblige l’utilisateur à recharger systématiquement une grande partie des éléments lors de sa prochaine visite sur la page.

Matomo a été préféré à Google Analytics, ce qui est un bon choix autant pour réduire l’impact environnemental que par respect pour la vie privée des internautes.

Points d’améliorations

Le site est globalement sobre dans son contenu et son intégration même s’il reste de nombreuses possibilités d’amélioration. La page contient notamment de nombreuses erreurs d’accessibilité.

L’intégration de FontAwesome alourdit considérablement la page en générant plusieurs requêtes, qui sont d’ailleurs parmi les rares requêtes de cette page vers des services externes. Cet ajout est d’autant plus discutable que cette police ne semble pas essentielle pour le site et peut représenter un risque vis-à-vis du RGPD. Le simple fait d’y trouver une alternative allégerait considérablement le site.

Sur les pages comportant de la vidéo, des bonnes pratiques sont respectées : pas de préchargement ni de lancement automatique, pas d’intégration via Youtube. On note toutefois que l’intégration des vidéos génère plusieurs requêtes volumineuses et que le bandeau latéral des articles (sidebar.jpg) gagnerait à être optimisé (plus de 900 Ko à lui seul!).

Le chargement différé (lazy-loading) des images réduirait également l’impact du site.

Le site du candidat Jean Lassalle est le moins bon de notre classement avec un écoscore Greenspector de 26/100.

Une consommation forte de ressources (mémoire, CPU et énergie) sur toutes les étapes de chargement, lecture, scroll et mise en arrière-plan. Ceci est dû à des activités de calcul, d’affichage et d’usage de cellule radio pour de longues transmissions de données. Ne mettez pas en boucle ce scénario de test sur votre appareil mobile car il vous privera de votre autonomie après 3 H 41 d’usage !

Les indicateurs CPU et énergie montrent le fort impact des animations, vidéo, cartographie et autres scripts intégrés dans la page.

Une consommation d’énergie très forte de la page en background met en évidence des traitement CPU qui se poursuivent en arrière-plan.

Beaucoup d’échanges réseaux avec 148 requêtes, 29 fichiers CSS et 8 iframes, et une gestion du cache partiellement mis en œuvre sur les contenus. Tout cela pour faire transiter sur le réseau 30 Mo en 1 minute !

Points d’améliorations :

Le code (JS et CSS) devrait être optimisé avec parfois même des fichiers chargés en double. L’intégration directe d’une vidéo Youtube et d’un carte Google Maps engendrent de nombreux chargements de fichiers et augmentent considérablement l’impact de la page. De même pour l’intégration d’un fil Twitter.

L’utilité fonctionnelle de certains composants est à vérifier, notamment l’intégration d’un agenda vide (L’encart « Les prochaines dates à ne pas rater » est vide d’évènements à venir).

La page comporte plusieurs problèmes d’accessibilité, notamment l’intégration d’une vidéo en autoplay ainsi que des soucis de contraste de couleurs rendant certains textes difficilement lisibles.

La page contient de nombreuses requêtes vers des services tiers (Google, Facebook, etc) dont une partie ne sont pas conformes au RGPD.

Zoom sur les indicateurs pris en compte dans l’évaluation de l’empreinte environnementale

Consommation d’énergie des sites web

Les 3 candidat.e.s dont le site web sont parmi les moins énergivores sont : Nathalie Arthaud, Anne Hidalgo et Yannick Jadot.

À l’inverse, les 3 candidat.e.s dont le site web sont parmi les plus énergivores sont : Jean Lassalle, Nicolas Dupont Aignan et Philippe Poutou.

Nous observons un écart de x4 entre le site le plus et moins énergivore de ce classement.

La moyenne de la consommation en énergie de ces 12 sites web est de 5,88 mAh, 8 sites web se trouvent en dessous.

Parmi les candidat.e.s déjà présent(e)s lors de l’Élection de 2017, toutes et tous ont su réduire la consommation d’énergie de leur site web (en moyenne de -20%), sauf pour le candidat Jean Lassalle dont la consommation énergie de son site web a fortement augmenté (x2.4).

Volume de données échangées des sites web

Les 3 candidat.e.s dont le site web sont parmi les moins consommateurs en termes de données échangées sont : Nathalie Arthaud, Jean-Luc Mélenchon et Emmanuel Macron.

À l’inverse, les 3 candidat.e.s dont le site web sont parmi les plus consommateurs en termes de données échangées sont : Jean Lassalle, Marine Le Pen et Fabien Roussel.

Nous observons un écart x18 entre le site qui échange le moins de données et celui qui en échange le plus de ce classement.

La moyenne de données échangées de ces 12 sites web est de 9,25 Mo, 7 sites web se trouvent en dessous. Généralement, il est plutôt recommandé de garder la taille d’une page autour voire en-dessous de 1 Mo.

Pour ceux qui aiment les chiffres…

Position	Candidat	Site web	Ecoscore Greenspector	Impact Carbone (gEqCO2)	Empreinte Eau (en Litres)	Empreinte Sols (en cm²)	Énergie en 2022 (mAh)	Énergie en 2017 (mAh)	Données échangées (Mo)	Requêtes web
1	Nathalie Arthaud	nathalie-arthaud.info	68	0.24	0.04	0.42	3.67	5.42	1.68	41
2	Anne Hildalgo	2022avechidalgo.fr	50	0.32	0.04	0.51	4.31		2.7	61
3	Emmanuel Macron	avecvous.fr	46	0.33	0.05	0.56	4.88	5.72	2.38	52
4	Eric Zemmour	zemmour2022.fr	54	0.33	0.05	0.53	4.61		4.18	34
5	Yannick Jadot	jadot2022.fr	51	0.33	0.05	0.51	4.31		3.22	59
6	Jean-Luc Mélenchon	melenchon2022.fr	45	0.4	0.05	0.54	4.53	5.62	1.95	74
7	Valérie Pecresse	valeriepecresse.fr	24	0.6	0.08	0.72	5.98		10.44	90
8	Nicolas Dupont Aignan	2022nda.fr	33	0.65	0.09	0.83	6.99	8.01	9.22	116
9	Philippe Poutou	poutou2022.org	33	0.69	0.09	0.79	6.43	7.52	9.53	153
10	Fabien Roussel	fabienroussel2022.fr	31	0.74	0.09	0.67	5.26		15.06	146
11	Marine Le Pen	mlafrance.fr	28	0.79	0.08	0.61	4.8	12.29	20.39	111
12	Jean Lassalle	jl2022.fr	26	1.46	0.19	1.73	14.75	5.97	30.28	148

Détail des scénarios :
– Chargement de l’application
– Inactivité site web en premier-plan
– Scroll
– Inactivité site web en arrière-plan

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, le cache est préalablement vidé.

Côté projection de l’empreinte, les paramètres pris en compte 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.

Crédit photo: AFP

Kimberley DERUDDER

La sobriété numérique pour plus de résilience

Posted on mars 28, 2022mars 29, 2022 by Olivier PHILIPPOT

Reading Time: 2 minutes

Une industrie fragile

La crise du Covid-19 à rendu visible une faiblesse du monde du numérique et de l’électronique : une interdépendance des systèmes économiques et techniques. Les confinements de 2020 ont amené à une réduction drastique, voire à un arrêt de la production de circuits électroniques en Chine, impactant les productions dans le monde entier (Exemple de l’iPhone 13 et ses ruptures de stock).

Mais la pandémie du Covid-19 n’est pas l’unique cause qui a eu pour conséquence d’impacter le système d’approvisionnement. Début 2021, une sécheresse a touché Taiwan, autre lieu important de production de circuits électroniques, et cela a contribué à renforcer la pénurie déjà initiée.

Les crises sanitaires et les crises environnementales peuvent être aussi accompagnées de crises géopolitiques et de guerres. La guerre en Ukraine par exemple a levé encore une des faiblesses sur ces approvisionnements complexes : un risque sur la production de néons, nécessaires à la fabrication de puces. Ces néons étant en grande partie produits en Ukraine.

La sobriété comme une des solutions de résilience

On pourrait attendre une solution de résilience de la part de l’industrie électronique, par exemple via des relocalisations, cependant certaines solutions sont difficilement envisageables (relocalisation de l’extraction de certains matériaux). De la même manière, une “souveraineté numérique” ne serait pas la solution à ce problème, ou en tout cas elle permettrait de “seulement” mieux traiter la dépendance à du matériel serveur.

Le but de la sobriété numérique est principalement vu comme celui de la réduction de l’empreinte environnementale. C’est tout à fait vrai mais elle a aussi pour avantage (dans le cadre de la réduction de l’impact environnemental) de prolonger la durée de vie des matériels, de réduire la consommation de ressources (CPU par exemple), d’optimiser la capacité des matériels…

Ces avantages vont dans le sens d’une amélioration de la dépendance entre les services numériques et l’électronique. Rendre le numérique plus sobre permettrait donc de limiter l’impact de ces crises.

Ne nous trompons pas

La sobriété, même si beaucoup discutée dans le monde numérique, n’est encore que trop peu déployée. On continue encore à discuter sur son coût d’implémentation, de son impact plus fort côté matériel versus celui de son usage (sic). Des débats sans fin se poursuivent sur l’impact du réseau (focalisé sur l’énergie et pas le CO₂, ne prenant pas en compte la problématique globale…), ainsi que des contre arguments sur le fait d’optimiser l’impact CO₂ de nos solutions qui ne serait pas nécessaire puisque nous disposons en France, d’une énergie bas carbone.

Écarter la démarche de sobriété numérique sous prétexte de ses inconvénients, c’est ne pas prendre pleinement en compte la place du numérique dans notre monde et c’est surtout continuer à développer des outils qui ne fonctionneront potentiellement pas vu leur manque de résilience.

Permettre le fonctionnement des services numériques sur du matériel “bas de gamme” et sur des réseaux limités est par exemple une démarche qui va dans le sens de la sobriété numérique. Mais ce n’est qu’un début à une vraie démarche de sobriété. Le chemin est long, et malheureusement les crises sont déjà là.

Ne nous trompons pas, la sobriété est une démarche indispensable dans notre jeune monde numérique.

Olivier PHILIPPOT