Éco­conception et bonnes pratiques

L’éco­conception des services numériques est l’une des clés permettant de réduire l’empreinte environnementale du numérique. Un service écoconçu nécessite moins de ressources et favorise l’allongement de la durée de vie des appareils.

L’éco­conception, c’est quoi ?

Ecoconcevoir un site web, par exemple, ça signifie prendre en compte ses impacts environnementaux à chaque étape de son cycle de vie : des spécifications, à la conception fonctionnelle et graphique, jusqu’à l’utilisation finale, en passant par le développement et la maintenance. C’est donc une manière de penser (et de travailler !) à part entière.

L’éco­conception a vocation à remettre en question tous les corps de métier du numérique, pour le meilleur, car en plus de son impact positif sur l’environnement, elle permet d’améliorer l’efficience d’un service numérique. Pour vous orienter dans cette vertueuse voie, de nombreux outils et bonnes pratiques existent.

La démarche d’éco­conception d’un service numérique repose sur 5 bases fondamentales :

  • La dĂ©finition de l’unitĂ© fonctionnelle du service, c’est-Ă -dire de sa fonction principale pour l’utilisateur sous forme d’acte mĂ©tier (par exemple, “acheter un billet de train” ou “consulter son compte en banque une fois par semaine”)
  • L’évaluation de l’impact environnemental de tous les Ă©quipements nĂ©cessaires Ă  la mise en Ĺ“uvre du service…
  • … sur toutes les Ă©tapes de son cycle de vie (fabrication, utilisation, fin de vie) …
  • … selon plusieurs indicateurs environnementaux (Ă©puisement des ressources, consommation d’eau, Ă©missions de polluants, etc.) !
  • dans une dĂ©marche d’amĂ©lioration continue, en priorisant les principaux leviers d’amĂ©lioration d’abord.

Source : Pour en savoir plus : Ecoconception web, les 115 bonnes pratiques et Sobriété numérique : les clés pour agir

Les 115 bonnes pratiques tu suivras

Destiné aux concepteurs et aux développeurs de sites web, le livre Ecoconception web, les 115 bonnes pratiques explique de manière très concrète comment écoconcevoir son site ou son service en ligne. Les bonnes pratiques qui y sont expliquées vont de la conception à l’exploitation en passant par la réalisation (vous pourrez d’ailleurs les retrouver un peu partout sur ce site). A la clé : une empreinte ressources divisée au minimum par deux !

Quelques bonnes pratiques

Voici, pour commencer, quelques bonnes pratiques Ă  mettre en application !

RĂ©duire le poids de la page

  • Optimisez les images en choisissant le bon format et rĂ©duisant la taille. Pour les logos et illustrations, utilisez le format SVG. Pour les photos prĂ©fĂ©rez le format WebP ou optimisez les jpeg. Pour les icĂ´nes, prĂ©fĂ©rez les glyphes ou styles CSS.
  • Évitez les vidĂ©os ou rĂ©duisez au maximum leur durĂ©e. PrĂ©voyez plusieurs formats adaptĂ©s aux contextes de visualisation, ou utilisez des services proposant des formats optimisĂ©s. Pensez aussi Ă  dĂ©sactiver l’autoplay.
  • Compresser les fichiers HTML, CSS, JS, etc.
  • Facilitez la mise en cache navigateur lors du dĂ©veloppement, pour Ă©viter le rechargement des Ă©lĂ©ments Ă  chaque visite.

Réduire la complexité de la page

  • Limitez le contenu et les fonctionnalitĂ©s Ă  l’essentiel. 45% des fonctionnalitĂ©s ne sont jamais utilisĂ©es, interrogez le rĂ©el besoin.
  • Optez pour l’approche “mobile first” avant de passer Ă  la version “desktop”. Cela permet de limiter la couverture fonctionnelle Ă  l’essentiel, d’éviter de consommer inutilement de la bande passante, et de s’assurer du bon fonctionnement sur mobile.
  • Évitez les mĂ©canismes comme l’infinite scroll. PrĂ©fĂ©rez une action de l’utilisateur pour afficher plus d’informations.
  • Évitez les animations JavaScripts coĂ»teuses, comme les carrousels. PrĂ©fĂ©rez une mise Ă  jour rĂ©gulière du contenu.

Limiter le nombre de requĂŞtes

  • Utilisez des polices standards (Arial, Tahoma, Times New Roman, Verdana, etc.), qui n’ont pas besoin d’être tĂ©lĂ©chargĂ©es, plutĂ´t que des polices spĂ©cifiques.
  • Limitez l’utilisation de widgets et plugins. Par exemple, remplacez les boutons de rĂ©seaux sociaux ou widget Google maps par une image et un lien.
  • Regroupez les images dans un sprite et combinez certaines feuilles de styles CSS et librairies Javascript.
  • Favorisez les pages statiques, quand cela est possible, plutĂ´t que d’utiliser un CMS. Vous pouvez utiliser des gĂ©nĂ©rateurs de sites statiques ou une architecture JAMstack.

Plus d’infos sur les bonnes pratiques du Référentiel d’écoconception web (RWEB) : Livre - Site – GitHub

La boîte à outils

Les plugins navigateurs

GreenIT Analysis | EcoIndex dans la poche

EcoIndex et certaines bonnes pratiques sont unis dans une même extension ! Sur Chrome et Firefox, vous pouvez tester l’empreinte environnementale de n’importe quelle page web et constituer un historique pour reproduire le parcours de vos utilisateur·ices. Si pratique !

Extension Chrome
Extension Firefox

Contribuez au code source en allant sur le GitHub du plugin Greenit Analysis

Le plugin Ecoindex

Le plugin Ecoindex permet d’afficher le score écoindex existant dans la base de données du site ecoindex.fr d’une page web dans le navigateur. Il est disponible pour Firefox, Chrome, Edge et Opera. Il vous permettra de voir les dernières notes pour une même page, mais également les notes sur les autres pages de votre site. Enfin, il simplifie l’analyse d’une page:

Extension Chrome
Extension Firefox
Extension Edge

Contribuez au code source en allant sur le GitHub du plugin Ecoindex

Pourquoi des résultats différents entre ces 2 plugins ?

Les 2 plugins ont des modes de fonctionnement différents pour effectuer des analyses et les résultats peuvent donc différer d’un outil à l’autre:

  • Le plugin Greenit Analysis fonctionne dans votre navigateur en tenant compte du contexte actuel de l’utilisateur (Adresse IP, navigateur Plugins installĂ©s, cache, cookies de session…). Plus de prĂ©cisions sur la documentation du plugin
  • Le plugin Ecoindex utilise l’API ecoindex.fr qui va ouvrir un navigateur chrome vierge Ă  chaque analyse avec un scenario prĂ©dĂ©fini. Plus de prĂ©cisions sur le fonctionnement de l’API

Le badge Ecoindex

Le badge Ecoindex permet d’afficher le score écoindex simplement sur votre page. Pour celà, il suffit d’ajouter un code html dans votre page.

La page du projet badge Ecoindex

Ecoindex en ligne de commande

Le projet Ecoindex CLI permet de lancer une analyse d’une page web en ligne de commande. Développé en python, il est disponible pour Linux, Mac et Windows. Il vous permettra lancer une analyse d’une page ou d’un ensemble de pages, générer un fichier de résultat au format csv ou json, générer un rapport HTML…

La page du projet Ecoindex CLI

GitHub | A vous de jouer

EcoIndex est un projet communautaire et open source qui ne demande qu’à être enrichi via la contribution d’experts et passionné·es. Vous pouvez consulter à tout moment le GitHub du projet afin de mieux le comprendre et, pourquoi pas, d’y participer !

GitHub Cnumr
GitHub frontend site EcoIndex
GitHub backend site EcoIndex
GitHub plugin GreenIT Analysis
GitHub plugin Ecoindex
GitHub badge Ecoindex
GitHub CLI Ecoindex

Au-delà de l’éco­conception

L’éco­conception des services numériques ne peut pas à elle seule réduire significativement l’empreinte du numérique mondial. D’autres mesures simples, à contre-courant de l’optique de croissance effrénée de notre société, doivent être mises en oeuvre pour changer le cours des choses.

  • RĂ©duire le nombre d’objets connectĂ©s en favorisant leur mutualisation et leur substitution, par exemple en faisant fonctionner les modems d’un immeuble via un dispositif centralisĂ©. On peut aussi ouvrir leurs APIs pour allonger leur durĂ©e de vie – les APIs sont des interfaces de programmation qui servent notamment Ă  Ă©changer des donnĂ©es entre l’objet connectĂ© et les serveurs du fabricant ou de ses partenaires.
  • RĂ©duire le nombre d’écrans plats en les remplaçant par d’autres dispositifs d’affichage : lunettes de rĂ©alitĂ© virtuelle, vidĂ©o projecteurs LED et surtout de bons livres et des soirĂ©es entre amis ou en famille loin des Ă©crans ;-).
  • Augmenter la durĂ©e de vie des Ă©quipements en allongeant la durĂ©e de garantie lĂ©gale, en favorisant le rĂ©emploi, et en luttant contre certains modèles Ă©conomiques (opĂ©rateurs tĂ©lĂ©phoniques notamment).

Source : Pour en savoir plus : Empreinte environnementale du numérique mondial