Réduire l’impact environnemental d’un site web existant
Depuis 1995, le poids moyen des pages web est passé de 14Ko à 2 566 Ko (mars 2024) ; soit 183 fois plus lourd.
Dans cet article, vous trouverez quelques pratiques à mettre en place sur votre site internet existant pour réduire votre impact environnemental avec pour objectif central : réduire le poids de vos pages et consommer moins de ressources !
Au-delà de la réduction de l'impact écologique de votre site, vous allez gagner en performance. Un site plus léger, c'est un site plus rapide à afficher. Et qui dit plus rapide, dit expérience utilisateur optimale.
Les images et vidéos
Les images et vidéos représentent, pour la majorité des cas, une grande partie du poids d’une page web.
Utilité des images et vidéos
Retirez des images et vidéos en répondant à la question « Apporte-t-elle de la valeur ou de l’information utile à l’utilisateur ? »
Redimensionnement et compression
Diminuez le poids des images et des vidéos en redimensionnant vos images en amont à la taille d’apparition à l’écran et en compressant vos fichiers.
Pour connaître la taille de rendu d'une image, on peut se rendre sur le site internet à modifier, aller dans la console de développement (clic droit puis "Inspecter" ou le raccourci "Ctrl+Maj+C"), puis sélectionner notre image dans les éléments disponibles. On aura alors la taille de rendu de l’image (dans l'exemple suivant, 768*501 px).
Une fois que l’image est aux bonnes dimensions, il suffit simplement d’ajouter les attributs de hauteur et largeur dans la balise de la manière suivante :
Cela va permettre au navigateur de ne pas redimensionner l’image mais aussi de prévoir un espace, au chargement de la page, pour insérer directement l’image sans avoir à décaler les contenus de la page. Ce sont des actions invisibles à l’œil nu (sauf pour des sites anti pattern) mais qui optimisent les ressources demandées par le navigateur.
⚠ Attention ! Il est primordial de redimensionner ses images, mais il faut également penser que sa taille peut varier en fonction de la taille de l'écran utilisé par l'internaute.
Par conséquent, vous pouvez ajouter l'attribut srcset. Cet attribut permet de fournir différentes versions d’une image en fonction de la résolution de l’écran. Il faudra au préalable préparer différents formats d'images et le navigateur choisira directement quel format prendre en fonction de la taille de l'écran.
Format d'exportation
Choisissez le bon format d'exportation : le format webp pour vos photos et le format svg pour vos pictogrammes et illustrations simples.
Il existe des outils en ligne gratuits pour mener à bien ces étapes. Par exemple, pour le redimensionnement, vous pouvez utiliser Image Resizer et pour la compression et la conversion au format png, vous pouvez utiliser TinyPng.
Pour vos icônes, il est également possible de créer un fichier de police contenant toute votre bibliothèque d'icônes. On peut par exemple penser à l’utilisation de l’outil Icomoon qui permet de sélectionner les icônes de son choix puis de tous les intégrer dans un fichier de police pour n’avoir qu’une seule requête et pouvoir utiliser ses icônes dans la totalité du site.
Lazy loading
Au-delà du redimensionnement, de la compression et du format d'exportation, vous pouvez également utiliser la technique du lazy loading. Cet attribut permet de ne charger les images qu’à la demande, lorsqu’elles apparaissent à l’écran.
Vidéos
Concernant la vidéo en ligne ; elle représente aujourd'hui près de 80 % du flux de données mondial, nécessitant une consommation énergétique importante. Le premier réflexe à adopter pour réduire l'impact environnemental de vos sites est de réduire son usage.
Si vous estimez que la vidéo a une réelle utilité pour vos visiteurs, privilégiez les formats courts et retirer le lancement automatique. Vous pouvez également installer "HandBrake", un outil gratuit qui vous permettra de compresser jusqu'à 80 % vos vidéos avant leur publication en suivant le tutoriel fourni par The Shift Project.
Les animations
Comme pour les images et les vidéos, il faut se poser la question de l’utilité de l’animation pour l’utilisateur.
Ces animations sont lourdes et entraînent par conséquent une consommation d’énergie plus élevée ; mais sont aussi chronophages à développer.
Si elles ne facilitent pas la compréhension et l’utilisation du site internet, il n’est donc pas conseillé de les intégrer au site web.
Les polices
Pour éviter un téléchargement supplémentaire et pour accélérer l’affichage de votre site, vous pouvez utiliser les polices système ou web natives; c’est-à-dire les polices déjà présentes sur votre appareil (ordinateur, smartphone, tablette).
Parmi elles, on retrouve Arial, Verdana, Helvetica, Tahoma, Trebuchet MS, Times New Roman, Georgia, Garamond, Courrier New ou Brush Script MT.
Le référentiel d'écoconception numérique RGESN conseille de limiter l'intégration à deux polices de caractères différentes maximum et au maximum quatre variantes (graisse, italique...).
Pour terminer, optez pour le format WOFF2 pour des fichiers de police plus légers.
Le JavaScript
Divisez le JavaScript (JS) en modules ou composants réutilisables.
Ensuite, minifiez et concaténez les fichiers JS pour en réduire la taille. Cela permet de supprimer tous les espaces et sauts de lignes dans un fichier. Cela reste pleinement interprétable pour un navigateur et réduit considérablement le poids d’un fichier.
Vous pourrez trouver différents outils de minification très simples sur internet.
Le fichier CSS
Organisez votre CSS en plusieurs fichiers plus petits pour faciliter le chargement.
Comme pour les fichiers JavaScript, minifiez et concaténez pour une meilleure performance.
La structure HTML
Utilisez une structure claire avec des balises sémantiques pour une meilleure lisibilité et un DOM allégé. Il faut éviter les CMS avec des templates trop lourd, ou bien les pages Builder qui vont ajouter énormément d’éléments superflus.
L’hébergement
L’hébergement idéal est un hébergement proche des utilisateurs et utilisant des énergies "vertes".
La proximité permet de réduire le temps de voyage de l’information entre les serveurs et le client ; et par conséquent la consommation énergétique et le temps d’affichage de la page web.
Choisir un hébergement « vert » est aussi une piste pour réduire l’impact environnemental de votre site. Pour vous aider, vous pouvez vous appuyer sur 6 critères :
- Bonne gestion des DEEE (Déchets d’Equipements Electriques et Electroniques) ;
- Data center économes en énergie ;
- Data center alimentés avec des énergies renouvelables ;
- Compensation des émissions de gaz à effet de serre ;
- Politique d’achat responsable ;
- Engagements RSE forts et sincères.
Comment choisir un hébergeur vert ?
Quelques conseils supplémentaires
Pour aller encore plus loin, voici quelques conseils supplémentaires pour améliorer l'écoconception de votre site web :
- Mise en cache des ressources statiques : Configurez un cache HTTP efficace pour les fichiers statiques (images, CSS, JS, polices) afin d’accélérer les temps de chargement.
- Compression des réponses HTTP : Activez la compression Gzip ou Brotli sur le serveur pour réduire la taille des ressources transférées. Ce sont des paramètres à passer dans les configurations serveur, cela se fait de manière très simple côté serveur. Il faudra regarder la documentation spécifique à l’environnement de votre serveur pour connaître la méthodologie d’application.
- Limitation des cookies et du tracking : Réduisez l’usage des scripts de suivi aux stricts besoins, cela allégera les requêtes réseau et préserve la confidentialité.
- Limiter les bibliothèques et plugins : Les bibliothèques peuvent amener de nombreuses dépendances. Optez pour des solutions sur-mesure pour ne pas surcharger le site.
Toutes ces préconisations permettent de réduire votre impact sur l’environnement ; mais permet aussi d’accroître la visibilité de votre site. Un site moins lourd est un site plus rapide. L’expérience utilisateur ne sera que favorisée tout comme votre référencement (l’algorithme Google prend en compte la vitesse d’affichage du contenu des sites web).
Ces bonnes pratiques ne sont que quelques pistes d’amélioration sur un site web existant pour un numérique plus responsable. Des référentiels d'écoconception numérique existent pour compléter ses bonnes pratiques et aller plus loin comme le référentiel RGESN ou encore le GR491.
Pour un projet de refonte, la démarche d’écoconception web est un projet complet qui doit comprendre une phase d’audit, de définition du projet, d’idéation, de conception puis de développement. Afin de réduire les impacts environnementaux et économiques des services numériques, la démarche d’écoconception doit s’appliquer à toutes les étapes du cycle de vie : matières premières, fabrication, transport, distribution, utilisation, valorisation et fin de vie.
