Avant toute chose, il faut bien être conscient qu’un site web, par essence n’est pas écologique. On pourrait croire que la dématérialisation est écologique mais il faut prendre en considération tout le matériel qui est utilisé. Que ce soit les ordinateurs et les serveurs qui sont régulièrement changés ou les kilomètres de câbles qui parcourent le globe.
Dans l'optique d’avoir un site web écologique, il faudrait que la démarche soit globale. Du service que nous proposons, à la chaîne de production, il faudrait avoir un impact global positif.
Dans le cas contraire, on va s’efforcer de réduire son empreinte écologique à différents niveaux.
Lors de la réalisation du site web
La responsabilité d’un site web à faible empreinte n’incombe pas uniquement au développeur. En effet, c’est un travail d’équipe qui doit être réalisé avec le client, le designer et le développeur.
Afin de le réduire au maximum, il faut que vous :
- Réduisez au maximum le poids des fichiers
- Choisissez que des images pertinentes, elles doivent servir votre contenu
- Choisissez des technologies appropriées, n’utilisez par exemple pas jQuery pour des opérations basiques. Vous serez moins dépendant et économiserez de nombreuses ressources.
Cela rend votre site web plus rapide, performant et améliorera par la même occasion son référencement.
Le contenu
Rédigez vos textes avec soin. Des textes trop longs consommeront plus d’énergie et auront tendance à perdre votre utilisateur.
Pensez à la pertinence de vos textes, votre score SEO en sera également récompensé.
Limiter les requêtes au serveur
Chaque visite sur le site correspond à une requête serveur. Celui-ci va renvoyer tous les fichiers nécessaires au site pour qu’il s’affiche sur l’écran.
Généralement, beaucoup de fichiers sont inutiles ou ne sont pas pertinents.
Nous pouvons donc nous poser plusieurs questions à ce sujet.
Les images
Avant de penser à l’optimisation des images il faut penser à leur pertinence :
- Est-ce qu’avoir une image à cet endroit est bien utile?
- Sert-elle mon propos?
- Suis-je obligé d’avoir un slider / carrousel? Ne serait-il pas préférable d’avoir une image plus impactante à la place?
- Mon image peut-elle prendre moins de place ou peut-on la remplacer avec une image vectorielle qui aura le même impact visuel?
Les images présentes sur les sites sont souvent trop grandes (plus de 1Mo). On peut facilement en réduire la taille. Il est également possible de les compresser avec des outils comme TinyPNG ou ShortPixel. L'idéal est de les réduire à 300ko maximum avec des logiciels appropriés.
Sélectionnez donc vos images avec soin et remplacez-les avec des images vectorielles si possible. Cela allègera votre site web de manière significative.
Les vidéos
Dans la mesure du possible, il faut éviter leur utilisations car c’est ce qui consomme le plus sur un site.
Dans le cas où celle-ci est nécessaire:
- Il faut veiller à à ce qu’elle ne se lance pas au chargement de la page.
- Il faut l’optimiser pour qu’elle soit la plus légère possible
- Il faut l’héberger sur un service tiers tel que youtube ou vimeo
- Si possible, il est préférable de ne pas l’intégrer directement sur le site mais de fournir le lien. En effet, l’ajouter directement sur la page alourdit parfois celle-ci de 1Mo
Les polices
Chaque police personnalisée a un poids significatif qui peut atteindre 250ko. Si vous voulez une variation supplémentaire (comme la bold), il en coûtera encore 250ko.
Il est conseillé de ne pas dépasser trois polices / variations différentes.
Google Fonts propose des polices conçues pour le web. Il estime également le temps de chargement qu’il considère «moyen» à partir de l’utilisation de trois polices.
Petite astuce, dans la mesure du possible, n’hésitez pas à utiliser les polices système, celles-ci sont déjà présentes chez l’utilisateur et ne devront donc pas être chargées.
Les couleurs foncées
Nous utilisons de plus en plus d’écrans OLED. La particularité de ceux-ci est qu’un pixel noir est un pixel éteint.
Utiliser des couleurs foncées aura donc un impact positif sur sa consommation électrique. De plus, il réduit la fatigue visuelle (Attention toutefois pour la lecture prolongée, on préfèrera des couleurs tirant vers le jaune/orange).
La couleur bleue en revanche, est à éviter. Elle consomme plus et est plus agressive pour les yeux.
Astuce : L’application flux permet de mettre un filtre jaune sur l’écran afin de réduire la fatigue oculaire.
Vous l’avez compris, les thèmes sombres sont à privilégier, d’où leur popularité actuelle.
Compresser et optimiser le code
Avant de compresser son code, il est essentiel de bien l’optimiser.
Ecrire un code plus concis mais mieux pensé permet une maintenance plus facile. Il faut également éviter d’utiliser des librairies pour des opérations basiques. Par exemple, on va éviter d’utiliser du jQuery si ce n’est pas nécessaire.
Enfin, le code est composé de caractères. Chaque caractère (espace et retour à la ligne compris) correspond à 1 octet.
Minifier un fichier supprime tous ces espaces et retours à la ligne.
Ainsi, il réduit de manière significative le poids du fichier.
L'hébergement
Pour l’hébergement de votre site, choisissez un serveur à proximité de la localisation de vos utilisateurs, les données seront accessibles plus rapidement et cela demandera moins de ressources.
Certains hébergeurs utilisent également de l’énergie verte.
Le site efarmz que nous avons développé, a été hébergé sur infomaniak par exemple.
Utiliser ce type d’hébergement réduirait notre émission de CO2 de 9% d’après Greenpeace.
Le lazy load
Cette pratique consiste à afficher les éléments qui sont uniquement visibles par l’utilisateur (à savoir, ce qui est présent sur l’écran).
Lorsque l’utilisateur scroll dans la page, les éléments se chargent au fur et à mesure. Cette technique est par exemple utilisée par Facebook, Pinterest et bien d’autres.
L’avantage est que la page se charge beaucoup plus rapidement et qu’il y a moins de données transférées.
Cette technique est donc particulièrement efficace quand il y a beaucoup d’images présentes sur le site.
Il faut cependant faire attention au référencement. En effet, cette technique utilise du javascript qui n’est pas interprété par les robots. Aussi, il est important de mettre en place une stratégie pour que ceux-ci puissent quand même accéder au contenu. Par exemple avec l’utilisation de balises <noscript>.
La cache
Encore une technique pour que le site soit plus léger.
Comme expliqué précédemment, lorsque l’on visite un site web, une multitude de requêtes sont effectuées, la mise en cache permet de sauvegarder le résultat de ces requêtes pour y accéder plus rapidement.
Testez l'empreinte carbone de votre site
Pour tester l’empreinte carbone de votre site, rendez-vous sur Website Carbon Calculator
Si votre empreinte écologique n’est pas bonne, et que vous voulez quand même faire quelque chose pour la réduire, le site vous propose quelques suggestions d’optimisation.
Vous avez la possibilité de planter des arbres pour compenser. C’est notamment ce que Trees for Life propose.
Et les utilisateurs ?
En tant qu’utilisateurs, il y a aussi des gestes que vous pouvez faire pour réduire votre empreinte carbone.
Utiliser les favoris
Inutile de faire une recherche pour un site web que vous visitez régulièrement. En effet, chaque requête consomme de l’énergie et produit du CO2.
Les moteurs de recherche alternatifs
Ecosia par exemple est un moteur de recherche qui plante des arbres pour chaque requêtes effectuée!
Pour d'autres moteur de recherche, vous pouvez regarder cet article.
Supprimer vos mails
Vos mails sont généralement conservés sur des serveurs et si vous ne les supprimez pas, lorsque vous les consultez, il y a énormément de requêtes qui sont effectuées.
Ne stockez pas trop en ligne
Stocker ses photos ou autres documents en ligne peut-être tentant afin d’y accéder de partout et avec différents appareils mais est-ce réellement utile? Vous pouvez investir dans un bon disque dur. Celui-ci sera moins coûteux sur le long terme et consomme moins d’énergie. De plus, un serveur est constitué entre autre de disque dur, ceux-ci ont une durée de vie limitée et sont régulièrement remplacés.
Mettez votre ordinateur en veille
Lorsque vous ne l’utilisez pas, mettez votre ordinateur en veille et éteignez le soir.
Chez Cherry Pulp, nous pouvons vous créer un site plus respectueux de l’environnement, ça vous tente ? Alors contactez-nous !
Contactez-nous
