É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 : Les 115 bonnes pratiques (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. 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
Extension Opera

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