Un site web ne pèse rien, en apparence. Pourtant, chaque page transfère des données, déclenche des requêtes serveur et sollicite un navigateur à chaque visite. Passée au crible d’EcoIndex, l’outil de référence en France pour mesurer la sobriété d’une page web, la médiane des sites français plafonne à 28/100, note E, sur une échelle où A désigne les pages les plus sobres et G les plus lourdes. Autrement dit, la plupart des sites ont une marge de progression considérable, et c’est exactement ce que ce guide permet de repérer.
L’écoconception web désigne l’ensemble des pratiques de conception qui réduisent cet impact matériel : moins de données transférées, moins de requêtes, une interface plus simple. Voici ce qu’elle recouvre concrètement, comment la mesurer, et par où commencer.
Qu’est-ce que l’écoconception web ?
L’écoconception web consiste à concevoir un site ou une application en limitant sa consommation de ressources : poids des pages, nombre de requêtes serveur, complexité du code. Contrairement à la sobriété numérique, qui agit sur les usages et les équipements, elle agit directement sur la manière dont un service numérique est construit.
Concrètement, ce sont les mêmes critères qui reviennent partout : le poids des données transférées, le nombre de requêtes nécessaires pour afficher une page, et la complexité du DOM, c’est-à-dire le nombre d’éléments HTML que le navigateur doit interpréter. Ce sont exactement les trois critères que mesure EcoIndex, et ce sont eux qui déterminent l’essentiel de l’empreinte d’une page, bien avant le design ou la charte graphique.
Les 3 leviers qui pèsent le plus sur le poids d’une page
Le poids des données transférées
Images non compressées, polices surdimensionnées, vidéos en autoplay : c’est souvent là que se cache le plus gros du poids d’une page. Une image JPEG exportée sans optimisation peut peser dix fois plus qu’une version compressée en WebP, pour un rendu visuellement identique.
Le nombre de requêtes serveur
Chaque police, chaque script tiers (analytics, chat, réseaux sociaux), chaque feuille de style chargée séparément génère une requête. Une page d’accueil dépasse fréquemment 50 requêtes sans que personne ne s’en aperçoive : chaque requête en moins allège le temps de chargement autant que l’empreinte.
La complexité du DOM
Un DOM trop profond (balises imbriquées sans nécessité, blocs répétés, widgets empilés) oblige le navigateur à davantage de calcul pour afficher la page, sur tous les appareils qui la consultent. Au-delà de quelques centaines d’éléments, la différence se sent autant sur le temps de chargement que sur la fluidité de navigation, en particulier sur des appareils moins puissants.
Comment mesurer l’écoconception d’un site ?
Trois outils gratuits permettent d’objectiver la démarche plutôt que de rester dans l’intention.
| Outil | Ce qu’il mesure |
|---|---|
| EcoIndex | Score global sur 100 et grade de A à G, calculés à partir du poids, des requêtes et du DOM d’une page |
| GreenIT Analysis | Extension navigateur, audit détaillé selon les 115 bonnes pratiques d’écoconception |
| Lighthouse (Google) | Performance web, proxy indirect de la sobriété |
La plupart des sites plafonnent autour de la médiane française (28/100, note E), faute d’avoir jamais été audités. La marge de progression se trouve le plus souvent sur le nombre de requêtes et le poids des images, les deux points les plus faciles à corriger sans toucher au design.
Les bonnes pratiques essentielles pour écoconcevoir un site
Cette liste couvre les leviers qui font le plus de différence pour le moins d’effort. Pour aller plus loin, le référentiel des 115 bonnes pratiques d’écoconception web, publié par le Collectif Conception Numérique Responsable, reste la ressource la plus complète du domaine.
- Compresser et redimensionner les images avant mise en ligne, en privilégiant les formats WebP ou AVIF.
- Limiter le nombre de polices chargées et éviter les librairies JavaScript volumineuses pour un usage ponctuel.
- Charger les scripts tiers (analytics, chat, réseaux sociaux) en différé, après l’affichage du contenu principal.
- Regrouper les appels serveur plutôt que de multiplier les petites requêtes.
- Simplifier la structure HTML : moins de balises imbriquées inutiles, moins de blocs répétés.
- Mettre en cache les ressources statiques (images, CSS, JS) pour éviter de les recharger à chaque visite.
- Désactiver les widgets et extensions non utilisés, qui chargent souvent leurs propres scripts en arrière-plan.
- Mesurer avant et après chaque refonte, pas seulement au lancement du site : un score se dégrade vite avec les mises à jour successives.
FAQ : écoconception web
Quelle différence entre écoconception web et sobriété numérique ?
L’écoconception agit sur la conception d’un service numérique donné, pour le rendre plus léger et plus efficace. La sobriété numérique agit sur le volume global : moins d’équipements, moins de renouvellement, moins d’usages superflus. Les deux sont complémentaires.
Combien de temps faut-il pour écoconcevoir un site existant ?
Les premiers gains (compression d’images, cache, scripts tiers en différé) se mettent en place en quelques jours et font souvent baisser le poids d’une page de 30 à 50 %. Simplifier la structure HTML ou revoir l’architecture technique prend davantage de temps et s’envisage plutôt lors d’une refonte.
L’écoconception web améliore-t-elle aussi le référencement ?
Oui, indirectement : la vitesse de chargement fait partie des critères de classement de Google, et une page plus légère se charge plus vite, sur mobile comme sur des connexions lentes. Un site écoconcu a donc de bonnes chances d’être aussi un site mieux référencé.
Source : méthodologie EcoIndex (Collectif Conception Numérique Responsable). Référentiel des 115 bonnes pratiques d’écoconception web.
Julie Bonazzi explore comment le design, le digital et les narratifs peuvent transformer la manière dont les organisations déploient et opèrent le changement. Spécialiste du marketing digital et de l’expérience de marque, elle accompagne depuis plus de dix ans des entreprises et des projets entrepreneuriaux dans la création d’identités, de stratégies de communication et d’écosystèmes numériques.
Entrepreneure, elle développe une approche où design, agilité et culture digitale deviennent des leviers pour rendre les transformations plus intelligibles et plus engageantes.
Julie est la co-fondatrice, avec Malika Ait El Mouden, de Twin Transformation.fr
