Chaque page web que nous visitons a son empreinte carbone, et celle-ci peut être surprenante ! Le numérique consomme aujourd’hui 10 à 15% de l’électricité mondiale, soit la production de 100 réacteurs nucléaires. Et cette consommation double tous les 4 ans…
La bonne nouvelle ? Il existe des moyens simples de réduire l’impact de nos sites web. Et cerise sur le gateau, c'est également excellent pour votre référencement !
Digital Carbon Footprint
Pour qu’un site s’affiche sur nos navigateurs, il est nécessaire qu’un ensemble de ressources - les images, polices, les fichiers HTML, CSS et JavaScript - transitent depuis un centres de données où elles sont stockées via un réseau de télécommunications. Chaque étape de ce voyage nécessite de l'électricité. Beaucoup d'électricité !
En moyenne, chaque visite d’une page web produit 4,61 grammes de CO2.
Les centres de données figurent parmi les plus grands utilisateurs d'électricité de la planète, et en 2019, le secteur technologique a consommé environ 7% de l'électricité mondiale. Puis est venue une pandémie mondiale, entraînant une augmentation de 70% du trafic Internet en 2020. Il est plus important que jamais d'améliorer l'état du web pour réduire les émissions de carbone.
Réduire d'un seul kilo-octet un fichier qui est chargé sur 2 millions de sites Web réduit les émissions de CO2 de 3T par mois. - Danny Van Kooten
Une façon d'y parvenir est d'améliorer les sites Web que nous construisons en réduisant leur taille globale. Cela contribue à réduire la quantité de données transférées et donc l'électricité utilisée. Cela a du sens, n'est-ce pas ? Mais comment y parvenir ?
Une réponse simple : Construire des sites statiques.
Un blog statique
Les sites statiques sont un excellent moyen de réduire les émissions de carbone des sites web.
Pour comprendre la différence entre un site statique et un site dynamique, commençons par décrire comment fonctionne ces derniers.
Lorsqu’un visiteur arrive sur une page, les sites dynamiques basés sur les CMS classique (Wordpress, Drupal, Webflow,…) vont chercher - “requêter” - dans une base de données les contenus à afficher. Cela implique de faire tourner en permanence un serveur qui “écoute” les requêtes, qui fait tourner une base de données et qui s’occupe de traiter les requêtes pour chaque utilisateur qui arrive sur le site. Il existe des solutions pour limiter ça - comme la mise en cache - mais qui sont davantage de l’ordre du “pansement” qu’une réelle approche systémique. À chaque fois qu’un visiteur accède à une page, l’ensemble du code est envoyé, même si tout n’est pas nécessaire pour afficher la page désirée.
Pour un site statique, en revanche, le contenu est déjà là. Ce contenu est généré une seule fois, lors de sa génération. Les utilisateurs, qu’ils soient des milliers ou des millions, n’engendrerons ensuite aucune autre requête vers une base de donnée.
Il est dès lors aisé de comprendre la gain en terme de consommation et donc d’impact environnemental !
Mais cela amène d’autres avantages !
Qui dit 0 requête, dit gain de vitesse d’affichage des contenus. La navigation s’en trouve donc plus agréable. Et les moteurs de recherche ADORENT les sites rapide ! Cela va donc propulser votre blog dans le haut des résultats de recherche, amenant de nombreux visiteurs. Et comme votre site est statique, peu de risque de surcharge de vos serveurs ! Ils sont “naturellement” scalable. C’est un cercle vertueux.
Un exemple des performances analysées par Google Lighthouse de notre blog 🎉
Enfin, avec l’absence de requête vers une base de données, les risques de sécurité sont également réduit. Disparu les failles XSS, les injections SQL, les attaques de “l’homme au milieu”…
Le graal en somme 🙏
Un hébergeur responsable
Bien que statique, si vous lisez cet article aujourd’hui, c’est qu’il est tout de même hébergé quelque part…
Le côté statique de notre blog nous permet de choisir un hébergement “statique” lui aussi - c’est à dire qui ne fait que stocker des fichiers et n’utilise pas de processeurs. Et entre un disque dur et un processeur, devinez lequel consomme le plus ? Le processeur… Encore un moyen de réduire la consommation mais également de réduire le coût de l’hébergement.
Pour choisir un hébergeur éco-responsable, nous avions trois critères :
- L’électricité qui alimente le datacenter doit être issue d’énergies renouvelables.
- Un refroidissement passif : la source principal de consommation d’énergie des datacenters ne sont pas les serveurs eux-mêmes mais le système de refroidissement ! En anticipant cela, un hébergeur peut penser son datacenter pour être refroidi de façon passive ou alors réutiliser la chaleur pour chauffer le voisinage.
- Un datacenter proche de notre audience : en effet, la distance entre les données et le visiteur a un impact sur le temps de chargement. Plus cette distance est grande, plus l’énergie nécessaire à faire transiter l’information est importante.
Pour cet hébergement, nous avons choisi Scaleway pour la partie CMS - celle qui nous permet d’écrire et de gérer nos articles. Hébergeur français, ils remplissent tous nos critères.
Et Netlify pour la partie publique du blog - celle sur laquelle vous naviguez en ce moment.
Tous deux sont listés dans la Green Web Foundation, l’organisme de référence en ce qui concerne la décarbonation du digital.
Design éco-conçu 🌿
Vous l’avez sans doute remarqué, le design du blog est sobre ! On est loin des canons d’un candy crush ou des sites d’infos avec une myriade de popups qui nous agressent de toutes parts !
Nous avons fait plusieurs choix dans le design du site afin de réduire son empreinte. Voici la liste :
Dithered Images
Le principal défi était de réduire la taille de la page sans rendre le site web moins attractif. Étant donné que les images pèsent lourd, il serait facile d'obtenir des pages légères en les éliminant, en en réduisant le nombre ou en les rendant beaucoup plus petites. Cependant, les visuels et les illustrations apportent de la valeur et rendent la navigation plus agréable. Nous ne voulions pas d’un site noir et blanc sans image !
À la place, nous avons choisi d'appliquer une technique de compression d'image obsolète appelée "dithering". Cette solution, c’est le site Low Tech Magazine qui l’a trouvée. Le nombre de couleurs dans une image, combiné à son format de fichier et à sa résolution, contribue à la taille de l'image. Ainsi, au lieu d'utiliser des images haute résolution en couleur complète, nous avons choisi de convertir toutes les images en trois couleurs : noir + blanc + la couleur de la catégorie de l’article.
On fait également attention à optimiser la résolution des images en fonction de leurs usages.
Police
Là encore, il aurait été possible de choisir une police fancy. Mais cela implique d’ajouter un fichier et donc d’augmenter la taille de chaque page.
Hors, il existe 9 polices que tous les navigateurs possèdent par défaut. En choisissant parmi l’une d’elle, nous utilisons une ressource que chaque utilisateur à d’ores et déjà sur son ordinateur !
Contenu éco-responsable
Prendre toutes ces mesures pour promouvoir la surconsommation ou des actions aux impacts environnementaux négatifs seront un non-sens. Vous ne trouverez par exemple aucune publicité sur le blog.
Notre ligne éditorial se voudra cohérente avec nos valeurs - que nous appliquons dans toutes nos activités. Moindre impact, sobriété, responsabilité écologique et sociétal.
Umami Analytics
Il nous semble important de connaître le nombre de visiteurs sur son blog mais là encore, nous n’avons pas voulu tomber dans la facilité et ajouter Google Analytics. Pour des raisons d’empreintes (script assez lourd et beaucoup de données échangés) mais également éthiques puisque GA transfert des données personnelles vers ses datacenters aux États-Uni.
Le 10 février 2022, la CNIL, après un processus de coopération avec ses homologues européens, a mis en demeure plusieurs organismes utilisant Google Analytics en raison des transferts illégaux de données vers les États-Unis. Source CNIL
En utilisant GA, vous vous mettez hors-conformité RGPD et risquez une mise en demeure de la CNIL
Nous avons donc cherché une alternative.
Notre choix s’est porté sur Umami, une alternative à google analytics open source et “axé sur la confidentialité”.
Axé confidentialité
Umami ne collecte aucune information personnelle identifiable et anonymise toutes les données collectées.
Propriété des données
Umami étant auto-hébergé, nous savons où sont stockés les données et nous en restons propriétaire.
Léger
Le script de suivi est minuscule (seulement 2 Ko).
Analytique simple
Umami mesure uniquement les métriques importantes qui nous intéressent: les pages vues, les appareils utilisés et l'origine des visiteurs. Tout est affiché sur une seule page facile à naviguer.
Contourne les bloqueurs de publicités
Umami est hébergé sous notre propre domaine, le rendant transparent aux bloqueurs de publicités contrairement à Google Analytics. Les données sont ainsi plus précise
Nous avons donc hébergé notre propre système d’analytics, sans augmenter (ou presque) le poids de notre site, en gardant la main sur les données !
Résultats
Tout cette théorie, c’est bien, mais quid du résultat ?
🎯 Notre objectif initial était d’être meilleurs que 90% des pages web testés sur websitecarbon.com
🎉 Et bien c’est réussi puisque ce blog émet moins que 95% des sites testés !
🥳 C’est au delà de nos attentes.
D’abord en terme d’impact, ce blog n’émet que 0,05g de CO2 par visite, soit 100x moins que la moyenne mondiale 🤯
Aller plus loin
Parce que l’impact de plusieurs sera toujours plus important que celui d’un seul, nous proposons à tous nos clients de privilégier cette architecture plutôt que des solutions plus largement utilisées (wordpress en tête) mais qui sont une calamité écologiques. Si vous même souhaitez passer sur une telle architecture - ou discuter comment améliorer la votre - nous nous ferons évidemment un plaisir d’en discuter.
Et comme nous sommes en accord avec le GIEC - l’écologie doit aller de paire avec une responsabilité social et sociétal - nous mettons le code de ce blog en source libre => https://github.com/Digital-Product-Studio/blog-dps
Ceci afin de permettre au plus grand nombre de profiter des avantages sus-cités dans un soucis de responsabilité social et environnemental. Mais aussi afin de profiter ensemble des compétences et savoirs de tous. En effet, mettre son code en source libre permet à d’autres de proposer des améliorations, des corrections. Ainsi, on peut aller encore plus loin et pourquoi pas devenir les meilleurs et atteindre les 100% ! Vos partages et retours sont donc les bienvenus !