Ma cliente Florence de Coffeelter, m’a demandé il y a quelques temps de lui réaliser un site internet écologique. Alors, je me suis demandée : comment créer un site web écologique ?
Avant de vous détailler le fruit de mes recherches, je tiens à expliquer le terme « écologique » tel que je le vois. À mon sens, « écologique » signifie vertueux ou bénéfique pour la planète. Par exemple, planter un arbre permettra dans quelques années de capturer du CO2. En revanche, les actions qui polluent, certes moins, ne sont pas écologiques. Par exemple, acheter un vêtement neuf fabriqué en France plutôt qu’en Asie. Cette action permet de diminuer son empreinte carbone, mais acheter un vêtement de seconde main sera forcément plus écologique. Donc, au risque de casser l’ambiance, réaliser un site web écologique n’est pas possible. Il polluera inévitablement plus qu’il ne préservera la planète. En revanche, je peux vous détailler la façon dont vous pouvez limiter cette pollution le plus possible.
Commencez par l’hébergeur
Nous commençons notre création de site internet à moindre impact environnemental par l’hébergement web.
Choisissez un hébergement web « vert »
Un hébergeur dit « vert » peut avoir plusieurs leviers d’actions possibles, notamment :
- Proposer des hébergements mutualisés moins gourmands que des dédiés,
- Utiliser un système de refroidissement efficace mais également écologique (pas de climatisation) pour prolonger la durée de vie du matériel informatique,
- Adopter des pratiques de renouvellement de matériels et de mises à jour raisonnées,
- Investir dans un secteur de recherche et développement dédié à la décarbonation,
- Faire des dons à des associations écologiques,
- Mettre en place une politique interne respectueuse de l’environnement (parking à mobilité douce, éclairage LED, tri et recyclage des déchets, etc.).
Dans mes recherches, j’ai trouvé de nombreux médias proposant des « Top 5 des hébergements verts » qui avaient clairement été payés. Je pars du principe que si l’entreprise avait une réelle politique écologique, alors elle en parlerait. J’ai donc éliminé tous les hébergeurs qui n’en parlaient pas. Ceux qui sont restés en compétition sont : Infomaniak, GreenGeeks et Ex2.
Votre utilisation de l’hébergement
De votre côté, vous pouvez aussi faire attention à votre utilisation de cet hébergement. Comme je l’ai mentionné précédemment, en choisissant d’abord un hébergement mutualisé, moins polluant. Il s’agit également de ne pas surcharger inutilement votre espace disque, en veillant à supprimer les anciens sites, tels que des versions « demo, » qui ne sont plus en service. Pensez à supprimer les adresses e-mails ou les bases de données dont vous ne vous servez pas. En outre, pensez également à mettre à jour votre version de PHP si votre hébergeur ne le fait pas pour vous. À la date de cet article, la version la plus récente est la 8.4. En effet, ces mises à jour apportent souvent une amélioration de la rapidité, réduisant ainsi le volume de données transférées.
Repensez la conception d’un site
Nous poursuivons notre création de site internet « green » avec sa conception. Beaucoup d’enjeux se jouent dans la conception du site. En effet, l’objectif sera de créer le site le plus léger possible. Mais qu’est-ce qu’un site léger ? Un site léger est un site qui transfère le moins de données possibles entre lui et l’utilisateur.
Codez de manière minimaliste
Il s’agit donc d’utiliser le moins de lignes HTML et de règles CSS possible. Cela limite alors la quantité de données et de feuilles de style insérées dans le <head>.
Évitez tous scripts superflus
Si vous inspectez cette page, vous verrez énormément de scripts chargés dans le <head>. Vous devez donc vous débarrasser des scripts de polices d’écriture, de Google, de plugins, etc.
Voici un aperçu seulement de ce qu’on trouve :
<!-- Scripts Google -->
<script type="text/javascript" async="" src="https://www.googletagmanager.com/gtag/js?id=GT-M38Q9J7&l=dataLayer&cx=c"></script>
<script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script>
<!-- Scripts Facebook -->
<script id="facebook-jssdk" src="https://connect.facebook.net/fr_FR/sdk/xfbml.customerchat.js#xfbml=1&version=v6.0&autoLogAppEvents=1" data-rocket-defer defer></script>
<!-- Scripts du plugin de consentement de cookies -->
<script data-minify="1" id="cookieyes" type="text/javascript" src="https://fd-communication.fr/wp-content/cache/min/1/client_data/4290612cb59912f2ff8d7583/script.js?ver=1746177753" data-rocket-defer defer></script>
<!-- Scripts du plugin Yoast SEO -->
<script type="application/ld+json" class="yoast-schema-graph">[...]</script>
<!-- Scripts du plugin de sécurité -->
<script src="https://fd-communication.fr/wp-content/plugins/wordfence/js/wfi18n.1690810710.js?ver=7.10.3" id="wfi18njs-js" data-rocket-defer defer></script>
Faîtes l’économie de médias
Chaque image, vidéo, icône ou animation ajoutée à votre page augmente son poids. De quelques kilooctets (ko) à plusieurs mégaoctets (mo) voire même des gigaoctets (go) dans le cas d’une vidéo. Je vous conseille donc de favoriser une page sans ajout superflu de médias.
Utilisez les polices par défaut
Chaque appareil, ordinateur comme mobile, a 9 polices installées par défaut. Lorsque vous ajoutez une police supplémentaire par un script Google Font ou Adobe font, vous augmentez le poids de la page. Votre site devrait donc être conçu avec ces polices par défaut, dit websafe, telles qu’Arial ou Verdana.
Limitez les échanges de données
Lors de l’utilisation d’un site, de nombreuses requêtes sont réalisées entre l’utilisateur et le site, pour afficher les derniers articles d’un blog, lire une vidéo ou envoyer un formulaire de contact. Afin de limiter ces échanges, je vous conseille de ne pas créer de formulaire de contact pour ne pas utiliser de serveur de messagerie, ni d’espace de stockage pour les messages envoyés. À la place, mettez simplement à disposition votre adresse e-mail. Vous pouvez également limiter le nombre d’articles ou de produits affichés sur une page.
Réalisez une mise en page épurée et sombre
Le mode sombre est maintenant disponible sur tous nos appareils, apportant deux avantages : moins de fatigue oculaire et augmentation de la durabilité de notre matériel. En général, les écrans avec des couleurs de fond sombres ont tendance à être plus économes en énergie sur les écrans à technologie d’affichage OLED et AMOLED par rapport aux couleurs de fond claires. Sur ces écrans, chaque pixel émet sa propre lumière. Ainsi, lorsque vous affichez une couleur foncée, les pixels correspondants émettent moins de lumière, ce qui permet d’économiser de l’énergie.
Je vous conseille donc d’utiliser une couleur de fond sombre et une écriture grise claire, comme si l’utilisateur avait baissé la luminosité de son écran.
Optimisez au maximum
Pour finir, afin d’optimiser au maximum votre site, voici quelques conseils supplémentaires.
Gestion des images
Nous avons abordé les médias un peu plus haut, mais plus spécifiquement pour les images, vous pouvez aller encore plus loin. En effet, de nouveaux formats d’image pour le web ont vu le jour ces dernières années, remplaçant ainsi le JPEG ou le PNG. Il existe maintenant le WEBP, utilisé par Wix depuis de nombreuses années, et le AVIF. Dans les dernières mises à jour de Photoshop, vous trouverez cette extension, dans « Enregistrer sous ». Le format WEBP compresse énormément vos fichiers sans détériorer la qualité. Si cela ne suffit pas, vous pouvez également vous rendre sur des sites de compression d’images, comme ShortPixel, en pensant à choisir le réglage « Glossy ».
Mise en cache et chargement différé
Afin de limiter le chargement de votre page, vous pouvez également utiliser un plugin de mise en cache. Ce dernier permet de mettre en cache une partie de votre page web sur le navigateur de votre utilisateur. Ainsi, lorsque ce dernier retournera sur votre page, elle se chargera bien plus rapidement !
Votre utilisation du site
Vous avez aussi la possibilité de réduire votre empreinte écologique grâce à votre utilisation même de votre site. Évitez de réaliser des mises à jour chaque jour, mais plutôt une fois par mois pour économiser l’énergie des serveurs. Importez toujours des images d’une taille raisonnable de 1920 pixels de largeur maximum. Pensez à faire du tri dans les médias qui ne sont plus utilisés et évitez d’utiliser des vidéos en streaming, notamment en arrière-plan, quand une simple photo aurait suffi.
Vous avez également un moyen de diminuer l’impact de votre site, c’est de l’utiliser pour parler d’écologie ! Et oui, si votre site permet d’en parler, d’expliquer et d’apprendre aux utilisateurs à être plus responsables, alors vous avez fait votre part.
94/100
Score de Performance d’après Google Pagespeed Insight
0,15g de CO2
Sont consommés à chaque fois qu’un·e utilisateur·ice visite cette page.
Et voilà, vous savez maintenant comment rendre votre site internet plus vert. Des questions, des remarques, des corrections ? Rendez-vous sur ma page Contact. Si vous avez apprécié ou appris des choses grâce à cet article, n’hésitez pas à cliquer sur le petit cœur rose juste en-dessous 🩷.
