Comment développer un site Internet plus respectueux de l’environnement ?

Julie Toby

5388 vues

12.02.2021

Nous l’avons vu dans notre dossier, nous sommes tous concernés par le poids écologique du numérique. Au même titre que consommer local, concevoir un site web plus respectueux de l’environnement est une démarche aujourd’hui nécessaire pour préserver notre planète.

Il est vrai qu’un site Internet pensé dans une logique « Less is More » pourrait en effrayer plus d’un ! Pourtant, l’économie de moyens ne se fait pas au détriment de l’esthétique, et un site éco-conçu comporte aussi de nombreux avantages pour le client.

Un designer sensibilisé à l’éco-conception web peut en effet très bien réduire l’empreinte écologique d’un site Internet, tout en respectant les besoins de son client et le cahier des charges. Le fruit de ce travail de réflexion pourrait même se révéler bénéfique en termes de résultats et renforcer la relation de confiance designer-client.

Vous souhaitez aider vos clients à s’engager dans cette piste prometteuse et, ce faisant, devenir porteur d’une tendance au travers de pratiques plus responsables ? Voici quelques pistes pour avancer sur la voie de l’éco-conception web…

#1 : Choisissez un hébergeur vert, proche de vos visiteurs :

C’est un fait, plus vos données doivent être transportées loin, plus elles consomment de l’énergie. Privilégiez un hébergeur localisé au plus proche de vos utilisateurs. Cela réduira la distance à parcourir par les datas et, donc, l’utilisation de bande passante.

Outre cet aspect de proximité, renseignez-vous aussi sur d’autres éléments liés à la neutralité carbone de ces installations. Voici quelques critères et questions à vous poser qui vous permettront d’orienter au mieux votre choix.

Consommation	Il y a-t-il des chiffres publiés ? Quel est le PUE du datacenter ? Ses émissions CO2 sont-elles compensées à + de 100% ?
Énergie renouvelable	L’électricité utilisée est-elle renouvelable ? Des crédits carbones sont-ils achetés par l’entreprise ?
Certifications	L’hébergeur a-t-il la certification ISO 50001 ? Quel est le management de l’énergie ? A-t-il reçu des récompenses données par les acteurs du Green IT ?
Recyclage DEEE	D’où viennent les serveurs utilisés ? Où vont les serveurs à la fin de leur vie ?

^[1]

#2 “Less is more”: simplifier l’expérience utilisateur

Première règle de base à appliquer : ne conserver que le nécessaire.
Questionnez-vous sur l’utilité de chaque élément présent sur votre site. L’objectif est d’aller à l’essentiel, en supprimant le superflu. Proposez donc une architecture de l’information simple et fluidifiez au maximum les processus et les parcours utilisateurs.

Il est important que les visiteurs trouvent rapidement ce qu’ils cherchent. S’ils doivent cliquer sur de nombreuses pages avant de trouver l’information dont ils ont besoin, c’est d’abord très agaçant, mais ça représente aussi un gaspillage énorme en temps et en énergie.

Dans le but d’offrir aux visiteurs la meilleure expérience possible, la simplification de l’interface doit avant tout passer par une étude approfondie des utilisateurs et de leurs besoins. Entretiens, grille de persona, phases de tests utilisateurs… Les méthodes du designer sont de précieux outils pour mener à bien cette étape fondamentale.

Simplifier l’expérience utilisateur vous permettra aussi d’améliorer le référencement d’un site. Si cette démarche est capitale pour les visiteurs, elle l’est aussi pour les moteurs de recherches. Se basant sur des principes fondamentaux du comportement utilisateur, Google n’aura aucun intérêt à mettre en avant des résultats non pertinents.

#3 : Éviter les animations inutiles

Les effets d’animation (effets parallaxe, masques…) sont certes amusants mais demandent une quantité d’énergie importante et réduisent les performances de votre site Internet.

Utilisez ces effets à bon escient et avec modération. Même si, dans certains cas, ils peuvent effectivement contribuer à améliorer l’expérience utilisateur, ils sont bien souvent inutiles car utilisés à tout-va et sans réelle réflexion sur l’objectif poursuivi par leur mise en place. Ils peuvent même être carrément contre-productifs s’ils empêchent le visiteur d’arriver rapidement à ses fins.

Privilégiez donc un site web plus simple, plus statique et plus fonctionnel. Limiter ces animations permet aussi aux appareils plus anciens d’accéder confortablement à votre site web.

#4 Réduisez la taille de vos images

A sa création, Internet était dépourvu d’images. L’arrivée et l’accumulation d’images sur le web représente aujourd’hui une immense quantité de données.

En plus d’être une action facile à mettre en place, travailler sur l’optimisation des images permet de diminuer considérablement le poids d’un site.

Toujours dans cette logique du « Less Is More », privilégiez les fichiers graphiques vectoriels et les effets CSS pour créer une expérience visuelle attrayante grâce à des fichiers beaucoup plus petits que les images traditionnelles telles que le JPEG et le GIF.

Si toutefois vous utilisez des photos pour illustrer votre site, assurez-vous qu’elles soient sauvegardées dans la plus petite taille possible et compressées au maximum.

Exemple d’optimisation des images par le site web LOW←TECH MAGAZINE

Il est possible de compresser et de réduire la taille de vos images sans perte visible de qualité. Une petite compression avec perte peut facilement réduire une page web de 90% ! Nous vous recommandons de consulter ces articles sur l’optimisation des images, et sur la compression avec perte pour plus d’informations.^[2]

Fondateur du site www.websitecarbon.com et auteur du livre “Sustainable web design”, Tom Greenwood vous donne quelques conseils pour diminuer la taille vos photos :

Flouter les bords de la photo
Mettre la photo en noir blanc
Pour plus de performance, convertir la photo en format en WebP au lieu de JPEG
Ajouter des effets de superposition CSS pour ajouter de la couleur au noir et blanc.^[3]

Démonstration :

#5 Utilisez moins de vidéos

Encore plus gourmandes en data que les images, les vidéos sont omniprésentes sur Internet. Cependant, elles sont de plus en plus utilisées et, malheureusement, trop souvent dans une qualité et une taille bien supérieures à ce qui est nécessaire.

« L’éco-conception web, c’est aussi choisir le bon outil pour l’usage que l’on en fait » ^[4]

A nouveau, réfléchissez à la finalité de cet outil et s’il correspond bien aux attentes de vos utilisateurs : Est-ce vraiment le meilleur moyen pour communiquer ?

Toutefois, si l’utilisation de la vidéo était vraiment incontournable pour communiquer, voici quelques bonnes pratiques à mettre en place :

Évitez la lecture automatique des vidéos, souvent intrusive et ennuyante pour les visiteurs (en particulier si la vidéo a du son).
Tâchez d’alléger et de raccourcir vos vidéos au maximum.
Privilégiez le format MPEG4 et évitez les GIF.
Utilisez une preview Youtube sous forme d’image plutôt qu’une Iframe.

#6 Utilisez des « typos système » ou optimisez vos polices téléchargées

Moins évident que les vidéos et les images, les polices de caractères peuvent elles aussi ajouter un poids de fichier important aux sites web sur lesquels elles sont utilisées.

Lorsque c’est possible, utilisez les polices système qui, en plus d’être gratuites, ne demandent aucun téléchargement car elles sont déjà installées par défaut sur votre ordinateur.

Si toutefois vous souhaitez utiliser des polices personnalisées, tâchez d’optimiser leur poids au maximum. Les variantes de la police que vous choisissez ont chacune un poids propre dont l’impact est direct sur la consommation de données : un seul fichier de police peut atteindre 250 ko et ce, seulement pour la “graisse” standard. Si vous souhaitez d’autres variantes de graisses, ajouter 250 ko supplémentaires !

#7 Utilisez des couleurs qui demandent peu d’énergie

Avec la mise sur le marché des nouveaux écrans OLED, qui éclairent chaque pixel individuellement, les couleurs ont un impact sur l’énergie dépensée lors de la visite d’un site web.

Contrairement au blanc qui utilise beaucoup d’énergie, le noir n’en utilise pratiquement pas car il agit du point de vue lumineux comme si l’écran était éteint. Sachez aussi que le bleu utilise 25% d’énergie en moins que le vert ou le rouge. C’est Google qui l’a dit !

#En conclusion

La conception écologique d’un site web n’a pas seulement un impact pour la planète. Un site conçu de manière simple et légère va aussi favoriser d’autres éléments :

Réduction de la fracture numérique et meilleure équité sociale : un site simple et épuré sera plus accessible à partir de vieux appareils ou avec une connexion instable ; il sera en outre accessible et compréhensible par un plus large public.
Un code propre et adapté aux logiciels d’adaptation aux handicaps favorise une meilleure accessibilité par tous les utilisateurs.
Performance économique : des temps de chargement plus rapides et des pages simplifiées améliorent l’expérience utilisateur et le taux de conversion.

L’éco-conception web n’en est encore qu’à ses débuts et ces quelques conseils sont un aperçu de tout ce qu’il est (et sera) possible de développer en matière de sobriété numérique.
Cependant, l’impact environnemental du numérique ne peut plus être ignoré et il est amené à prendre une place de plus en plus considérable dans les méthodes de travail des designers :

Pour aller plus loin… nous vous recommandons ces différents outils et lectures :

→ Pour avancer pas à pas dans la conception de services numériques éthiques, consultez le guide très complet réalisé par Les Designers Éthiques, association de recherche-action autour de la conception responsable et durable et dont l’objet est défini comme la réflexion sur les pratiques de design et la mise en œuvre de pratiques de design à vocation éthique, par tout moyen y contribuant.

Le Guide d’éco-conception des services numériques a été conçu par Aurélie Baton et Anne Faubry, avec le soutien de Green IT. Cliquez sur l’image pour accéder au guide (dernière mise à jour : mai 2022).

→ Pour obtenir plus de conseils liés à l’éco-conception web, nous vous recommandons l’ouvrage de référence en France : Eco-conception – Les 115 bonnes pratiques, Editions Eyrolles).

→ Trouver son hébergeur « vert » :

→ Calculer l’empreinte carbone de votre site :

→ Tester la vitesse de votre site :

→ Sonder la consommation électrique de votre site :

→ Lectures complémentaires :