BLOG | Les bonnes pratiques d’éco-conception pour réduire l’impact environnemental de votre site web

Aujourd’hui, réduire l’impact environnemental de son site web est devenu un impératif stratégique pour toute organisation engagée dans une transition numérique responsable. Chaque ressource chargée, chaque appel réseau, chaque script exécuté consomme de l’électricité que ce soit côté serveur et côté utilisateur. Et à l’échelle d’un site à fort trafic, ces micro-consommations se multiplient jusqu’à représenter une part significative de l’empreinte carbone globale.

L’objectif n’est pas de sacrifier la qualité ou l’expérience utilisateur, mais au contraire de concevoir des interfaces plus rapides et légères. Dans cette perspective, voici un ensemble de bonnes pratiques techniques qui permettent de réduire l’impact environnemental d’un site web.

Des domaines externes limités

Lorsqu’une page web se charge, elle établit potentiellement des connexions avec différents domaines : hébergeurs de scripts, CDN de polices, services marketing, outils d’analyse, plateformes vidéo, widgets sociaux.
Réduire ces connexions revient à alléger la charge réseau et donc à réduire la consommation d’énergie nécessaire au chargement d'une page.

Rapatrier les polices de caractères et scripts externes

La plupart des sites utilisent encore Google Fonts ou Adobe Fonts. Chaque appel vers ces services ajoute des requêtes supplémentaires. Par exemple pour Google Fonts où deux domaines sont sollicités, fonts.googleapis.com pour la feuille de style CSS, et fonts.gstatic.com pour les fichiers de polices. Il est donc fortement recommandé d’héberger soi-même ses polices, ce qui permet de réduire le nombre de domaines sollicités, améliore la mise en cache, supprime un point de dépendance externe et diminue la charge réseau.

Quand cela est possible, c’est le même principe à appliquer avec les nombreux scripts marketing ou fonctionnels qui chargent leurs ressources depuis différentes origines et peut invoquer une cascade de fichiers secondaires, ajoutant des requêtes :

• Scripts d’analyse et tracking (Google Analytics, Matomo, Eulerian, …)
• Scripts publicitaires (Google ads, Bing ads, …)
• Scripts comportementaux et heatmap (ContentSquare, Clarity, …)
• Scripts de chatbot & assistants (Livingactor)
• Scripts CRM (Salesforce, Marketo, …)

Déclencher les scripts uniquement après action utilisateur

Dans beaucoup de cas, des scripts sont appelés dès le chargement d’une page web alors que l’internaute ne les utilisera potentiellement jamais. Voici deux exemples concrets :

• Chatbot : le script du chatbot est souvent chargé dès l’arrivée sur la page, alors que seuls 1 à 15 % des visiteurs ouvrent réellement l’outil. Un chargement à la demande, uniquement lorsque l’utilisateur clique sur la bulle de discussion, permettrait d’éviter de mobiliser des ressources pour rien.
• Lecteur vidéointégré (Youtube, Viméo, …) : les vidéos intégrées ne sont déclenchées que par 8 à 40 % des visiteurs, mais leur lecteur est tout de même chargé en entier dès le départ, ce qui pèse sur les performances. Une bonne pratique consiste à afficher une façade statique (image de prévisualisation) imitant la présence d’une vidéo. Le véritable lecteur n’est alors chargé qu’au moment où l’utilisateur clique pour la lancer. 

Des polices allégées

Les polices comptent parmi les fichiers les plus lourds d’un site : certaines atteignent plusieurs centaines de kilooctets, simplement pour afficher du texte ou des icônes.

Épurer les glyphes inutiles

Par défaut, une police contient un énorme ensemble de signes : lettres internationales, symboles mathématiques, pictogrammes… dont une grande partie ne sera jamais utilisée.
Il faut systématiser les subset (latin, latin-extended, ou même latin-minimal) ce qui permet par exemple pour la police Inter Regular de Google de réduire son poids de 35%.

Créer sa propre police d’icônes

Plutôt que d’utiliser un pack complet d’icônes comme Font Awesome, qui contient des centaines d’icônes dont vous n’en affichez qu’une poignée. La création d’une police d’icône personnalisée est à envisager avec des services comme Fontello ou Icomoon qui permettent de sélectionner uniquement les icônes nécessaires et de générer une police extrêmement légère, parfaitement adaptée à votre projet.

Des formulaires intelligents

Les formulaires peuvent générer de nombreuses requêtes inutiles si leur conception n’est pas optimisée : validations réalisées uniquement côté serveur, systèmes d’autocomplétions trop sensibles ou absence de contrôle préalable des données saisies.

Vérification des saisies côté client

La vérification côté client va permettre de limiter les sollicitations inutiles du serveur en bloquant la soumission du formulaire lorsqu’il contient des erreurs détectables directement dans le navigateur. Plusieurs vérifications simples peuvent être mise en place pour diminuer les allers-retours :

• Champ requis non renseigné,
• Format incorrect d’un champ (email, téléphone, date, code postal, etc…),
• Absence de sélection dans un champ à autocomplétions.

Déclenchement via une action utilisateur

Dans le cas de formulaires remontant des résultats, il est important que la mise à jour de ceux-ci soit déclenchée suite à une action de l’utilisateur. Par exemple sur un formulaire ou l’utilisateur peut configurer plusieurs filtres, mettre à jour les résultats dès qu’une option est modifiée va ralentir sa progression et consommer plus de ressources que nécessaire.

Cette réflexion peut également s’appliquer aux carrousels en désactivant leur lecture automatique, ainsi qu’aux composants de liste en remplaçant le défilement infini par une pagination plus sobre.

Optimisation de l’autocomplétion

Un champ de saisie comportant un système d’autocomplétion peut facilement générer un nombre important d’appels à des API interne ou externe. Si ce point n’est pas pris en compte, chaque saisie de caractère peut déclencher un appel ce qui peut représenter des centaines de sollicitations.

Pour pallier à ce point, il y a plusieurs leviers :

• Il est recommandé de déclencher la recherche à partir de 3 caractères (on peut même pousser à 5 lors d’une recherche par code postal). Attention toutefois aux champs d’autocomplétion pour les villes, certains noms ne comptent qu’un ou deux caractères. Dans ces cas, on peut choisir de déclencher l’autocomplétion uniquement sur les lettres qui correspondent réellement à ces débuts de noms : B, E, G, P, R, S, U, Y
• On peut également ajouter un délai de 300 à 500 ms avant de lancer l’autocomplétion. Ce court temps d’attente permet de s’assurer que l’utilisateur a réellement terminé sa frappe, évitant ainsi d’envoyer une requête à chaque caractère.
• Il est également pertinent de mettre en cache côté client les résultats de l’autocomplétion. Cela permet, lors de frappes successives ou de recherches identiques, de réutiliser les suggestions déjà obtenues plutôt que de solliciter à nouveau le serveur, réduisant ainsi les requêtes inutiles et améliorant la réactivité du champ.

Dans certains cas le mécanisme d’autocomplétion repose sur une requête renvoyant une réponse JSON contenant des informations de mise en forme (HTML ou CSS). Cette approche est à éviter en privilégiant de la donnée brute dans la réponse et en confiant la mise en forme au Javascript.

Enfin, il est toujours utile de s’interroger sur la réelle pertinence d’une fonctionnalité d’autocomplétion. Par exemple, dans le cas d’un champ de recherche, cette aide n’apporte pas toujours de valeur. Afin de décider de son maintien ou non, il peut être judicieux de mettre en place un tracking temporaire pour mesurer son usage réel et évaluer si la fonctionnalité mérite d’être conservée.

Des ressources minifiées 

Cela peut sembler évident, mais il est important de le rappeler : le poids des ressources statiques peut être significativement réduit grâce à la minification. Si cette pratique est couramment appliquée aux fichiers JS et CSS, on oublie encore trop souvent qu’elle peut également s’appliquer aux fichiers HTML, dont la minification contribue pourtant efficacement à alléger le chargement des pages.

Des Images optimisées

Enfin, les images sont de loin la ressource la plus lourde d’un site web. Elles représentent souvent 50 à 70 % du poids total d’une page. Les optimiser doit être une priorité absolue.

Transformer les images au format WebP

Une première action consiste à convertir les images au format WebP, ce qui permet de réduire leur poids de 25 à 35 % par rapport aux formats JPEG ou PNG, tout en conservant une qualité visuelle comparable. De nouveaux formats commencent à émerger tel que l’AVIF qui permet 50% de gain supplémentaire, mais qui est pour l’instant moins universelle que le WebP.

Charger des images adaptées à la zone d’affichage

Une image dont les dimensions ne correspondent pas à la taille réelle d’affichage à l’écran et qui doit être redimensionnée côté client va entraîner un transfert inutilement lourd, augmentant la consommation de bande passante. Pour se faire il est recommandé de mettre en place :

• Un système de crop lors de l’upload, qui va permettre de définir précisément la zone de l’image à conserver et les ratios adaptés aux différents rendus à l’écran.
• L’utilisation d’attribut srcset pour servir automatiquement la version de l’image la plus appropriée en fonction du viewport et de l’appareil utilisé.

Mettre en place le lazy-loading

Les images non visibles immédiatement ne doivent pas être chargées avant que l’utilisateur les atteigne. C’est pourquoi il faut ajouter l’attribut loading="lazy" sur les balises <img> ce qui va permettre d’économiser le chargement de certaines ressources si l’utilisateur ne va pas jusqu’en bas de la page. Cette recommandation doit aussi être appliquée aux iframes afin de limiter le chargement de vidéo (Youtube, Viméo) ou de cartes interactives (Maps).

Conclusion

Réduire l’impact environnemental d’un site web passe par une série de petits gestes, qui individuellement peuvent sembler insignifiants, mais leur combinaison crée un effet massif et mesurable. En optimisant le poids des pages, en limitant les traitements inutiles ou encore en réduisant le nombre d’éléments chargés automatiquement, vous diminuez la consommation énergétique liée à l’affichage, au transport des données et à l’exécution du code.

Cette démarche n’est pas uniquement écologique. Un site plus léger se charge plus vite, ce qui améliore l’expérience utilisateur, réduit le taux de rebond et favorise l’accès depuis des connexions limitées. Ces optimisations renforcent également la performance technique du site, ce qui facilite l’indexation par les moteurs de recherche et contribue à un meilleur référencement naturel.

C’est dans cette logique d’un web plus responsable que l’agence Digitale de Klee Group s’engage, en vous accompagnant vers des solutions numériques plus sobres, plus performantes et réellement durables.