Le Manifeste à Faible Impact : Les 10 Principes d’Organic Basics pour Créer des Sites Web Plus Écologiques

Des règles simples pour des possibilités infinies

Nous avons d'abord étudié comment construire concrètement un site web durable et avons été submergés de conseils et d’astuces. Nous avons rapidement compris que nous ne pouvions pas tout faire et qu’il fallait réduire les options. 

Inspirés par le manifeste Dogme 95 et ses Vœux de chasteté, nous avons rédigé un manifeste contenant 10 règles pour concevoir un site web à faible impact. À l’image des Vœux de chasteté, elles oscillent entre prescriptions très précises et interprétations libres. 

Cela laisse aux designers et développeurs l’espace nécessaire pour trouver les solutions les mieux adaptées à leur environnement technique, sans compromettre la durabilité. Les règles ne précisent aucune technologie particulière, ce qui permet de les faire évoluer avec le développement technologique.

Je vais détailler ci-dessous ces 10 règles et vous proposer quelques idées pour les mettre en œuvre sur votre propre site. 

1. Ne chargez aucune image avant qu'elle ne soit activement demandée par l’utilisateur

Les images sont responsables d'une grande partie de la consommation de données d’un site web, en particulier pour les boutiques en ligne. Nous devons présenter nos produits visuellement, souvent sous différents angles ou portés par divers modèles. 

L’important, c’est de ne charger que les images dont les utilisateurs ont vraiment besoin. Cela peut signifier ne charger les images qu’à mesure que l’utilisateur fait défiler la page, lors du clic sur un diaporama, voire les cacher jusqu’à ce que l’utilisateur clique sur « afficher l’image ». 

Cette règle est un peu complexe car les illustrations au format graphique vectoriel évolutif (SVG) sont toujours autorisées, mais la taille d’un SVG est beaucoup plus petite que la plupart des images. Nous avons appliqué cela sur notre site en montrant des illustrations dans notre grille de collections (voir ci-dessous), et en n’affichant les images sur la page produit que lorsqu’un utilisateur choisit activement de charger un diaporama.

2. Minimiser la consommation d’énergie sur l’appareil de l’utilisateur

Celle-ci peut être difficile à mesurer mais reste essentielle. La principale raison de l’inclure est de s'assurer que l'attention ne porte pas uniquement sur le transfert des fichiers, mais aussi sur l’effet de ces fichiers une fois arrivés sur l’appareil de l’utilisateur.

Actuellement, les deux principaux points sur lesquels nous nous concentrons ici sont l’utilisation des animations et la quantité de scripts actifs sur votre site. Toute utilisation de la 3D peut également consommer beaucoup la batterie d’un appareil. 

Voici quelques questions à se poser pour appliquer cette règle :

• Est-ce que cette animation / 3D / script améliore l’expérience utilisateur, ou n’est-ce qu’un élément superflu ?
• Pouvons-nous limiter la quantité d’animations / 3D / scripts utilisés sur le site ?
• Pouvons-nous simplifier cette animation / 3D / script pour qu’elle ne réalise que le strict nécessaire ?

À lire aussi : Prendre des décisions plus responsables en matière d’expérience utilisateur

3. S’adapter en fonction de la quantité d’énergie renouvelable sur laquelle fonctionne votre site

Avec la façon dont fonctionnent actuellement les réseaux électriques et Internet, aucun site web ne peut fonctionner à 100 % avec de l’énergie renouvelable. Même Google, qui concentre de plus en plus ses efforts sur les énergies renouvelables pour alimenter ses centres de données, n’y parvient pas. 
Ce que nous pouvons faire à la place, c’est faire en sorte que nos sites web s’adaptent à la part d’énergies renouvelables présente sur le réseau électrique. De nombreuses compagnies d’énergie, comme Barry, proposent déjà quelque chose de similaire en fournissant à leurs clients une application qui indique quand l’électricité est moins carbonée (voir ci-dessous).

Sur le site web à faible impact d’Organic Basics, nous nous appuyons sur l’API de carbonintensity.org.uk pour obtenir nos données. L’API permet un accès simple et gratuit à l’intensité carbone de diverses régions au Royaume-Uni. Une alternative serait l’API Electricity Map, qui est assez onéreuse mais fournit des données dans bien plus de régions à travers le monde. Le principal inconvénient de leur API est le prix d’entrée. 

Nous avons dû choisir le centre de données de Londres puisque notre site est hébergé sur Google Cloud et que c’est la seule option au Royaume-Uni. Ironiquement, ce centre de données est situé dans l’une des régions les plus carbonées parmi les offres d’hébergement cloud de Google. 

En fonction de l’intensité carbone, nous modifions la qualité des images diffusées ainsi que la quantité d’animations permises. Si l’électricité est vraiment trop carbonée, nous désactivons même complètement le site web.

À la place, nous affichons une page minimaliste pour informer nos clients que le site est inaccessible. Elle indique même une estimation du moment où ils pourront de nouveau y accéder, sur la base des prévisions de l’API carbonintensity.org.uk. Depuis le lancement du site, il a été indisponible pendant environ 12,5 heures.

4. Informer l’utilisateur de l’impact de son comportement de navigation

Lorsque je fais mes achats en ligne, j’attends de pouvoir voir combien coûtent les articles dans mon panier. Cela me permet de savoir si j’ai encore du budget pour dépenser ou si je dois partir à la chasse aux réductions. De la même façon, nous devrions informer nos clients de l’impact que leur comportement de navigation a sur le climat.

Sur notre site, nous calculons en continu les émissions que l’utilisateur accumule au fil de sa navigation. Ainsi, il ou elle peut mieux comprendre ce que sont les émissions carbone et comment elles sont liées à l’utilisation d’un site web. Si possible, vous devriez également suivre ces émissions vous-même, car in fine c’est la responsabilité du propriétaire du site de les réduire. 

5. Ne pas utiliser de vidéos

Nous adorons les vidéos chez Organic Basics, mais elles peuvent vraiment faire exploser le budget carbone d’un site web. Cette règle est de loin la plus stricte des 10, mais il y a une très bonne raison. 

Internet est de plus en plus dominé par la vidéo, et au lieu de suivre la tendance, nous avons décidé de faire autrement. Pour lutter véritablement contre la crise climatique, il ne suffit pas d’optimiser et de minimiser ; il faut envisager la décroissance. 

Avec cette règle, nous vous obligeons à penser au-delà du lecteur vidéo et à envisager d’ajouter du mouvement et de la dynamique sans charger des mégaoctets de vidéos. Une alternative consiste à utiliser des animations CSS ou SVG. Oh, et cela vaut doublement pour les GIFs. N’utilisez. Pas. De. GIFs.

6. Stocker les données localement sur l’appareil de l’utilisateur pour limiter les transferts

Tous les contenus que vous affichez sur votre site web peuvent potentiellement être sauvegardés localement sur l’appareil de l’utilisateur. Il n’y a aucun intérêt à télécharger deux fois un contenu qui a peu de chances de changer. 

La plupart des développeurs connaissent déjà cette règle comme essentielle. Elle permet d’optimiser les performances de votre site tout en réduisant en même temps son impact environnemental.

Pour cela, envisagez de construire votre site comme une application web progressive (PWA) et de permettre l’accès hors ligne. 

7. Compresser toutes les données au maximum

Une fois que vos fichiers sont arrivés sur l’appareil de l’utilisateur, il faut qu’ils y restent jusqu’à ce qu’ils soient mis à jour. C’est ce qu’on appelle le cache. Mais avant qu’ils n’arrivent, il faut s’assurer que ces fichiers sont aussi petits que possible. 

Minifiez votre CSS et JavaScript et compressez vos images. Beaucoup de frameworks modernes, comme Nuxt.js ou Next.js, feront ce travail pour vous selon le type de fichiers. 

Cette règle relève vraiment du bon sens, et tout comme le cache, elle a aussi du sens d’un point de vue performance.

8. Ne charger que les scripts, frameworks et cookies essentiels

Chaque fois que vous ajoutez une bibliothèque ou un script externe à votre code, vous augmentez la taille de la page. Même si la bibliothèque ne fait qu’1 ko, cela se transforme rapidement en 1 Mo si 1 000 utilisateurs chargent la page.

Cette règle est là pour vous rappeler de prendre en compte chaque script, framework et cookie que vous ajoutez. Le mot « essentiel » est celui sur lequel vous devriez vous concentrer ici. Le suivi des conversions et l’analytique sont essentiels sur toutes les boutiques en ligne, mais est-ce vraiment nécessaire sur chaque page ?

Ces réflexions se marient bien avec la question de la vie privée, puisque le RGPD et des réglementations similaires exigent un consentement avant de charger des scripts. 

9. Limiter la quantité de lumière émise par l’écran

Depuis l’annonce du manifeste, nous avons reçu des commentaires suggérant que cette règle ne fait en réalité aucune différence, car le mode sombre ne permet d’économiser de l’énergie que sur les écrans OLED. 

Eh bien, nous disons : c’est déjà très bien pour les utilisateurs ayant un écran OLED ! Sur le site web à faible impact d’Organic Basics, nous utilisons encore du blanc ici et là car cela fait partie de notre identité de marque. Toutefois, comme le montre l’exemple ci-dessous, nous intégrons également une teinte jaune et une nuance de gris afin de limiter la luminosité diffusée par l’écran.

10. Optimiser et limiter l’utilisation de polices personnalisées

Enfin, parlons des polices personnalisées. Les polices ne représentent pas grand-chose dans le panorama global des émissions liées aux sites web, mais cela peut facilement devenir incontrôlable. 

C’est pourquoi nous nous sommes limités à une seule police personnalisée sur le site à faible impact. Nous sommes même allés jusqu’à retirer certains caractères du jeu de caractères. Il n’est absolument pas nécessaire d’avoir du cyrillique sur une page en anglais.

La prochaine étape

Si vous appliquez ces 10 règles, vous êtes clairement sur la bonne voie pour transformer votre site ecommerce en une version à faible impact. Plus important encore, vous avez pris le temps de considérer votre site web sous l’angle de la durabilité et comme une pièce essentielle du puzzle de la durabilité. 

Lorsque vous prenez en compte ces règles, il est important de trouver ce qui fonctionne le mieux pour votre marque. Toutes les règles ne sont pas aussi strictes : profitez-en ! Votre site à faible impact ne ressemble pas au mien, et il ne devrait pas l’être. 

Un internet durable ne s’arrête cependant pas à l’électricité ou à l’efficacité énergétique, qui sont l’objet de ces 10 règles. Pour aller plus loin, nous devons également nous pencher sur les matières qui composent nos appareils, nos centres de données et nos réseaux.

Internet est fait de (hilarants) mèmes de chats et de blogs, mais il est aussi construit avec de vrais minerais rares, qui sont souvent extraits par des personnes vivant dans de mauvaises conditions de travail et à un coût environnemental élevé. 

Au cours de ces dernières années, Fairphone nous a proposé un smartphone plus durable, mais la question ne s’est pas du tout posée concernant Internet dans son ensemble. Autrement dit, il nous faut un Fairphone pour l’infrastructure serveur.

À lire également : Stimuler et motiver votre équipe pour faire de la planète une partie prenante de votre site

Tout sur la durabilité : Le guide du ecommerce durable