Créer un site e-commerce éco-responsable : 13 Astuces pour le rendre écologique

Temps de lecture : 8 minutes

Beaucoup d’entre nous, en tant que consommateurs, connaissent ce sentiment de satisfaction ressenti à la réception d’un colis commandé confortablement depuis son canapé, sans stress ni cohue. Force est de constater que la crise sanitaire a propulsé le secteur du e-commerce qui est apparu comme une nécessité et n’a pas tardé à s’inscrire dans nos habitudes de consommation.

Pour autant, la partie immergée de l’iceberg, le fameux côté obscur du e-commerce camouflé derrière ses nombreux avantages, est rarement abordé. La réalité est que personne ne peut nier l’impact du e-commerce sur l’environnement, notamment lié aux serveurs énergivores, aux emballages des colis, aux transports express et/ou aérien sur de longues distances mais aussi au comportement des consommateurs poussés à la surconsommation.

C’est pourquoi il est devenu impératif de prendre en compte l’éco-conception lors d’un projet de création de site web pour rendre le commerce en ligne plus éco-responsable et durable. Sans compter que cet aspect est devenu dans de nombreux cas un facteur clé de la décision d’achat auprès des nouvelles générations de consommateurs.

Rentrons maintenant dans le vif du sujet et découvrons à quel(s) niveau(x) vous pouvez apporter des ajustements à votre site pour le rendre plus respectueux de l’environnement. 

L’éco-conception web est une approche qui vise à réduire la consommation de ressources et l’empreinte écologique des sites web, tout en optimisant l’expérience utilisateur. L’objectif est de parvenir à créer un site internet qui soit à la fois performant et respectueux de la planète, sans négliger l’esthétique et l’expérience utilisateur.

Nous allons évoquer quelques bonnes pratiques à chaque étape de développement d’un site e-commerce. La majorité d’entre elles s’appuient sur les trois principes fondateurs de l’écoconception de service numérique qui conduisent à l’efficience : 

• Simplicité : Un design épuré et intuitif qui facilite l’utilisation et réduit la consommation de ressources.
• Frugalité : Une utilisation minimale des ressources pour optimiser les performances et réduire l’impact environnemental.
• Pertinence : Un contenu et des fonctionnalités directement utiles pour les utilisateurs évitant le superflu qui alourdit le site. 

Finalement, ces trois principes poussent à adopter une posture de sobriété numérique, extrêmement efficace pour réduire l’empreinte environnementale d’un site web. Après la théorie, passons à la pratique.

• Choisir un hébergeur “vert”

Choisir un hébergeur vert est essentiel pour l'éco-conception web car l'hébergement de sites web nécessite des serveurs énergivores qui fonctionnent en continu, impactant ainsi l'environnement avec des émissions de gaz à effet de serre. Il est donc primordial de privilégier un hébergeur qui utilise des énergies vertes et renouvelables ou qui compense son empreinte carbone en investissant dans des projets d'énergie renouvelable.

Voici une sélection de trois hébergeurs web verts qui alimentent leurs datacenters avec des énergies renouvelables, notamment hydrauliques. Je vous conseille Infomaniak (Hébergeur Suisse), Ikoula (Hébergeur Français) et PlanetHoster (Hébergeur Canadien). En optant pour l’un d’entre eux, vous bénéficiez de services de qualité tout en agissant en faveur de l'environnement.

• Implémenter la mise en cache

La mise en cache consiste à stocker temporairement les fichiers statiques de votre site web (comme les images, les fichiers CSS, JavaScript, etc.) sur l'ordinateur du visiteur ou sur un serveur intermédiaire, tel qu'un CDN (Content Delivery Network). Lorsque le visiteur accède à nouveau à votre site, ces fichiers peuvent être chargés à partir du cache local, réduisant ainsi le besoin de nouvelles requêtes au serveur. Qui dit quantité réduite de données à télécharger, dit également chargement des pages accéléré ! De quoi soulager le serveur et les nerfs des visiteurs 😉

• Utiliser un CDN

Un Content Delivery Network (CDN), ou Réseau de Distribution de Contenu en français, est un ensemble de serveurs répartis dans le monde entier. L'idée derrière l'utilisation d'un CDN est de placer les fichiers statiques de votre site web, tels que les images, les fichiers CSS et JavaScript, sur plusieurs serveurs dispersés géographiquement. 

Lorsqu'un visiteur accède à votre site, le CDN redirige automatiquement la requête vers le serveur le plus proche de sa position géographique. Cela permet de réduire la distance parcourue par les données, ce qui entraîne un temps de chargement plus rapide des pages pour vos visiteurs. En utilisant un CDN, vous améliorez l'efficacité environnementale de votre site web en réduisant la charge sur le serveur principal. Les serveurs du CDN prennent en charge une partie du trafic, ce qui réduit la consommation d'énergie globale et diminue l'empreinte carbone associée à l'hébergement de votre site. C'est une approche gagnant-gagnant pour vous et pour la planète !

• Éliminer les fonctionnalités non essentielles

Plusieurs études démontrent que 70% des fonctionnalités demandées par les utilisateurs ne sont pas essentielles et que 45% ne sont jamais utilisées. Il faut donc réduire le plus possible la couverture fonctionnelle de son site, en la centrant sur le besoin essentiel de l’utilisateur. Plus un site est sobre fonctionnellement, plus il est léger à télécharger et plus l’énergie mécanique nécessaire à son exécution est réduite.

• Limiter le recours aux plug-ins

Les plug-ins sont des extensions pratiques qui permettent d'ajouter des fonctionnalités spécifiques à votre site web. Cependant, il est important de les utiliser avec parcimonie, car chaque plug-in peut alourdir le site en ajoutant des scripts et des requêtes au serveur. Avant d'installer un plug-in, posez-vous la question : en ai-je vraiment besoin ? Si la réponse est oui, assurez-vous de choisir des plug-ins de qualité, mis à jour régulièrement par leurs développeurs. Évitez d'accumuler une multitude de plug-ins qui peuvent entraîner des conflits et des problèmes de performance. Pensez toujours à l'essentiel et à l'efficacité pour offrir une expérience utilisateur optimale tout en préservant les ressources numériques.

• Eviter les redirections 

Les redirections sont des instructions qui envoient les utilisateurs d'une URL à une autre. Elles peuvent être utiles lorsqu'un contenu est déplacé ou lorsque vous souhaitez créer des raccourcis vers des pages spécifiques. Cependant, trop de redirections peuvent avoir un impact négatif sur la performance et l'efficacité de votre site web. En effet, chaque redirection génère une requête supplémentaire au serveur, ce qui augmente le temps de chargement de la page pour les visiteurs. Faites en sorte que votre site offre un trajet direct et sans déviation à vos visiteurs, les menant droit vers leur destination sans perdre de temps en détours inutiles.

• Limiter le nombre de CSS et les compresser 

Les feuilles de style en cascade (CSS) sont utilisées pour définir la mise en forme et la présentation visuelle d'un site web. Pour améliorer l'efficacité environnementale de votre site web, il est recommandé de limiter le nombre de fichiers CSS utilisés et de les compresser. Cela implique de regrouper tous les styles dans un minimum de fichiers, plutôt que d'avoir de multiples fichiers CSS pour différentes parties du site. Ainsi, vous réduisez le nombre de requêtes au serveur, ce qui accélère le chargement des pages.

• Redimensionner et compresser les images

Les images font partie des éléments susceptibles de surcharger votre site internet et de frustrer les internautes en mettant du temps à charger, d’autant plus lorsque vous téléchargez des images trop grandes. Plus elles sont imposantes, plus elles occupent d’espace sur le serveur et plus elles nécessitent de bande passante pour être affichées. Pour éviter cela, il faut prendre le réflexe de les redimensionner et les compresser avant de les intégrer. Un outil gratuit comme Compressor.io le fait à merveille sans compromettre leur qualité !

• Optimiser la taille des cookies

Les cookies, ces petits gourmands du web, sont de petits fichiers stockés sur l'ordinateur du visiteur pour diverses raisons, telles que le suivi des préférences, les sessions de connexion, etc. Cependant, certains cookies peuvent parfois prendre trop de place et entraîner une surcharge de données lors des requêtes du visiteur vers le serveur. En optimisant la taille des cookies, vous allégez le fardeau de données transférées entre le navigateur et le serveur. Pour ce faire, il suffit de supprimer ceux qui ne servent plus et de raccourcir la durée de vie des autres en définissant des dates d’expiration plus courtes.

• Préférer les CSS et pictogrammes aux images

Lorsque c'est possible, utilisez des effets visuels et de mise en forme en utilisant les propriétés CSS plutôt que des images. Les CSS réduisent la taille des fichiers et accélèrent le chargement des pages, tandis que les pictogrammes vectoriels sont légers et adaptables. Cette approche optimise l'efficacité du site tout en réduisant son impact environnemental.

• Favoriser un design simple, épuré et adapté au web : 

Ah, la guéguerre du site le plus stylé et original, c'est comme une compétition de mode pour le web ! Mais devinez quoi ? La planète préfère quand on joue la carte de la simplicité ! Bien sûr, votre site doit être joli, mais il n’a pas besoin de paillettes ou autres artifices pour briller. Un design minimaliste est la classe naturelle du web. Votre mission est donc de faire un grand tri dans votre placard numérique et de chasser tout ce qui est superflu, tous les effets qui font “wahou” mais qui n'apportent pas spécialement de plus value sur le plan fonctionnel. En misant sur un design minimaliste, vous rendrez service à tout le monde, aussi bien au navigateur, qu’à la bande passante et aux visiteurs.

• Paramétrer le dark-mode

Le dark mode est une option de plus en plus populaire sur les sites web et les applications. En paramétrant le dark mode, vous inversez les couleurs, avec des fonds sombres et des textes clairs. Cette fonctionnalité est appréciée par de nombreux utilisateurs, car elle offre une expérience de lecture plus confortable, surtout en basse luminosité. En plus de réduire l’éblouissement et la fatigue oculaire, le dark mode peut également permettre de réduire la consommation d'énergie des écrans, ce qui est bénéfique pour les appareils mobiles.

• Favoriser les polices standards

Lorsque vous concevez un site web, il peut être tentant de choisir des polices de caractères originales et créatives pour rendre votre site unique et attractif. Cependant, toutes les polices ne sont pas universellement prises en charge par les différents navigateurs et systèmes d'exploitation. Il est même fort probable que cela entraîne des problèmes d’affichage et de lisibilité sur certains, créant ainsi une expérience utilisateur médiocre. 

Pour éviter ces problèmes, misez sur les polices standards comme Arial, Helvetica, Times New Roman, et Georgia qui sont certes moins stylées mais beaucoup plus efficaces étant donné qu’elles sont installées par défaut sur la plupart des appareils. Gardez toujours à l’esprit que la simplicité rend service aux serveurs en réduisant leur charge de travail et en améliorant le chargement des pages.

Maintenant que je vous ai dévoilé l’ensemble des astuces pour rendre votre site internet plus écologique, il est temps de prendre conscience de l’ampleur des dégâts 😈 Si vous souhaitez mesurer l’impact environnemental de votre site internet, vous pouvez vous rendre gratuitement sur les sites Websitecarbon ou EcoIndex. Il ne vous restera qu’à rentrer l’URL de votre site web pour découvrir combien de CO2 est produit à chaque fois qu’une de vos pages et chargée. N’hésitez pas à partager vos performances en commentaire !

Nous avons montré qu'il est possible d'apporter plusieurs ajustements relativement accessibles à un site internet pour le rendre plus respectueux de l'environnement, que ce soit au niveau de l'infrastructure, du développement ou de l'expérience utilisateur. Des actions telles que choisir un hébergeur vert, opter pour des polices standards, compresser des images et privilégier les fonctionnalités essentielles contribuent à réduire l'empreinte carbone et à améliorer l'efficacité énergétique. Résultat ? Votre site web se sent plus léger, la navigation est plus rapide et l’environnement vous dit merci ! 🍃

En réalité, il est important de reconnaître que pour certains sites, notamment e-commerces, il peut s’avérer beaucoup plus complexe que cela en a l’air de mettre en oeuvre toutes ces mesures tout en préservant une expérience utilisateur de qualité. Il est vrai que les sites marchands nécessitent souvent des fonctionnalités plus avancées et une grande quantité de données, ce qui peut impacter la performance globale et naturellement faire grimper la consommation d’énergie. 

Il est donc essentiel de trouver un équilibre entre les considérations environnementales et les exigences fonctionnelles d'un site web. Les efforts pour rendre un site plus respectueux de l'environnement ne doivent pas compromettre son efficacité ou son expérience utilisateur. Toutefois, gardez à l’esprit que chaque petit ajustement compte et peut contribuer à réduire l’impact environnemental d’un site web. En tant que concepteurs de sites web et propriétaires de sites, il est de notre responsabilité de continuer à explorer des moyens novateurs pour concevoir des sites plus respectueux de l’environnement. 

Si vous souhaitez concevoir un site e-commerce ou vitrine dans cette optique, n'hésitez pas à nous faire part de votre projet. Notre agence web tient compte des considérations environnementales pour créer des sites plus verts 😉