Un site éco-conçu pour Supermab

Supermab est un étonnant jardin solidaire en co-construction qui favorise la biodiversité et la coopération dans les musiques actuelles. En toute cohérence, son site internet se devait d’être développé dans une démarche de sobriété numérique.

Rédigé par Les Raisonné·e·s et Pikselkraft

Car oui, le secteur du numérique a des impacts sur l’environnement !

  • 53 millions de tonnes de déchets d’équipements électriques et électroniques ont été générées dans le monde en 2019 (2020, Global E-Waste Monitor - ONU, ITU).
  • 849 097 tonnes de déchets d'équipements électriques et électroniques ont été collectées en France pour un taux de recyclage de 77 % en 2020 (ADEME, 2021)
  • Un taux de croissance annuel des émissions de gaz à effet de serre est estimé à 6%. Un des plus forts taux de croissance, tous secteurs confondus, qui va continuer d’augmenter et pourrait être amené à doubler d’ici 2025 (Mars 2021, The Shift Project).
  • Un taux de collecte pour recyclage très faible — seulement 20% — impliquant des pollutions, des trafics, etc.

Et si le secteur du numérique a autant d’impacts, c’est qu’il repose sur un nombre faramineux d’équipements (ordinateurs, téléphones, etc.) et d’infrastructures (serveurs, etc.) !

Et même si on ne s’en rend pas compte, ces outils consomment énormément de ressources matérielles et énergétiques. Il faut par exemple plus de 800kg d’énergies fossiles et de minéraux pour fabriquer un ordinateur de 2kg !

Alors, parce que la majeure partie de l’impact provient du matériel, nous ne sauverons pas la planète avec des sites éco-conçus. En revanche, ce que nous pouvons faire, faisons-le. Car toutes les démarches démontrant d’une possibilité de faire autrement encourageront la considération des enjeux environnementaux et sociétaux et inspireront d’autres acteurs dans leurs projets.

Pour en savoir plus > GreenIT, Fresque du numérique, Shift Project, ADEME

Mais alors, pourquoi éco-concevoir un site internet ?

Éco-concevoir un site internet, c’est notamment réfléchir à sa consommation d’énergie à l’usage et garantir la pérennité des infrastructures et des équipements numériques qui le font fonctionner.

Il s’agit donc de choisir les bonnes méthodes et les bons outils de conception pour limiter :

  • Le chargement et le transfert de données : images, contenus, requêtes entre le site et des outils externes, durée d’utilisation du site par un utilisateur, etc.
  • L’obsolescence du site : compatibilité des technologies utilisées avec tous les équipements, durabilité des informations qu’il contient, etc.

Mais pas seulement, face au défi écologique se dresse aussi le défi de l’attention et de l’accessibilité : éco-concevoir un site, c’est aussi respecter les individus qui l’utilisent et s’assurer qu’il soit utilisable par le plus grand nombre.

La démarche appliquée au site

Le site de Supermab s’inscrit dans cette démarche de développement web responsable.

L’éco-conception est apparue comme un défi dont l’enjeu a été d’intégrer les contraintes de sobriété numérique à chacune des étapes de création du site.

La structure du site est organisée autour d’un objectif de communication fonctionnel :

  • Une page par besoin (car l’impact d’un site se calcule par page !).
  • Un traitement de l’information succinct.
  • Une utilisation limitée des images surtout en haut des pages.

Le graphisme contribue à l’accessibilité et à la réduction du poids des pages :

  • Pour avoir une identité forte sans avoir d’images matricielles, utilisation d’illustrations vectorielles et d’une typographie de marque seulement.
  • Les illustrations sont majoritairement intégrées dans le code plutôt que chargées comme des images ce qui limite le nombre de requêtes et le poids des pages.
  • Des noms de liens et des boutons explicites.
  • Des couleurs aux contrastes suffisants pour garantir la simplicité de lecture.

Cet effort de conception a permis d’optimiser le développement technique du site :

  • Deux typographies installées en local.
  • Aucune requête externe au site, aucun lien avec les GAFAM.
  • Aucun tracking imposé à l’utilisateur. L’équipe de Supermab manquant de temps pour analyser le trafic, nous avons retiré la possibilité de suivre le trafic.
  • Optimisation du code html, et CSS.
  • Un webdesign responsive, c’est-à-dire adapté au format mobile.

Cette démarche de conception permet d’obtenir un site globalement peu consommateur d’énergie et qui offre à tout le monde la possibilité d’y accéder, quel que soit le contexte d’usage, la qualité du réseau et l’outil de navigation utilisé !

Ce qui pourrait encore être optimisé :

  • Nous utilisons un hébergeur connu pour sa démarche éco-responsable, mais il n’est pas Français. Un hébergement français proche de la région Bretagne serait plus adapté.
  • Passer le site en statique
  • Cette option est à l’étude grâce à un plugin développé par l’équipe de Kirby CMS.
  • Utiliser une seule typographie sur l’ensemble du site
  • Nous pourrions renoncer à helvetica et utiliser une typographie déjà présente sur le système des utilisateurs. Nous nous sommes permis d’avoir deux typographies en raison du très faible nombre d’images utilisées.
  • Les illustrations permettent certes de limiter le poids et les requêtes, mais une intégration trop importante des illustrations dans le code (format SVG) entraine une complexification du DOM (Document Object Model qui correspond grossière aux informations d’une page). Des illustrations comportant des traits ou des motifs complexes représentent souvent une quantité importante de ligne de code. L’identité graphique doit privilégier des combinaisons de formes simples.
  • Nous pouvons aussi prévoir d’utiliser une image au lieu du format SVG si l’illustration est trop complexe pour avoir un compromis dans le fonctionnement. C’est une mise à jour à prévoir sur le long-terme.
  • Ce site nous a servi à tester jusqu’où nous pouvons aller avec les animations. Nous en retirons une conclusion assez simple. Les animations doivent suivre le même principe que les illustrations. Utiliser des formes simples et des animations déjà possible avec HTML/CSS pour limiter l’impact négatif sur le chargement des pages et sur la concentration des utilisateurs. Par exemple, il est tout à fait envisageable d’avoir des animations qui jouent sur le scroll vertical ou horizontal de contenu, des listes déroulantes ou des rotations car ses éléments sont présents nativement sur le web. Nous pouvons ajouter une sur-couche visuelle ou de fonctionnalités sans trop modifier l’usage et l’accessibilité. Ce n’est pas le cas d’animations qui n’ont pas d’équivalents sur le web, par exemple la roue de contenu qui demande un effort vraiment plus important pour rester accessible et ne pas surcharger la page de requêtes. Généralement, les animations apportent toujours une complexité qu’il faut prendre en compte pour l’écoconception et l’accessibilité, il faut contrebalancer cet usage avec d’autres critères sur le site (nombre d’images, nombre de requêtes, etc.).

Pour tester les performances du site :

Données

Différents outils permettent de calculer les performances environnementales du site.

D’un outil à l’autre, des écarts peuvent être constatés car les algorithmes programmés ne prennent pas tous en compte les mêmes paramètres. Par exemple, certains priorisent l’empreinte carbone comme l’outil Website Carbon, d’autres considèrent les données mises en cache comme l’extension Green IT.

Si l’écart n’est jamais faramineux, la comparaison reste pertinente afin de comprendre les points positifs et les améliorations à apporter au site. Le bon réflexe est donc de penser en priorité à ce que l’on souhaite calculer, puis d’employer le bon outil.

Comprendre la méthode d’analyse

Pour évaluer les performances environnementales de Supermab, nous avons utilisé deux méthodes :

  • Une analyse des données et des poids des pages via l’outil de développement Google Chrome, Web.dev et Yellow lab (avec une prise en compte des données transférées et des données brutes).
  • Une comparaison avec Green-IT pour une estimation de l’empreinte carbone moyenne du site (production de CO2) (analyse par page)

Les résultats

Ces résultats sont tirés d’une observation réalisée à partir des contenus publiés sur le site au mois d’avril 2023 et ne tiennent pas compte des éventuelles modifications apportées par gestionnaire du site depuis et dans le futur.

Le poids moyen des pages est de 82 ko. La plus légère étant de 61 ko et la plus lourde de 110 ko. Ce poids correspond au poids d’arrivée sur la page. Lorsque l’utilisateur parcourt la page, des données sont chargées progressivement (lazy loading) et la moyenne du poids des pages passe à 225 ko. Les poids indiqués ci-dessus concernent les pages entièrement chargées sans cache.

Elles comptent en moyenne 10 requêtes, aucune ne fait appel à des services extérieurs (réseaux sociaux, tracking divers, etc).

En moyenne, 1.73 g de CO2 est produit à chaque fois qu’un utilisateur consulte les pages du site.

Pour se rendre compte du travail accompli, il est important de mettre ses données en regard des moyennes actuelles du web en 2022 :

  • Poids de page : 2315 ko
  • Requêtes : 190

Source : Almanac du poids des pages (en anglais)

Lexique

  • Le FCT / First Contentful Paint mesure le temps entre l’arrivée du navigateur sur la page et le moment où il affiche les premiers éléments de contenus.
  • Time to Interactive correspond au temps nécessaire pour rendre actifs l'ensemble des éléments de la page : liens, bouton, etc.
  • Lazy loading est une méthode de développement qui permet de différer le chargement d’un élément (des images par exemple) jusqu’au moment où celui-ci apparaît dans la zone de visualisation de l’utilisateur.
  • Lors de la consultation d’une page web, le navigateur garde en mémoire les données. C’est ce que l’on appelle la mise en cache, qui se fait dans une zone de stockage temporaire (la mémoire cache).