Écoconception web : Les clés pour créer un site internet écoresponsable

Un site web ne pollue pas beaucoup. Une page consultée consomme une quantité d'énergie ridicule à l'échelle d'un individu, et n'importe quel trajet en voiture pèse plus lourd qu'une année de navigation. Ce point mérite d'être posé d'entrée, parce que le discours sur le numérique responsable commence souvent par des comparaisons alarmistes qui ne tiennent pas trois minutes d'examen.

Ce qui change l'échelle, c'est la multiplication. Une page de dix mégaoctets servie deux millions de fois par mois, sur des terminaux qu'il faut renouveler parce qu'ils rament, avec des serveurs dimensionnés pour absorber ce poids : là, l'addition devient visible. Et surtout, tout ce qui réduit cette empreinte réduit aussi les temps de chargement, les coûts de bande passante et le taux d'abandon. C'est une des rares démarches où l'argument écologique et l'argument commercial pointent dans la même direction.

Le poids des pages, chiffre de départ

Une page d'accueil de site vitrine moyen pèse aujourd'hui plusieurs mégaoctets, contre quelques centaines de kilooctets il y a une quinzaine d'années. Les connexions ont accéléré, les développeurs ont arrêté de compter, et le poids a grossi jusqu'à absorber le gain. Sur une ligne fibre, personne ne s'en aperçoit. Sur un téléphone en zone mal couverte, un utilisateur attend huit secondes ou ferme l'onglet.

La répartition de ce poids est presque toujours la même. Les images arrivent en tête, souvent la moitié du total. Le JavaScript vient ensuite, et c'est le poste le plus coûteux à qualité perçue égale, parce qu'un octet de script doit être téléchargé, analysé, compilé et exécuté, alors qu'un octet d'image est simplement décodé. Les polices web ferment la marche, avec un impact visuel disproportionné quand elles bloquent l'affichage du texte.

Regarder cette répartition sur son propre site prend cinq minutes dans l'onglet réseau d'un navigateur. C'est le point de départ de toute démarche sérieuse, et ça évite de passer trois jours sur un détail à deux kilooctets pendant qu'une image de fond en pèse quatre mille.

Les images, là où tout se joue

Trois erreurs reviennent partout. La première : servir une image dans sa résolution d'origine alors qu'elle s'affiche dans un bloc de 400 pixels de large. Le navigateur télécharge tout puis réduit à l'écran. Redimensionner à la source règle le problème.

La deuxième : rester en JPEG et PNG par habitude. Les formats plus récents, WebP et AVIF, produisent des fichiers deux à cinq fois plus légers à qualité visuelle comparable. La balise picture avec plusieurs sources laisse le navigateur choisir le format qu'il sait décoder, ce qui évite d'avoir à trancher entre compatibilité et poids.

La troisième : charger toutes les images du document au premier affichage. L'attribut loading="lazy" diffère le chargement de tout ce qui se trouve sous la ligne de flottaison, et il tient en une ligne de HTML. Attention à ne pas l'appliquer à l'image principale visible d'emblée : là, il dégrade la perception de vitesse.

Un dernier réflexe, sous-estimé : renseigner width et height sur chaque image. Le navigateur réserve l'espace avant le chargement, la page ne saute plus pendant l'affichage, et l'indicateur de stabilité visuelle s'améliore sans que le poids bouge d'un octet.

Le JavaScript, le poste que personne ne veut regarder

Un site de contenu qui embarque huit cents kilooctets de scripts a un problème d'architecture, pas un problème de compression. Le plus souvent, ce poids vient de bibliothèques ajoutées pour un besoin ponctuel : un carrousel, une carte, un sélecteur de date, un système de consentement, quatre outils de mesure d'audience qui suivent tous la même chose.

Le tri se fait par question. Ce composant est-il utilisé sur plus de deux pages ? Existe-t-il une solution native dans le navigateur ? Le carrousel est-il regardé par quelqu'un ? Cette dernière question, posée franchement, supprime souvent le composant le plus lourd de la page d'accueil.

Les scripts tiers demandent une attention particulière parce qu'ils échappent au contrôle. Un tag publicitaire ou un widget externe charge à son tour d'autres ressources, sans plafond. Les charger en différé, ou seulement après une action de l'utilisateur, coûte peu et change beaucoup le comportement de la page.

Cache, hébergement et le reste de la chaîne

Le contenu le plus propre est celui qu'on ne transfère pas. Des en-têtes de cache correctement réglés, avec une durée longue sur les fichiers versionnés et une revalidation sur le HTML, suppriment la plus grande part du trafic pour les visiteurs qui reviennent. Sur un site consulté régulièrement, l'effet dépasse largement celui d'une compression d'images supplémentaire.

Un réseau de diffusion rapproche les fichiers de l'utilisateur, réduit la distance parcourue et décharge le serveur d'origine. Pour un site à audience nationale, le gain est surtout une question de latence ; pour une audience répartie sur plusieurs continents, il devient net.

L'hébergement dit vert demande de la prudence dans l'analyse. Un hébergeur qui achète des certificats d'électricité renouvelable ne consomme pas la même électricité qu'un centre de données raccordé à un mix bas carbone. Deux indicateurs sont plus parlants : l'efficacité énergétique de l'installation, et l'intensité carbone du réseau électrique du pays d'implantation. Un serveur en France ou en Scandinavie part avec un avantage physique que le marketing ne remplace pas.

La durée de vie du matériel pèse également lourd dans le bilan d'un centre de données. Un hébergeur qui garde ses serveurs six ans au lieu de trois divise par deux l'empreinte de fabrication rapportée à l'usage. Cette information ne figure sur aucune page commerciale, mais elle se demande.

Mesurer sans se raconter d'histoires

Les calculateurs d'empreinte de page donnent un résultat en grammes de CO2 par visite. Ces chiffres reposent sur des modèles avec des hypothèses discutables sur l'intensité énergétique du transfert de données, et deux outils différents peuvent produire des résultats éloignés d'un facteur trois. Les utiliser comme valeur absolue dans une communication est risqué ; les utiliser pour comparer deux versions d'une même page est légitime.

Les métriques techniques sont plus fiables parce qu'elles mesurent quelque chose de directement observable : poids total transféré, nombre de requêtes, taille du document, temps d'affichage du plus grand élément. Suivre ces quatre valeurs dans le temps, avec un seuil qui fait échouer la mise en production quand il est dépassé, discipline une équipe bien mieux qu'une charte.

Un référentiel public d'écoconception des services numériques existe en France et liste plus d'une centaine de critères, du choix des formats à la conception fonctionnelle. Son intérêt principal n'est pas la certification : c'est la partie sur les fonctionnalités inutiles, qui rappelle qu'une page supprimée consomme moins qu'une page allégée.

Le sujet dont on parle le moins

La discussion technique masque souvent la seule décision qui compte vraiment : ce qu'on met sur la page. Une vidéo d'ambiance en fond d'accueil, un chat automatique, une animation au défilement, trois bandeaux superposés au chargement. Chacun de ces éléments a été demandé par quelqu'un, aucun n'a été évalué après coup.

Enlever une fonctionnalité que personne n'utilise fait gagner plus que tous les réglages techniques réunis, et personne ne le remarque. C'est probablement pour ça que ça se fait si rarement.