Avec Léa RIVERAIN, chargée de communication auprès de l’association La Traverse, on a fait un pari un peu fou : améliorer la performance environnementale du site web de l’asso en 20 minutes par mois.
Frustrées par un site existant très lourd et limitées par nos petits moyens (temps de développement disponible de 20 min par mois), nous avons décidé de tester une politique des petits pas sur l’éco-conception numérique.
Après tout, un pas par mois, c’est toujours mieux que 0 !
Et pour que d’autres puissent aussi améliorer leur site web malgré leurs petits moyens, je partage les détails de l’aventure dans cette série d’articles.
Pour améliorer son site web, il faut d’abord mesurer et comprendre.
Qu’est-ce que la performance environnementale d’un site web ?
D’abord, un site performant est un site qui affiche rapidement et fidèlement le contenu que l’on souhaite montrer à l’utilisateur, sur n’importe quel appareil (téléphone, tablette, ordinateur). Cette performance a d’ailleurs un impact sur le référencement d’un site web sur les moteurs de recherche. Par exemple, l’algorithme de Google pénalise les sites dont le contenu se charge trop lentement. Ils apparaissent alors bien plus bas dans la liste des résultats de recherche.
Avoir un site performant est donc très important, à la fois pour être souvent visité (meilleur référencement) et pour donner envie aux utilisatrices de le consulter. Selon le contexte, un site peut nous sembler plus ou moins performant. Par exemple, si je consulte un site sur mon téléphone à la campagne, en 2G, certains sites peuvent me sembler beaucoup plus lents à charger que sur mon ordinateur, connecté via la fibre.
Ensuite, la performance environnementale d’un site web prend en compte les moyens qui sont utilisés pour rendre le site performant. Par exemple, si j’ajoute de nombreuses photos et vidéos très lourdes sur mon site, celui-ci mettra beaucoup de temps à s’afficher. Si j’ajoute un gros moteur qui compresse à la volée toutes les images et vidéos avant d’envoyer le site sur l’ordinateur de l’utilisateur, mon site s’affichera plus rapidement et sera performant. Cependant, j’aurais déployé de gros moyens, gourmands en énergie (pour alimenter notamment le centre de données qui hébergera mon gros moteur). À l’inverse, si, en construisant mon site, je compresse déjà mes images au bon format et que je réduis leur taille, je rends mon site performant, sans utiliser de puissance de calcul supplémentaire. On parle alors d’éco-conception numérique et de performance environnementale.
En résumé, pour un site, la performance, c'est charger vite et bien. La performance environnementale, c'est charger vite et bien, avec autant ou moins de moyens.
Comment mesurer la performance environnementale d’un site web ?
Plusieurs outils gratuits vont nous permettre de dresser un état des lieux et d’établir une liste de pistes d’amélioration pour le site de La Traverse.
Mesurons d’abord la performance
Certains outils permettent de mesurer simplement la performance d’un site web. Par exemple, PageSpeed Insights de Google calcule, pour un site web donné, la vitesse à laquelle il s’affiche, sur mobile et sur ordinateur. On y saisit l’adresse du site web que l’on souhaite analyser et on clique sur “analyser”. Si je clique ensuite sur l’onglet “Bureau” (qui correspond à ordinateur), voici le résultat pour notre site :
Résumé des résultats du test PageSpeed Insights du site La Traverse
Cette image présente un rapport de performance web pour le site « La Traverse », avec un score global de 76/100. Les mesures clés, capturées le 21 septembre 2026 sur ordinateur, sont les suivantes :First Contentful Paint : 0,6 s (Correct);
Largest Contentful Paint : 1,6 s (À améliorer);
Total Blocking Time : 270 ms (À améliorer);
Speed Index : 2,0 s (À améliorer);
Cumulative Layout Shift : 0,126 (À améliorer);
Le rapport indique que ces valeurs sont des estimations et ont été obtenues via une émulation Lighthouse 13.4.1.
Nous constatons ici que la page met en moyenne 2 secondes à afficher le contenu. Le temps nécessaire pour charger le premier texte ou la première image est satisfaisant (FCP = 0,6 secondes). Par contre, l’élément principal (le texte ou l’image la plus large) met trop de temps à s’afficher (LCP = 1,6 secondes). Nous pouvons en conclure que la performance n’est pas top et surtout que certains contenus sont trop lourds.
Les outils pour analyser la performance environnementale
En France, le collectif GreenIT rassemble de nombreux experts œuvrant pour la sobriété numérique et le numérique responsable. Leurs recherches et leur engagement ont abouti à des instruments de mesure faciles à utiliser:
- Le site Ecoindex
- Les extensions GreenIT-Analysis
1. Le site Ecoindex.fr
Commençons par une vue globale en utilisant le site Ecoindex. Si j’indique l’url de la page d’accueil du site de la Traverse, j’obtiens le résumé ci-dessous:
- Note : E
- Score : 33/100
- Page trop lourde : 5.262 Mo
- Page trop complexe : 741 éléments
- Trop de requêtes : 111 requêtes
Ouah, on va avoir du pain sur la planche !
Ma page est trop lourde : cela signifie qu’elle consomme beaucoup d’espace de stockage, dans les centres de données (là où est hébergé mon site) et chez l’utilisateur (sur son téléphone ou son ordinateur).
Ma page est trop complexe : elle utilise trop de puissance de calcul sur le téléphone ou l’ordinateur de l’utilisatrice. Cela peut ralentir le terminal utilisé et vider sa batterie plus rapidement. En outre, cela incite l’utilisatrice à changer plus souvent d’outil pour un terminal neuf plus rapide car nous lui donnons l’impression que le terminal actuel est obsolète. Qui n’a pas déjà craqué pour un nouveau téléphone dernier cri parce qu’il ou elle trouvait le sien trop lent ? Or, selon l’Ademe, en 2025, 50 % de l’impact carbone du numérique est lié à la fabrication et au fonctionnement des terminaux (source).
Ma page échange trop de requêtes : elle sollicite donc beaucoup les serveurs sur lesquels sont stockées les données, puisqu’elle leur pose de nombreuses questions en même temps. Donc l’énergie utilisée pour alimenter (et l’eau pour refroidir) les centres de données est gaspillée.
Pour 1000 visites par mois, l’empreinte de ma page d’accueil est :
- 35,1 L d’eau
- 2.34 kg d’émission d’équivalent CO2
Bien entendu, nous ferons cette analyse pour chaque page du site. Certaines pages peuvent avoir plus d’images et de vidéos que d’autres, intégrer des scripts, utiliser des polices différentes… Bref, chaque page est différente et il faudra donc les analyser une à une.
L’extension GreenIT-Analysis
Utilisons maintenant l’extension GreenIT. Celle-ci reprend les indicateurs de calcul présentés ci-dessus, mais elle propose également certaines bonnes pratiques. D’ailleurs, lorsque nous améliorerons notre page, c’est avec cette extension que nous mesurerons nos progrès.
D’abord, utilisons la navigation privée. Par exemple, sur Firefox, je clique sur le menu puis sur “Nouvelle fenêtre privée”.
Pourquoi est-ce important ? Lorsque nous navigons sur le web, notre navigateur (Chrome, Firefox, Safari…) enregistre certains contenus localement pour ne pas avoir besoin de les redemander au serveur. C’est ce qu’on appelle “mettre en cache”. Les données déjà en cache varient si je suis une nouvelle utilisatrice ou si j’ai déjà visité le site il y a une heure. Donc, pour qu’une mesure soit juste et comparable, je dois mesurer ce qui se passe lorsque mon navigateur demande tous les contenus au serveur, comme si j’étais un nouvel utilisateur.
Voici les étapes pour mesurer la page d’accueil avec cette extension:
- Après avoir téléchargé et installé l’extension GreenIT sur mon navigateur préféré, j’ouvre les outils de développement (touche F12 ou clic droit dans la page puis sur inspecter) et je vais sur l’onglet GreenIT (généralement en haut du panneau, il faut parfois cliquer sur les deux flèches (>>) pour accéder à la liste complète des onglets).
- Je vais sur le site de La Traverse
- Je coche la case Activer l’analyse des bonnes pratiques
- Je clique sur le bouton Vider le cache navigateur pour m’assurer qu’il n’y a aucune donnée en cache
- Je clique sur le bouton Actualiser du navigateur ou je presse F5
- Je fais défiler la page jusqu’en bas (très important pour que toutes les images ou vidéos se chargent)
- Je clique sur le bouton Lancer l’analyse
Les indicateurs mesurés diffèrent parfois légèrement de ceux obtenus avec le site ecoindex.fr car les conditions de mesure ne sont pas exactement les mêmes. Par exemple, le navigateur que j’utilise n’est pas exactement le même que celui utilisé par ecoindex.fr. L’essentiel est de conserver les mêmes conditions de test à l’avenir pour pouvoir évaluer nos progrès. Donc, nous utiliserons désormais toujours l’extension GreenIT avec le même navigateur et la même taille de fenêtre.
La rubrique “Bonnes pratiques” m’indique, pour chaque bonne pratique, si le site respecte les préconisations et, sinon, quels éléments doivent être retravaillés. Par exemple, pour le site de La Traverse, la bonne pratique “Ne pas retailler les images dans le navigateur” n’est pas respectée et je vois la liste des images à retravailler. Cela signifie que ces images sont envoyées avec des dimensions différentes (souvent plus grandes) de celles dans lesquelles elles sont affichées sur le site. Cette pratique est problématique pour deux raisons:
- les images envoyées sont plus lourdes que nécessaire (et donc augmentent le poids du site)
- le navigateur doit redimensionner les images pour qu’elles soient à la bonne taille (donc il calcule inutilement à chaque visite)
Utiliser les outils de développement de son navigateur
Les premiers outils présentés nous donnent déjà beaucoup d’informations, en particulier ceux du collectif GreenIT.fr. Toutefois, pour les plus curieuses, détaillons ici rapidement comment voir les données échangées entre le navigateur et le serveur. Les outils de développement d’un navigateur donnent beaucoup d’informations, lorsqu’on souhaite mesurer la performance d’un site web.
Pour ouvrir les outils de développements, je presse F12 ou je fais un clic droit dans la page et je sélectionne Inspecter. Dans le panneau qui vient de s’ouvrir, je clique sur l’onglet réseau (généralement en haut du panneau, il faut parfois cliquer sur les deux flèches (>>) pour accéder à la liste complète des onglets). Cet onglet reprend la liste des requêtes envoyées par le navigateur au serveur et des réponses reçues.
Lorsque je vais sur le site de la Traverse, mon navigateur envoie une “requête” au serveur qui héberge les données de l’association et il reçoit un document en réponse. Ce document, écrit en code HTML, lui explique tout ce qu’il doit afficher à l’utilisatrice. C’est à partir des informations de ce document qu’il décide ensuite d’appeler toutes les autres URLs pour récupérer les informations manquantes (des images, des vidéos, des polices, du code css, du code javascript…). Dans l’onglet requête des outils de développement, je peux donc voir tout ce que mon navigateur demande au serveur, combien il fait de requêtes, quels sont leurs poids. Par exemple, si je filtre sur images et que je trie par taille, je peux identifier rapidement quelles sont les images à optimiser en priorité.
Conclusion pour le site de La Traverse
| Page | Score (/100) | Requêtes (nb) | Poids (Ko) |
|---|---|---|---|
| Accueil | 17,77 | 137 | 8 155 |
| Le projet | 58,07 | 57 | 2 179 |
| Les activités | 39,75 | 81 | 4 676 |
| L'atelier partagé | 57,62 | 59 | 2 552 |
| Les résidents | 25,80 | 86 | 5 062 |
| Réserver une salle | 46,25 | 63 | 4 519 |
| Agenda | 61,82 | 56 | 2 549 |
| Contact | 64,08 | 50 | 1 818 |
Certaines pages, en particulier la page d'accueil, sont très lourdes. Dans les outils de développement, nous constatons que certaines images ont un poids élevé et que leur taille ne correspond pas à la taille affichée à l'écran. Nous nous concentrerons donc sur cette première piste d'amélioration dans le prochain épisode. Bien sûr, le poids des autres ressources et le nombre de requêtes devront également être traités. Un pas à la fois...