N'hésitez pas à me contacter pour toutes questions : elise@actubio.fr
- Fabriquez votre baume égyptien maison - 12 novembre 2024
- Huile Essentielle d’Amande Amère : le secret aromatique de votre enfance - 14 octobre 2024
- Le bakuchiol, l’actif anti-âge naturel - 10 octobre 2024
On entend de plus en plus parler d’éco-conception de site web et c’est bien normal : le web est une source de pollution ENORME. 2 fois plus polluant que l’aviation, le numérique pèse très lourdement sur le climat.
S’il existe plusieurs explications à cela, les acteurs de la conception de sites internet sont au cœur de la sensibilisation écologique. Et cette tendance devrait s’accélérer dans les prochaines années.
Sommaire
C’est quoi l’éco-conception d’un site web ?
L’éco-conception web permet de créer un site web moins consommateur en énergie et plus respectueux de l’environnement.
Sachez tout d’abord qu’un site internet écologique : ça n’existe pas. Un peu comme une voiture. Une voiture pollue forcément même si elle est électrique déjà même à cause des composants nécessaires pour sa fabrication.
Pour un site web, c’est pareil. Il consomme forcément des ressources que ce soit du côté de l’utilisateur (batterie du téléphone, smartphone, ordinateur, électricité…) que de l’hébergeur (électricité, eau, serveur etc.). Une agence web qui vous propose donc un site « écolo » juste en plantant des arbres en contrepartie se plante donc complètement. C’est du greenwashing.
On ne compense pas la consommation en ressources et l’émission en CO2 d’une navigation digitale en plantant des arbres… ça => c’est non ! L’éco-conception, c’est prendre le mal à la racine : le site web. Planter des arbres c’est très bien mais s’attaquer à la source de la pollution : c’est mieux !
Juste pour éviter un autre raccourci hâtif et très réducteur : l’éco-conception ne correspond pas non plus à rendre son site web hyper rapide. On le voit avec les sites web du GAFAM : sont-ils sensibles à l’écologie ? Pas sûre. Ils sont extrêmement rapides mais très très gourmands en ressources…Ne confondons donc pas performance et éco-conception.
L’éco-conception a surtout pour objectif de produire des sites / applications efficients, qui consomment le moins possible de ressources. Et comme ils nécessitent moins de ressources informatiques, à configuration matérielle identique, ils iront plus vite que des softs mal conçus. CQFD.
Pour cela, on va travailler sur plusieurs aspects pour optimiser, rationnaliser et ainsi économiser. Il en existe plusieurs, mais je vous cite les principaux et les plus compréhensibles par n’importe quel lecteur.
10 astuces pour rendre son site internet plus écologique
Réduisez le volume de stockage de données
Au lieu de conserver les données sur plusieurs années, on ne les conserve que quelques mois. Et on ne garde que celles qui sont utiles.
C’est souvent tout à fait suffisant pour garantir un service, et cela permet de diminuer le stockage sur les serveurs.
J’ai travaillé pour une entreprise qui ne gardait les logs des clients que sur les derniers mois, c’était en général largement suffisant pour pouvoir les exploiter en cas de bug.
Pour résumer : ne stockez la donnée que si elle est nécessaire et exploitable. Sinon, elle ne sert à rien et vous oblige à consommer des ressources (et dépenser de l’argent !)
Il est souvent nécessaire de faire un audit des serveurs, de se débarrasser des bases de données inutiles et coûteuses. Dans de nombreuses entreprises notamment les grandes, un sérieux coup de ménage serait nécessaire et permettrait non seulement de faire tourner des ressources pour rien mais d’économiser des milliers d’euros…
Réduisez la taille et compressez les images du site
C’est un levier de performance énorme et incontournable. En réduisant le poids des images, on réduit le temps d’attente de l’utilisateur et on rend la navigation plus fluide. Il existe des formats d’image qui permettent vraiment d’accélérer l’affichage d’un site et ainsi limiter la consommation en ressource. Et sans dégrader forcément la qualité des images. Mieux que cela : en réduisant le poids des images, vous améliorez le référencement naturel de votre site puisque la vitesse d’affichage fait partie de l’algorithme de Google.
Voici quelques outils pour compresser vos images : https://tinypng.com/ ou https://shortpixel.com/ ou encore https://www.websiteplanet.com/fr/webtools/imagecompressor/
Limitez les couleurs, la surcharge graphique (sliders ou carrousels)
Comme le point précédent, contentez-vous d’un design minimaliste. Pourquoi ? Parce que là encore, la navigation sera plus fluide et moins énergivore.
Un site en noir et blanc aura forcément beaucoup moins d’impact qu’un site avec plein de couleurs, des photos, des sliders etc. D’ailleurs en parlant de slider : quel internaute de nos jours prend réellement le temps de regarder toutes les images du carrousel ?! Préférez plutôt un « collage » d’images 🙂
Optez pour un design sobre
Pour les éléments graphiques, privilégiez les icônes aux images : c’est bien plus léger.
Concernant l’usage des polices, moins vous diversifiez, mieux c’est ! En effet, le chargement des polices nécessite en effet des ressources et donc de l’énergie supplémentaire.
Evitez le lancement automatique des vidéos
L’utilisateur doit pouvoir lancer ou pas la vidéo de lui-même. C’est comme si vous ouvriez le robinet d’eau alors que vous n’avez même pas commencé à vous laver les dents 🪥!
Les vidéos sont la conséquence (mais pas que…) de l’accélération d’utilisation de ressources pour le web.
La vidéo représente à elle seule 60% des flux de données sur la toile ! Avec l’arrivée de plateformes en streaming (Netflix) et la vulgarisation de la vidéo sur les réseaux sociaux, on décuple notre pollution digitale. Les vidéos sont très gourmandes en flux de données : ⛔ évitez-les au maximum sur votre site.
Supprimez les fonctionnalités inutiles
On a toujours tendance à vouloir en donner trop à l’utilisateur. Mais finalement, votre visiteur ne va utiliser qu’une infime partie de ce que vous lui proposez. Analysez ce que font vos internautes et supprimez ce qui ne sert pas. Allez à l’essentiel. Vous améliorerez la performance et vous limiterez ainsi l’impact écologique de votre site.
A ce titre, ayant travaillé avec plusieurs développeurs, lorsqu’on fait un essai avec une librairie par exemple et que celle-ci ne fonctionne pas : supprimez-la. Laisser du code obsolète ou qui ne sert pas pollue vos fichiers inutilement (en plus, en cas de debugging, je vous assure qu’avoir un code propre facilite grandement la tâche !)
De même, si vous travaillez sur un CMS, supprimez les plugins inutilisés, les thèmes inutiles etc. Nettoyez, balayez, astiquez…🧼🎶
Minimisez le code source (CSS et JS)
Comme je vous disais précédemment, toute ligne de code inutile = pollution digitale. Imaginez que cette mauvaise pratique est présente et reprise partout dans le monde, à travers toute la toile ! Du « code poubelle »: ça fait exploser les compteurs…
Par ailleurs, en minifiant les feuilles de style, c’est un gain d’espace et de temps de chargement de gagné.
Minifier le code signifie supprimer les caractères inutiles tels que les espaces ou les commentaires, et renomme les variables en les raccourcissant.
Cela diminue mécaniquement le poids du fichier source. Et qui dit gain de poids, dit gain d’espace mais aussi de performance !
Pensez « Mobile First »
En privilégiant un design orienté pour un usage mobile, on élimine forcément des fonctionnalités superflues et on se contente du strict nécessaire pour que l’application ait une usabilité maximale. Par ailleurs, un site web léger c’est un site qui s’affichera plus vite même en cas de faible réseau.
Vérifiez la compatibilité de votre site sur le mobile ici : https://search.google.com/test/mobile-friendly?hl=FR
Favoriser le traitement asynchrone
Là je sens que j’ai perdu la moitié de mes lecteurs 🤣 et pourtant cette notion est assez simple à appréhender! Pourquoi débuter le chargement d’une image alors que…sur l’écran de l’internaute elle n’est même pas encore affichée ?! Peut-être que le visiteur ne va jamais scroller pour voir cette image et du coup, on l’aura chargée…pour rien ! Vous comprenez le problème ? Aussi, il existe des solutions techniques qui permettent de réduire le nombre de ressources à charger à l’affichage de l’écran initial (comme le lazy loading) qui rendent votre site web plus propre.
Egalement : la visite d’un internaute sur un site déclenche automatiquement une requête http, c’est-à-dire que le serveur envoie au navigateur du visiteur tous les fichiers qui composent votre site web pour que celui-ci puisse l’afficher.
Or, tous ces fichiers ne sont pas forcément indispensables.
Vous pouvez choisir de retarder leur application, par exemple avec vos fichiers Javascript ou CSS, ou tout simplement supprimer certains fichiers qui freinent le chargement des pages de votre site web et pénalisent ainsi les performances de votre site internet. Tout cela peut s’analyser facilement avec la console 🙂
Mettre en place le cache navigateur
Alors la notion de cache c’est en gros du stockage de certaines infos du site web (comme les images, css, js,) afin de ne pas réinterroger le serveur à chaque visite. Avec le cache; si un visiteur revient sur un même site de manière récurrente, les données seront récupérées sur le cache du navigateur, et non sur le serveur. Cela évite de les recharger à chaque fois !
Pour résumer si vous ne deviez retenir que ceci, pour rendre un site plus respectueux de l’écologie voici ce qu’il faut appliquer :
- Diminuer les requêtes,
- Réduire le poids des pages,
- Limiter au minimum le téléchargement des données,
- Limiter le tracking et les appels externes,
- Supprimez les fichiers audios et vidéos non utiles,
- Optimisez votre hébergement (choisissez un hébergeur éco-responsable comme https://www.greengeeks.com/. PlanetHoster ou encore Infomaniak) et/ou utilisez des serveurs virtuels si possible.
Quels sont les bénéfices d’un site « écologique » ?
Voici comment argumenter ces pratiques auprès de votre client ou de votre manager qui n’y croit pas ! L’éco-conception d’un site internet ou d’une application permet de :
- faire des économies d’énergie et diminuer son empreinte carbone
- gagner en performance (des pages qui s’affichent plus vite) et donc améliore le référencement naturel
- maintenir plus facilement le site / l’application mobile avec un code propre et minimaliste
- développe l’accessibilité du web à tous :
- pour les malvoyants : le liseur de site web n’est plus pollué par choses inutiles
- et les personnes ayant un faible débit internet voient votre site même si le réseau est médiocre
Si vous souhaitez connaître l’empreinte carbone de votre site web, vous pouvez vous rendre sur WebsiteCarbon.
J’ai testé ce blog dessus et bon …hum…hum 🙄…y’a vraiment du boulot, mon blog qui parle d’écologie pollue grave ! De quoi occuper mon temps libre donc😉
Pour conclure, nous, développeurs, chefs de projets, graphistes etc., nous sommes responsables du monde numérique de demain.
Sensibiliser les acteurs du digital est très important : cela va changer la manière dont les sites / applications seront développés et ainsi ralentir notre pollution digitale.
Voici quelques liens intéressants pour compléter mon article :
– https://alexsoyes.com/eco-conception-web/
https://www.wholegraindigital.com/blog/website-energy-efficiency/
Et enfin, voici un bouquin que je vous conseille qui est en quelque sorte la bible de l’éco-conception d’un site plus respectueux pour l’environnement : vous y trouverez d’autres conseils (parfois un peu techniques) très intéressants.
A bientôt sur Actubio !
Elise
