Numérique responsable : comment réduire l’impact environnemental d’un site Web ?
Vous avez sûrement entendu parler du numérique responsable ! Vouloir réduire l’impact environnemental d’un site web, c’est évidemment bien, le faire c’est encore mieux. Alors comment s’y prendre ?
Bien que certains outils permettent d’avoir une vue d’ensemble de votre site web, il est souvent nécessaire d’analyser l’ensemble des pages de votre site une par une et l’examen de nombreuses dimensions est possible. En plus, pour augmenter la difficulté, la plupart des indicateurs techniques sont en partie corrélés.
Bref, cela peut prendre beaucoup de temps, alors cet article présente un condensé des points à surveiller et les outils pour les mesurer.
1. Quels sont les points à surveiller – Les bonnes pratiques du Numérique responsable ?
Le poids de la page
Le poids de votre page correspond à la quantité de données de votre page et se mesure donc en octet (Méga-octets la plupart du temps). Plus la page sera de taille réduite, moins il y aura besoin d’énergie pour la transférer. Comme une page web est constituée de :
- D’un DOM (Document Object Model) : c’est le guide qui va renseigner le navigateur sur le contenu et la structure de la page, avant même son rendu.
- De code statique : HTML et CSS.
- Des scripts (Javascript) permettant d’animer et de dynamiser votre site.
- Des fichiers : images, vidéos, …
- Des plug-ins ainsi que des solutions tierces.
Le poids de votre page est essentiellement influencé par la quantité et le type de fichiers de votre page. Les images non optimisées peuvent considérablement augmenter la taille d’une page. Un vrai point noir dans le cadre du numérique responsable. Il convient d’utiliser des formats d’image modernes (comme WebP) et des techniques de compression. Il est aussi possible de limiter leur nombre ou de conditionner leur affichage.
Si vous avez besoin de vous donner un ordre de grandeur, vous pouvez trouver des statistiques détaillées du poids des pages web (et de ces différents composants sur le site HTTP Archive accessible via ce lien : https://httparchive.org/reports/page-weight
Le nombre de requêtes
Lorsque vous développez un site web, il comporte de nombreuses parties différentes. Vous avez les différents fichiers d’images que vous utilisez sur une page, les feuilles de style CSS qui contrôlent l’apparence du contenu, les fichiers JavaScript qui ajoutent toutes ces fonctionnalités intéressantes, etc.
Donc, lorsqu’une personne parcourt votre site web, son navigateur doit pouvoir télécharger toutes les ressources nécessaires à cette page à partir de votre serveur. Pour ce faire, il adresse des requêtes HTTP au serveur pour chaque ressource individuelle. Bref, pour faire simple, les requêtes sont ce qui permet à votre site de récupérer toutes les informations dont il a besoin auprès de votre serveur (qui stocke vos données et fichiers).
Toutefois, certains éléments spécifiques vont affecter particulièrement les requêtes, il s’agit par exemples :
- D’extensions (fréquentes en WordPress notamment),
- Les polices personnalisées et les émojis,
- Des scripts liés à des applications tierces.
Pour optimiser les requêtes, il y a trois approches possibles :
- Supprimer les requêtes inutiles (par exemple, les extensions WordPress non utilisées – évidemment si vous utilisez WordPress)
- Combiner les requêtes (minifier les fichiers, autrement dit les combiner en un seul). Par exemple, vous pouvez assembler six petits fichiers CSS en un seul fichier CSS plus volumineux. Il se chargera même plus rapidement.
- Réduire la complexité des scripts (pour réduire le nombre d’appels).
L’optimisation du code en général (HTML, CSS ou Javascript) et des requêtes HTTP en particulier permet une exécution plus rapide et permet de consommer globalement moins de ressources. Un point clé pour un projet numérique responsable !
Optimiser le chargement
Entrer dans le cadre du numérique responsable, c’est également prendre le temps d’optimiser le chargement de votre site. Le temps nécessaire pour charger une page impacte non seulement l’expérience utilisateur mais aussi la consommation d’énergie. Quelques techniques sont clés :
- le lazy loading : le chargement de la page au fur et à mesure du défilement permet de chercher les ressources que lorsque c’est nécessaire.
- La mise en cache permet aussi de limiter les ressources les plus gourmandes en servant immédiatement les fichiers.
- Utilisation des CDN : L’utilisation de réseaux de distribution de contenu (CDN) peut réduire la distance de transfert des données, ce qui peut diminuer aussi la consommation d’énergie.
Finalement, les indicateurs clés pour un projet numérique responsable font également partis des éléments affectant le plus l’expérience de vos utilisateurs. Faire de votre projet, un projet numérique responsable vous permet également d’e faire un projet d’acquérir une interface plus efficace pour vos visiteurs.
Pour en savoir plus, lisez également notre article sur les 20 bonnes pratiques de l’éco-conception web !
2. Quels sont les bons outils pour un projet numérique responsable ?
Note : de très (très) nombreux outils pourraient être présentés dans cette section de cet article. L’objectif n’est pas d’être exhaustif mais plutôt de vous présenter les quelques outils que l’on trouve pas mal et qui vous aideront à réaliser un projet numérique responsable. Si vous n’avez pas le même avis, n’hésitez pas à m’écrire sur LinkedIn pour que nous puissions en discuter !
Analyse du code
SonarQube : SonarQube est un outil d’analyse de qualité du code qui collecte et analyse le code source, fournissant des rapports sur la qualité du code de votre projet. Il combine des outils d’analyse statique et dynamique, permettant de mesurer la qualité de manière continue. SonarQube inspecte et évalue chaque aspect de votre code, offrant un historique consultable du code pour analyser les problèmes : style, défaillances, duplications, manque de couverture de test ou complexité excessive.
Le logiciel analyse le code source sous différents angles, du niveau du module au niveau de la classe, fournissant des valeurs métriques et des statistiques révélant les zones problématiques nécessitant des améliorations. SonarQube garantit également la fiabilité du code, la sécurité de l’application et réduit la dette technique en rendant votre base de code propre et maintenable. Il prend en charge 27 languages différentes, dont le C, le C++, Java, JavaScript, PHP, GO, Python, et bien plus encore. SonarQube propose également une intégration CI/CD et fournit des retours lors de la revue de code avec l’analyse des branches et la décoration des demandes d’extraction.
Evidemment, vous pouvez aussi tester EcoCode ou des outils plus classiques comme Jenkins par exemple.
Analyse des performances techniques (côté client)
Pour mesurer ces indicateurs, des outils comme Google PageSpeed Insights, GTmetrix, ou encore WebPageTest peuvent être utilisés. Ils fournissent des analyses détaillées des pages web et offrent des recommandations pour améliorer leur performance et réduire leur impact écologique. En plus de ces outils, des initiatives spécifiques, comme le Green Web Foundation, peuvent fournir des informations sur l’éco-responsabilité des services d’hébergement web.
Pour estimer la consommation d’électricité et l’émission de GES
Ecoindex.fr : L’écosystème EcoIndex met à disposition plusieurs outils permettant de calculer un score en s’appuyant sur les bonnes pratiques définies par le “Collectif numérique responsable”.
Des extensions pour les navigateurs existent aussi. Par exemple : Green IT. Découvrez notre article dédié à Green IT ici !
Tableau récapitulatif des indicateurs :
Les statistiques doivent idéalement être analysées pour chaque page de votre site. Voici une proposition de tableau synthétique pour un suivi efficace de votre site ou application
| URL de la page | Unités | Source de la donnée |
| Poids de la page | ||
| Nombre d’éléments du DOM | ||
| Nombre de requête | ||
| Temps de chargement (de la page) | ||
| Estimation GES | ||
| Électricité consommé |
Conclusion
Chercher à réduire l’impact écologique de ses assets numériques, est une démarche que nous encourageons vivement ! Mais c’est aussi une démarche qui permet simplement d’optimiser son site web et donc améliorer sa performance commerciale (de nombreuses études démontrent la corrélation entre la vitesse d’un site et l’acte d’achat par exemple).
Evidemment, cela ne résoudra pas le réchauffement climatique (même si cela nous désole) mais si chacun de nos actes devient à chaque fois un peu plus responsable, peut-être arriverons nous à faire quelque chose ?
Finalement, un projet numérique responsable c’est avant tout un projet plus efficace. Votre temps et votre investissement ne seront que mieux récompensés.
