Qu’est-ce que l’écoconception web ?
L'éco-conception web est une démarche visant à réduire les impacts environnementaux des services numériques en améliorant leur conception. Moins c’est souvent mieux !

Une démarche écologique

Lécoconception web est une pratique qui consiste à concevoir des produits numériques qui sont à la fois écologiquement et techniquement efficaces. La notion de temps est également à prendre en compte car il sagit aussi d’assurer la pérennité des produits numériques.

Les développeurs et les designers prennent dès lors en compte la durabilité environnementale dans leurs processus de conception. En intégrant des pratiques durables, la conception éco-responsable aide àduire de manière importante la consommation d’énergies et donc àduire les émissions de gaz à effet de serre induits par la fabrication et l’utilisation des produits numériques.

Internet : le plus gros pollueur ?

4%

Poids du numérique dans les émissions de gaz à effet de serre,
soit 1,5 fois plus que le trafic aérien !

60%

Poids du streaming vidéo dans les flux de données sur internet.

10%

Part du numérique dans la consommation électrique mondiale.

Comment être plus sobres numériquement ?

On joue au jeu des 7 différences ?
Selon vous, quelle est l’interface la moins gourmande en énergie ?

Google 2022 Yahoo 2022

Ok, on a forcé le trait de la comparaison et vous avez sûrement trouvé plus de 7 différences !

Cette comparaison a toutefois le mérite de vous montrer de manière évidente ce qu’il ne faut pas faire : évitez les requêtes intempestives, non désirées par l’utilisateur. Elles provoquent  une surcharge visuelle et consomment bien plus d’émissions de CO2 k eq.

Dans notre exemple, la page d’accueil de Yahoo présente de nombreuses pubs, non sollicitées par l’utilisateur, des actualités multiples, des photos…  Toute la mise en page génère un nombre considérable de requêtes non nécessaires aux buts de l’utilisateur. Et oui, plus il y a de code dans la DOM, plus son poids s’élève !

La page de Google affiche simplement une barre de recherche et un accès à ses pages internes… Google est ainsi 2 fois moins gourmand que Yahoo, à chaque visite d’un utilisateur.

Petit quizz : connaissez vous le nombre de visites par an de ces deux pages ? ⬇

  • Yahoo : plus de 3 000 milliards.
  • Google : plus de… 85 000 milliards !

Google à remporté la bataille face à Yahoo, la sobriété l’emporte toujours ! Frédéric Bordage – Expert du numérique responsable

Le site EcoIndex permet de calculer le poids en eau et en émissions de gaz à effet de serre (GES) d’une de vos pages. Il vous suffit d’indiquer l’adresse de la page. Cependant, ce premier niveau d’informations est limité. Dotée d’experts certifiés en éco-conception, l’agence Studio Vitamine réalise des audits complets

Passons aux choses sérieuses…

Vous vous demandez quelles sont les bons réflexes à adopter pour réduire votre empreinte carbone ? Ceux-ci concernent autant les concepteurs que les développeurs.

— CÔTÉ DESIGN

Le designer UI et designer UX  ont des rôles clés pour la conception dexpériences web satisfaisantes et durables. Ils sont chargés determiner lutilisabilité et lintuitivité dune interface, et leur objectif est de rendre lexpérience utilisateur aussi fluide et simple que possible.

En plus de cela, ils doivent sassurer que lutilisateur finisse par accepter et adopter des pratiques plus durables, des interfaces moins chargées visuellement et donc plus respectueuses de lenvironnement.

C’est par ces choix de conception , validés avec les utilisateurs, que les développements suivront les bonnes pratiques et éviteront d’utiliser ce qu’on appelle le gras numérique.

1. Supprimer les fonctionnalités inutiles sur votre site web

Enduisant le nombre de fonctionnalités disponibles sur votre site web, vous pouvezduire les ressources nécessaires à son fonctionnement et à sa maintenance. Laduction de ces fonctionnalités peut aussi permettre aux entreprises deduire leurs coûts et daccroître leurs profits, car un site plus simple et plus léger est généralement plus facile à gérer. Toutefois, laduction des fonctionnalités peut aussi entraîner une diminution de la satisfaction des utilisateurs. Il s’agit donc de bien positionner le curseur entre le nécessaire et le superflu. Il est important de comprendre les conséquences éventuelles de laduction des fonctionnalités avant de procéder à une écoconception web.

2. Revoir le nombre d’images présentes sur vos pages

Un axe pertinent de lécoconception web se trouve dans lutilisation des images. Elles peuvent être une ressource puissante pour les sites web, car elles permettent aux utilisateurs de mieux comprendre le contenu et peuvent aider à rendre le site plus attrayant et plus facile à naviguer.

Cependant, leur utilisation à outrance entraîne mécaniquement une augmentation du temps de chargement du site, ce qui peut provoque bien souvent une baisse de la satisfaction des utilisateurs. Il est donc important de limiter le nombre et la taille des images utilisées et de choisir soigneusement les images les plus adaptées et les plus pertinentes pour votre site web.

3. Lire les… 113 autres bonnes pratiques restantes

Ensumé, le livre 115 bonnes pratiques sur l’éco-conception de Frédérique Bordage propose une analyse complète de limportance de lécoconception web et des conséquences que cela peut avoir pour votre entreprise. En plus de fournir des informations sur laduction des fonctionnalités, lutilisation dimages et lutilisation doutils daccessibilité, le livre fournit également des conseils pratiques et des exemples concrets pour mettre en œuvre une bonne écoconception sur votre site web.

# Côté tech

Si le design à été pensé sous l’angle de l’éco-conception, alors la technique permettra elle aussi de faire de tendre vers plus de sobriété numérique.

1. Utiliser des images optimisées

Utiliser des images non optimisées peut entraîner des temps de chargement plus longs et une consommation dénergie et de ressources plus importantes. Optimiser les images enduisant leur taille et en les compressant peut permettre une meilleure performance et une plus grande économie de données.

2. Utiliser un CDN

Un content delivery network (CDN) est unseau de serveurs distribués à travers le monde qui permet de fournir des fichiers et des contenus plus rapidement et plus efficacement enduisant la distance entre le serveur et le client. Utiliser un CDN peut aider à améliorer le temps de chargement des pages et àduire la consommation de données.

3. Lazy loading…

Les bonnes pratiques sont nombreuses concernant la technique. Une dernière pour conclure : pourquoi faire remonter des données que les utilisateurs ne consomment pas toujours. Le lazy loading permet d’afficher les éléments au moment où ils sont sollicités par l’utilisateur. Si l’utilisateur ne va pas chercher cet élément, il ne s’affiche pas, évitant ainsi une requête inutile du serveur.

Statistiques du secteur numérique : Statita

Visites des pages Google et Yahoo : Similarweb

DOM = Modèle d’Objet de Document – représentation d’une page web qui permet d’accéder aux éléments de cette page. On utilise généralement l’image de l’arbre pour la représenter. En fonction du nombre de fonctionnalités, cet arbre sera plus ou moins dense.

CO2 k eq = unité de mesure multi-gaz exprimée en kilos des émissions de gaz à effets de serre.

Prêts pour l’aventure ?

Vous souhaitez échanger avec notre équipe sur l’éco-conception de votre site web ? N’hésitez pas à nous solliciter. Nous serons ravis de parler de votre projet.

Julie Mahe
Ancienne graphiste, Julie est passionnée par le design graphique mais aussi par le développement web. Elle s'intéresse plus particulièrement à l'écologie dans sa globalité et veille à adopter les bonnes manières en terme d'éco-conception.