Comment rendre un site web éco-responsable

L’empreinte carbone d’Internet est en grande partie causé par la consommation d’électricité et elle augmente considérablement chaque année. C’est un fait, les sites web polluent ! Il est pourtant possible de diminuer l’impact négatif d’un site sur l’environnement. Pour cela, nous allons voir comment rendre un site web éco-responsable. Evidemment, le but n’est pas d’avoir un site qui ne pollue pas (ce n’est pas encore faisable malheureusement), mais d’avoir un site qui pollue moins.

Si tu es comme moi et que tu te soucies de notre environnement, tu feras un petit geste pour l’écologie à ton niveau. En plus, ton site gagnera en performance, en référencement et en expérience utilisateur ! Que du bénéf’ !

Cet article est en majorité basé sur le CMS WordPress, sur lequel je travaille.

1. Alléger les médias pour un site web plus écologique

Un site web de qualité demande des médias de qualité, ça tu le sais.
Mais ils sont malheureusement très gourmands en ressources. Alors comment continuer à les utiliser tout en minimisant notre impact sur l’environnement ?

Les images

Les images en haute résolution sont tellement plus agréables à regarder et rendent un site beaucoup plus professionnel. Mais elles ont un temps de chargement beaucoup plus long et consomment donc beaucoup d’énergie.
Je te rassure, ces jolies images que tu as pris un temps fou pour réunir, tu pourras les utiliser !

Pour cela, il va falloir mettre en place quelques solutions :

• Tout d’abord, n’utiliser que celles qui sont vraiment nécessaire à ton site et qui ont un but précis.
• Réduire la résolution de l’image. Pour le web, la résolution de 72dpi est largement suffisante.
• Adapter l’image en réduisant la taille à l’emplacement souhaité sur le site. Il est inutile d’avoir une grande image pour le placer dans un petit cadre à côté d’un texte, autant réduire sa taille.
• Compresser les images à l’aide d’un outil comme TinyPNG. La compression va réduire la taille des fichiers JPEG et PNG quasiment de 70% sans aucune différence sur l’image à l’oeil nu !

Les vidéos

Pour les vidéos, tout comme pour les images, meilleure est la qualité, mieux c’est. Mais sur un site web, il n’y a pas plus énergivores…
Ici aussi, la question de la nécessité se pose. Si tu ne peux pas faire autrement pour avoir un site éco-responsable, plusieurs solutions peuvent minimiser ses effets négatifs :

• Réduire la résolution de la vidéo.
• Afficher le lien de ta vidéo au lieu de l’intégrer à ton site.
• Ne pas mettre de lecture automatique si ta vidéo est sur ton site (jamais, never !)

Utiliser le “Lazy Load”

Le “lazy-loading” consiste à différer le chargement de certaines ressources (images, vidéos) jusqu’à ce qu’on en est besoin. Concrètement, les images se chargent sur la page au fur et à mesure que l’utilisateur descend la page et deviennent visibles.
Cette méthode permet à la page web de ne pas charger inutilement des ressources qui ne sont pas utilisées et permet également à l’utilisateur de ne pas attendre que toute la page soit chargée pour commencer à visiter.
Le “lazy-loading” fonctionne nativement sur certains navigateurs (Chrome, Firefox). Il peut aussi être mis en place depuis des extensions telles que Lazy Load de WP Rocket.

2. Être éco-responsable en diminuant les requêtes vers le serveur

C’est quoi ça encore ??!

Alors pour faire simple, les requêtes sont les échanges d’informations entre le navigateur et le serveur d’hébergement de ton site web. À chaque ouverture de page, le navigateur envoie des requêtes vers le serveur qui envoie le contenu de la page vers ton ordinateur.
Plus le nombre de requêtes est élevé, plus ton site web consomme de l’énergie. Voyons ce que tu peux mettre en place pour diminuer ce nombre.

• Comme on a pu le voir, déjà limiter le nombre de médias (images, vidéos, etc.) et supprimer les données inutiles.
• Limiter les polices de caractères et ne charger uniquement que celles réellement utilisées.
• Minimiser les fichiers CSS et Javascript.
• Utiliser la mise en cache des éléments de la page.

Minimiser les fichiers CSS et Javascript

Un site web est composé entre autres de fichiers CSS et Javascript.

Un fichier CSS est une feuille de styles qui contient toutes les données concernant l’apparence du site (polices, couleurs, alignements de tous les éléments, etc…).

Un fichier JS regroupe du code en Javascript qui permet d’ajouter des éléments dynamiques et interactifs à ton site (menus dynamiques, fenêtres pop-up, jeux, etc…).

Ces 2 fichiers sont indispensable à ton site web, mais sont lourds et longs à charger.
D’autant plus sur WordPress, ces fichiers sont nombreux, il est donc recommandé de les compresser (minimiser). Pour cela, on peut utiliser des extensions telles que WP minify, qui combine la compression des fichiers JS et CSS.

Mettre en place la mise en cache de ton site

La mise en cache consiste à télécharger les ressources d’un site web (médias, CSS, Javascript) et à les stocker temporairement chez l’utilisateur. Lorsque l’utilisateur revient sur le site, ce dernier récupère ses données depuis le cache au lieu d’interroger à nouveau le serveur web. Cette mise en place permet donc de diminuer les échanges vers le serveur et réduit le temps de chargement de la page.

3. Miser sur un design minimaliste et supprimer les fonctionnalités inutiles

Il y a de jolies tendances sur le web, mais il y en a qu’il ne faut clairement pas à suivre, surtout si tu as une approche éco-responsable ! Rien de mieux que la simplicité pour consommer le moins de ressources possibles. Opte donc plutôt pour un design minimaliste, élégant et efficace !

Il est préférable de supprimer les fonctionnalités inutiles de tes pages. Sur chacune d’elles, demandes-toi si chaque élément est vraiment utile et s’il apporte une réelle valeur ajoutée à tes visiteurs (carroussel, sidebar, vidéo, image). En ne conservant que le nécessaire, le temps de chargement de ton site en sera réduit.

Le choix des couleurs de ton site web a aussi un petit impact car les écrans d’ordinateurs et mobiles utilisent de l’énergie pour afficher les couleurs. Les écrans à LED consomment moins en affichant des couleurs sombres. De plus, le “dark mode” diminue la fatigue visuelle. Bien sûr les couleurs de ton site dépendront de ton identité visuelle.

4. Favoriser un thème léger et limiter les extensions

Lorsqu’on conçoit un site avec WordPress, on utilise un thème qui lui aussi a un impact sur l’éco-responsabilité du site. Le choix de ce thème est donc important. Plus un thème a de fonctionnalités et plus il a des chances d’être lourd.
Privilégie un thème plus léger voire minimaliste. Pour cela, pas besoin d’aller très loin car la bibliothèque de WordPress en a de très bons et performants comme Neve, GeneratePress ou Astra.

Attention à ceux qui vantent les mérites de leurs thèmes en terme de légèreté et de vitesse de chargement, car ce n’est pas toujours le cas ! Pour cela tu peux tester le thème que tu as choisi sur le site Website Carbon ou en utilisant l’extension GreenIT-Analysis sur Chrome ou Firefox.

Avec WordPress, il est aussi possible d’installer des extensions (plugins) afin d’ajouter de nouvelles fonctionnalités à un site (bannière cookies, sécurité, SEO, formulaires, …). Ces extensions ont aussi un poids. Il vaut mieux limiter leur utilisation à ce qui est réellement nécessaire aux besoins du site et éviter l’accumulation d’extensions.

5. Optimiser la conception et la rédaction des textes

L’efficacité énergétique d’un site web n’est pas seulement liée à sa partie technique et à son design. Elle doit être pensé bien en amont avant de créer un site. La conception et la rédaction des textes ont aussi un impact important sur l’efficacité énergétique et nous allons voir comment.

Améliorer le référencement naturel

On peut se demander ce que vient faire le référencement dans cette affaire ! Et pourtant l’optimisation de ton site sur les moteurs de recherche a bel et bien un impact sur la consommation d’énergie.
Pour information, une recherche sur Google peut générer jusqu’à 7g de CO2 ! Avec un bon référencement, les internautes trouvent plus rapidement et facilement les informations qu’ils cherchent. Ils passent donc moins de temps à chercher le site qui correspond à leurs besoins. Moins on passe de temps sur les moteurs de recherche et moins on consomme d’énergie.

Privilégier un texte de qualité

La rédaction de textes affecte le temps qu’on passe sur les sites web. Bien sûr, l’un des objectifs d’un site est de faire rester le visiteur le plus longtemps possible. Mais il ne faut pas qu’il perde son temps à parcourir du contenu qui lui offre peu ou pas de valeur. Une rédaction claire et efficace peut aider à réduire le temps passé sur Internet et, par conséquent, l’impact sur l’environnement. Privilégie alors la qualité de tes textes plutôt que la quantité.

Améliorer l’expérience utilisateur

Une bonne expérience utilisateur réduit le temps passé inutilement sur un site. Il rend le site plus agréable et plus facile à utiliser. Le visiteur ne perd pas son temps à chercher l’information dont il a besoin ou à chercher l’action qu’il est censé faire sur la page. Prends le temps de mettre en place une structure de navigation claire, fluide et logique pour faciliter la recherche d’informations.

6. Un site éco-responsable, c’est aussi choisir un hébergeur vert

Tu ne sais peut-être pas mais il existe des hébergeurs verts !
Les serveurs et tous les systèmes qui vont avec consomment beaucoup d’électricité. Certains hébergeurs proposent de louer des espaces sur des serveurs qui sont à présent alimentés par des énergies renouvelables. Ils ne sont encore pas très nombreux et le coût est un peu plus élevé, mais c’est une très bonne solution pour minimiser l’impact négatif de ton site web sur l’environnement.

Bien sûr si tu n’en as pas les moyens, tu peux choisir un hébergeur au plus proche des cibles visés par ton site. Plus proche est l’hébergement, moins ton site consomme d’énergie pour arriver à destination.

On retrouve comme hébergeurs vert : Infomaniak, PlanetHoster et Ikoula.

Tu as maintenant les solutions à mettre en place pour créer ou rendre ton site éco-responsable. Tu peux contribuer à l’amélioration de notre écologie.

Je crée moi-même des sites web stratégiques et alignés à tes valeurs avec une approche éco-responsable, alors n’hésites pas à me contacter si tu as besoin d’aide !

Tu peux voir l’empreinte carbone de mon site ici.

Épingle-moi sur Pinterest !