Auteur/autrice : 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.

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.

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.

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)

Classement 2022 de l’impact carbone des sites web des 187 grandes écoles et universités

Posted on mars 17, 2022mars 31, 2022 by Laurent DEVERNAY

Reading Time: 11 minutes

Introduction

Alors que de nombreux élèves cherchent dans quelle structure poursuivre leur cursus, les considérations écologiques sont de plus en plus présentes. En témoigne la mobilisation des étudiants pour un réveil écologique. Dans le contexte actuel, les institutions sont de plus en plus nombreuses à franchir le pas afin d’avancer sur ces sujets, notamment par le fait de proposer de nouveaux enseignements, de repenser les cours existants ou de mettre en place des bonnes pratiques au quotidien.

Sachant que le site web est souvent la première source d’information pour de nombreuses écoles et universités, nous avons décidé de mesurer l’impact carbone de ces sites.

Sommaire

Résultats – Universités – France
Résultats – Écoles de Commerce – France
Résultats – Écoles d’Ingénieurs – France
Résultats – Universités du Monde
Classements
Bilan
Méthodologie

Quelles sont les écoles / universités présentes dans nos classements ?

Pour déterminer quels établissements et structures étudier, nous avons constitué un échantillon qui se veut représentatif de la façon suivante :

Le classement par l’Etudiant des 50 premières universités de France en termes de réussite en master (avril 2021).
Le classement par l’Etudiant des 50 premières écoles d’ingénieurs, classées sur des critères d’excellence académique, d’ouverture internationale, de proximité avec les entreprises et d’ouverture à de nouveaux publics (janvier 2022).
Le classement par l’Etudiant des 37 meilleures grandes écoles de commerce, sur des critères d’excellence académique, de proximité avec les entreprises, d’excellence internationale, de salaires, de temps passé à l’étranger, de satisfaction des diplômés et de travail à l’étranger (novembre 2021).
Le classement 2022 par Times Higher Education des 50 meilleurs universités à l’échelle mondiale, sur la base de 13 critères.

Votre établissement n’apparaît pas dans nos classements ? Vous souhaitez connaître les détails de votre position ? Vous souhaitez améliorer votre place dans ce classement ? Contactez-nous.

Nous verrons ici ce qui ressort des mesures effectuées sur les sites des établissements de chacune de ces catégories. Nous nous sommes limités aux pages d’accueil afin d’avoir un dénominateur commun et parce qu’il s’agit le plus souvent du point d’entrée pour les visiteurs.

Toutefois, l’analyse pour chaque site mériterait d’aller plus loin, notamment au vu des statistiques d’usage de chacun de ces sites, afin de se concentrer sur les pages les plus fréquentées mais aussi pour se faire une idée plus précise des parcours les plus fréquents. A noter qu’une bonne partie des sites étudiés proposent également l’accès à un ENT (Environnement Numérique de Travail). Ce type d’outil très répandu constitue un sujet à part entière lors de l’estimation des impacts environnementaux des services numériques utilisés par les élèves. D’autant plus dans un contexte sanitaire où une partie des enseignements se font à distance. Sur ce type de sujet, l’accessibilité devient d’autant plus un sujet essentiel afin de permettre à chacun d’accéder, même depuis chez lui, aux mêmes informations et aux mêmes fonctionnalités que ses camarades.

Résultats des Universités de France

Synthèse – chiffres clés

La moyenne d’impact carbone par page et par minute de ce classement est de 0,44 gEqCO₂.
18 sites sur les 50 se situent en-dessous de cette moyenne.

L’Eco-score Greenspector moyen est de 47,38 et 26 sites se situent au-dessus.

Le Top 3

En termes d’impact carbone, le top 3 de ce classement est constitué des universités suivantes :

1. Université Savoie Mont Blanc : un site WordPress qui tire son épingle du jeu par l’optimisation des images ainsi que la mise en place du lazy-loading et du cache côté client. Ces bonnes pratiques (ajoutées à d’autres) font déjà une belle différence, même s’il reste quelques axes d’amélioration.

2. Université de Paris-Saclay : un site plutôt sobre mais surtout optimisé techniquement (lazy-loading des images, mise en cache, optimisation des médias, etc).

3. Université Le Havre Normandie : un site léger et élégant qui pourrait encore bénéficier de quelques optimisations techniques voire d’un peu plus de sobriété.

NB:

Initialement le site web de l’Université de Paris (ex Paris Diderot) : une page étonnamment dépouillée qui renvoie au final… vers le site de u-patis.fr qu’on retrouve dans le Flop 3 ! Ce site est donc hors-concours.

Le Flop 3

En termes d’impact carbone, le flop 3 de ce classement est constitué des universités suivantes : Université Versailles Saint Quentin, Université Côte d’Azur, Université de Paris (ex Paris 5). Ces 3 pages sont très (trop) riches en contenus et pourraient être facilement allégées (dans un premier temps) puis optimisées.