Eco-conception du site

Ce site internet a été développé dans une démarche de sobriété numérique par Les Raisonné·e·s et Pikselkraft

Et 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 émissions de gaz à 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’infrastructures (serveurs, réseaux filaires et satellites, etc.) et d’équipements (ordinateurs, téléphones, 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 plus de 800kg d’énergies fossiles et de minéraux pour fabriquer un ordinateur de 2kg ! C’est ce que l’on appelle le sac à dos écologique.)

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 > Fresque du numérique / Rapport Shift Project

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 Les Halles en Commun

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

L’éco-conception faisait partie des critères de sélection définis par Territoires lors de leur consultation et 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. Défi relevé par Les Raisonné·e·s et Pikselkraft !

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 :

L’utilisation d’illustrations svg et d’une typographie forte pour marquer l’identité sans avoir à intégrer trop d’images.
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 :

Seulement deux typographies installées en local.
Un tracking des utilisateurs permettant à l’équipe de suivre le trafic des pages pour améliorer la navigation en cas de perte d’utilisateurs, est réalisé avec la solution Matomo, dans un soucis de respect des données personnelles. L'anonymisation des données permet un respest du RGPD et de sécuriser les données.
Optimisation du code html, et CSS.
Un webdesign responsive, c’est-à-dire adapté aux formats mobile.
Une gestion du cache qui permet de servir des pages statiques ce qui permet d’avoir un compromis entre un site dynamique et un site statique. L’agenda est exclu de cette gestion, car la page doit réagir dynamique pour la fonction d’impression (web2print).

Une fonctionnalité Web2Print pour aller plus loin :

Pour faciliter la communication du projet, tout en évitant de démultiplier les ressources nécessaires (compétences, budgets, etc), le site intègre une fonctionnalité Web2Print (traduction : du numérique au papier). Cette fonctionnalité offre la possibilité d’imprimer l’agenda sur n’importe quelles imprimante (A4 ou A3). Les différentes parties prenantes du projet peuvent ainsi facilement imprimer (et afficher !) la programmation à jour, sans avoir à commander une nouvelle création. Le design de cette page a été optimisée pour être imprimée en noir sur papier blanc ou coloré (pour un rendu plus funky).

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é ! Mais il est toujours possible d’aller plus loin !

Ce qui pourrait encore être optimisé :

Les images, notamment celles sur la page “Les résidents” pourraient être réduites ou remplacée par des illustrations.
Le nombre de requêtes pourrait être réduit et le le poids des pages abaissé en générant les alvéoles grâce au code. Le résultat n’était à ce stade pas satisfaisant et le risque d’utiliser trop de puissances de calcul via le navigateur contre-productif.

Un site avec de bonnes performances globales

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.

Pour évaluer les performances environnementales de cercleavenir.life, 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)
Le poids moyen des pages est de 0,67 Mo.
La plus légère étant de 0,09 Mo et la plus lourde de 0,97 Mo. Ce poids correspond au poids d’arrivée sur la page.
Lorsque l’utilisateur parcours la page, des données sont chargées progressivement (lazy loading).
Les pages comptent en moyenne 11,5 requêtes.

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 : 2,315 Mo
Requêtes : 76

Source : almanac.httparchive.org/en/2022/page-weight

NB : Ces résultats sont tirés de l’observation réalisée sur le site par Les Raisonné·e·s le 31 mai 2024 et ne tiennent pas compte des éventuelles modifications apportées par Territoires & Développement depuis et dans le futur (contenus, fonctionnalités, mises à jour, plugin, etc.).

Pour tester les performances du site :