Écoconception, comment concevoir le web de demain ?

Notre monde change, alors notre manière de concevoir aussi. Le web a grandi avec les améliorations techniques, qui ont régi ses évolutions et nos pratiques. Aujourd’hui, cette limite n'est plus technique, mais écologique. Le numérique est responsable de 4% des émissions de gaz à effet de serre. Cette donnée omet de préciser la création de déchets, l'utilisation de ressources, matérielles et énergétiques.
Concevoir le Web de demain, c'est travailler à réduire ses externalités négatives sur la planète. C'est aussi une opportunité de repenser notre approche de la conception.

Le web d'hier à Aujourd'hui

Le web, c'est génial, on peut avoir accès à presque toutes les informations en quelques clics. Depuis 1990 et le laboratoire du CERN, le web a beaucoup évolué. Les sites web sont de plus en plus sophistiqués : contenu multimédia, images, vidéos, éléments interactifs, gestion de données, personnalisations, mesures d’audiences et traçages publicitaires.
Dans les années 90, le fonctionnement du web se résumait à l'envoi par le serveur d'une page web à l'utilisateur. De nos jours, ce système s'est alourdi : le serveur confectionne une page en fonction de nos usages et de nos données, nous renvoie une page avec de nombreux contenus et fonctionnalités qui dialoguent en permanence avec d'autres serveurs.

Pourquoi adopter cette démarche

• Un web plus rapide
• Des parcours d’utilisations optimisés
• Plus de facilité à maintenir et faire évoluer le site web
• Limite les coûts et le temps de production

L'écoconception

Pour aborder l'écoconception d'un produit, on utilise l'Analyse du Cycle de Vie du produit. Ce cycle se compose de 6 étapes : l'extraction des ressources, la fabrication, le transport, la distribution, l'usage et la fin de vie. Cette dernière étape peut être cyclique comme avec le réemploie, le reconditionnement, le recyclage ou non cyclique comme de décyclage, l’incinération ou la création de déchets sauvages.

L'écoconception, c'est penser à réduire les impacts, énergétiques, en ressources, en émissions CO2, sur le vivant et l’environnement à chaque étape de la vie du produit.

Quel sont les impacts du numérique en France ?

On distingue 2 parties différentes, la fabrication et l'utilisation. Cette dernière comprend principalement l’énergie nécessaire au fonctionnement de l'appareil de l'utilisateur puis le réseau (4g, 5g, wifi) et le fonctionnement des serveurs.

Répartition en fonction de l’étape du cycle de vie des impacts du numérique en France en 2020.
Source Étude « iNum »

Pour réduire l'impact du numérique sur la partie fabrication, il faut agir sur la réduction du nombre d’appareils et favoriser leurs longévités. Cela peut se traduire par penser la conception d'un site ou d'une app pour des appareils qui ont déjà 5 ans. Ou s'assurer d'une expérience de qualité similaire sur bureau et sur mobile pour ne pas obliger les utilisateurs à augmenter leurs parcs d’appareils en achetant un PC ou une tablette en complément de leur téléphone.

Pour la partie usage, qui est fortement lié à la consommation d’énergie, il faut produire des pages et des services qui vont nécessiter moins de puissance pour les appareils des utilisateurs. Limiter les animations, les vidéos, traceurs, les images volumineuses, les pages complexes.

Comment écoconcevoir un site ou un service web

L'économie de la fonctionnalité

C'est par l'économie des fonctionnalités qu'il faut entamer un site web écoconçu. Est-ce que mon site ou service en ligne est utile, quelles seront ces fonctionnalités essentielles et les données principales qu'il va recueillir ? Lesquelles seront superflues ?

Si mon projet est d'ouvrir une bibliothèque de livre audio en ligne, mes fonctionnalités essentielles pourront être :

• Consulter les fiches des ouvrages
• Effectuer des recherches
• Lire ou télécharger un audio

Les fonctionnalités superflues peuvent être :

• Un widget de partage sur les réseaux sociaux
• L'espace compte utilisateur
• Le système de notation/commentaire

L'économie de fonctionnalité et de contenu s’inscrit dans un parcours d'utilisation optimisé qui se concentre sur la question du besoin essentiel de l'utilisateur. Ce principe est également une recommandation de l'incontournable designer Dieter Rams.

Moins c'est mieux

Dieter Rams

Bonnes pratiques

• Ne pas mettre de pages infinies, comme le fil d'actu Instagram, LinkedIn. En règle générale, il faut proscrire tous éléments relatifs à l'économie de l'attention
• Ne pas mettre de vidéo en lecture automatique ou qui s’enchaîne les une après les autres.
• Ajouter l’attribut loading="lazy" aux images et aux éléments intégrés, cela permet de ne pas télécharger les éléments d'une page qui ne sont pas affichés à l'écran.

Stratégie de Design

En adoptant l'approche mobile first (penser la conception mobile en premier), les maquettes produites sont moins complexes et vont à l'essentiel. C'est aussi une méthode pour s'assurer d'une meilleure adaptation des sites aux diverses tailles d'écran des utilisateurs.

Pour simplifier une page, on peut aussi utiliser la méthode CORSE : Cacher, Organiser, Réduire, Standardiser, Éliminer.

Optimisations des images

Comment réduire le poids d'une page sans parler des images ? Les images représentent souvent une grande partie du poids des pages. Pour les optimiser, on peut déjà se poser la question de leurs utilités puis celle de leurs formats. Les 3 formats d'images de l'écoconception sont le le WebP, l'Avif et le Svg.

• Le SVG s'utilise pour les illustrations et des icônes simples faites de vecteurs (pas de pixel, mais seulement des courbes). Très léger, c'est le seul format vectoriel pour le web. Pour optimiser davantage ce petit fichier, Svg OMG retire certaine partie pas utile au rendu de l'image.
• Le WebP pour toutes les autres images comme les photos, les illustrations avec beaucoup de vecteurs. Ce format remplace les formats jpg et png, il est plus léger d'en moyenne 30% pour une même qualité. Le site Squoosh permet de convertir et de réduire les images en Webp.
• L'Avif sera le successeur du Webp. En moyenne, il est 50% plus léger qu'un jpg pour la même qualité. Si ce format n'a pas éclipsé le WebP c'est dû à sa sortie relativement récente. En janvier 2024, Edge, le navigateur de Microsoft est un des derniers navigateurs majeur à l'adopter.

Une page doit être en dessous de 1 Mo avec l'ensemble des images qui la constituent. Une grande image ne devrait pas dépasser les 320 Ko.

Les requêtes

Mais ques-ce qu'une requête web ?
C'est une demande d'information, c'est récupérer une image, une typographie et transmettre des données de contenu ou d'utilisation. Elles ne sont pas visibles, pour les analyser, il faut ouvrir l'inspecteur de code de votre navigateur et ouvrir l'onglet "Réseaux". Elles sont parfois très nombreuses et ralentissent le chargement des pages. Elles doivent être en dessous de 40 par page.

Vérifier l'écoconception d'un site

Il existe bon nombre d’outils pour auditer l'écoconception d'une page web. Un des plus visuels est Eco-index, il attribue un score sous forme de lettre et positionne la page web sur des matrices pour évaluer sont poids, la quantité de requête, la complexité de pages en fonction de la moyenne et d'un objectif cible.
L'outil Kastor Green, quant à lui, donne des pistes d'améliorations pour les pages analysées.

S'inspirer

Un des freins à l'adoption de l'écoconception et l’hypothèse qu'un site web ecoconçu n'est pas esthétique. Le site Lowwwcarbon répertorie ces sites éconconçu, pour beaucoup, ils sont singuliers et visuellement très agréables. C'est aussi une référence pour s'orienter et penser à écoconçevoir le futur du web.

Pour aller plus loin sur le sujet, il existe un référentiel édité par l'état, le RGESN et la liste des 115 bonnes pratiques rédigé par l’association Green IT.