Rédigé par Les Raisonné·e·s et Addviso
La Brasserie abrite des acteurs et actrices de la transition soucieux de répondre aux enjeux sociaux, sociétaux et environnementaux de notre temps. En toute cohérence, son site internet se devait d’être développé dans une démarche de sobriété numérique.
Car oui, le secteur du numérique a des impacts sur l’environnement !
53 millions de tonnes de déchets d’équipement électriques et électronique 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és 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’infrastructures (serveurs, 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’é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 > 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
Le site de la Brasserie s’inscrit dans la démarche de développement web responsable par la mise en oeuvre des bonnes pratiques recommandées.
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 :
Un nombre de pages restreint et un parcours utilisateur facilité pour diminuer le nombre de pages visitées et donc de requêtes
Un traitement de l’information succinct
Le graphisme contribue à l’accessibilité et à la réduction du poids des pages :
Des images optimisées pour garantir leur légèreté
Des noms de liens et des boutons explicites
L’utilisation d’illustrations vectorielles pour habiller les pages
Des couleurs aux contrastes suffisants pour garantir la simplicité de lecture
Une optimisation lors de la création technique du site :
Pas de plugin GAFA installé
Aucun tracking imposé à l’utilisateur
Optimisation du code html, et CSS
Gestion optimisée du cache des ressources
Compression des données transférées
Optimisation des images grâce à un format d’image récent (WebP)
Limitation du nombre de requêtes et du nombre d’éléments structurant la page
Un webdesign responsive, c’est-à-dire adapté aux formats 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é :
Utilisation d’un hébergeur reconnu pour sa démarche éco-responsable, voire Français !
Utiliser une seule typographie sur l’ensemble du site
Des outils pour tester les performances du site
Eco-index
Website Carbon Calculator
Yellow Lab Tools
Web.dev
Tools.pingdom.com
Green IT Analysis
etc.
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 La Brasserie, nous avons utilisé deux méthodes :
Une analyse des données et des poids des pages via l’outil de développement Google Chrome (avec une prise en compte des données transférées et des données brutes)
Une comparaison avec Website Carbon Calculator 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 de mai 2022 et ne tiennent pas compte des éventuelles modifications apportées par Citédia depuis et dans le futur.
Le poids moyen des pages est de 795 ko. La plus légère étant de 650 ko et la plus lourde de 1 Mo. Elles comptent en moyenne 32 requêtes.
La page d’accueil se charge en moyenne en 0,3 secondes (FCP), avec un Time to Interactive de 0,3 secondes sur ordinateur.
En moyenne, 0,10g de CO2 est produit à chaque fois qu’un utilisateur consulte les pages du site.
Les poids indiqués ci-dessus concernent les pages entièrement chargées sans cache. Grâce au lazy loading (les éléments sont chargés uniquement quand le visiteur arrive dessus), on gagne en moyenne 10% de poids, et divise par deux les requêtes.
Avec la mise en cache des données, et après une première visite, les données transférées chutent en moyenne de 50% supplémentaire. Pour les pages déjà vues, le transfert n’est plus que de 5ko en moyenne.
Pour se rendre compte du travail accompli, il est important de mettre ses données en regard des moyennes actuelles du web avec le rapport du mois de juin 2021 sur le CMS WordPress :
Poids de page : 2416.6 ko
Requêtes : 85
Source : https://httparchive.org/
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).