Comment rendre son site web écoresponsable ?

Un site écoresponsable, c’est quoi ?

L’impact écologique d’un site web dépend de beaucoup de facteurs : contenus du site, nombre de visiteurs, durée des visites… Pour tenter de réduire cet impact, il faut s’intéresser à plusieurs éléments de votre site que vous pouvez rendre plus écoresponsables :

• Les structures associées : serveurs, hébergements, locaux…
• Votre site : léger, rapide, peu énergivore…
• Son interface : accessible, orienté utilisateur, respecte la protection des données…

Rarement mis en avant par peur d’affecter négativement les fonctionnalités, le design et l’UX, miser sur l’écoconception n’est pas forcément synonyme d’abandon de qualité. Plus qu’une vitrine de votre activité, votre site est une représentation de votre engagement citoyen envers l’écologie. Cette transition, qui semble à petite échelle pour vous, pourrait également impacter l’ensemble de votre écosystème (clients, partenaires, concurrents) qui pourrait vous suivre dans cette démarche.

Favoriser un environnement « vert »

Une démarche écoresponsable commence avant même la modification de votre site par le choix des infrastructures qui vous alimentent. En faisant le choix de favoriser un fournisseur d’énergie verte (renouvelable), voire locale, c’est une prise de position forte que vous installez à toutes les échelles de votre entreprise. En France, Enercoop, Plüm Énergie ou encore ilek sont des fournisseurs d’électricité verte reconnus par plusieurs institutions environnementales telles que l’ADEME et Greenpeace.

Plus proche du fonctionnement de votre site, on retrouve les hébergeurs. Choisir une structure qui est elle aussi impliquée dans une démarche écoresponsable est l’une des mesures les plus importantes à prendre. Utilisation d’énergies vertes, serveurs peu gourmands en énergie, compensation des émissions de gaz à effet de serre, disposition des D3E (Déchet d’Équipement Électrique et Électronique)… Selon vos critères, vous pouvez être plus ou moins exigeant(e) envers vos fournisseurs. Infomaniak est l’un des hébergeurs européen (Suisse) les plus verts et responsables.

Simplifiez l’interface

Plus votre site sera complexe, plus il sera demandeur en énergie. Il devient donc important d’alléger vos pages dans leur fond et dans leur forme pour privilégier un confort de lecture à l’utilisateur ainsi qu’une diminution d’utilisation d’énergie liée au chargement de la page pour chaque connexion.

Temps de chargement

Un des éléments que vous surveillez peut-​être déjà pour votre SEO et qui vous aidera à connaître la complexité de votre site est la rapidité de chargement des pages. Si votre page met du temps à charger, cela veut dire que le site doit afficher beaucoup de contenu et fait donc appel à une quantité importante d’énergie. Il faut donc vous pencher sur les éléments de vos pages que vous pourriez alléger.

Simplifiez votre site

Que vous ayez recours à un CMS avec des thèmes préexistants ou que vous codiez vous-​même votre site, pour une écoconception réussie il faut chercher la simplicité :

• Limitez l’usage des langages complexes comme le JavaScript et sollicitez des langages web économes.
• Si vous êtes plutôt no-​code et utilisez un CMS, préférez un thème simple et peu lourd dès le début.
• Favorisez des pages statiques construites hors CMS si celles-​ci ne nécessitent pas de modifications régulières et limitez le nombre de page de votre site : aller à l’essentiel n’est pas qu’un atout d’un point de vue écologique mais aussi pour votre SEO et vos visiteurs qui trouveront les informations plus vite !
• Évitez de générer des requêtes supplémentaires et encouragez la navigation rapide dans l’historique (boutons retour en arrière ou page suivante de votre navigateur). Il faut alors éviter les fonctionnalités qui rendent une page inaccessible dès leur activation (formulaires, effets…).
• Supprimez les fonctionnalités (comme les plug-​ins) superficielles. Elles vous semblaient peut-​être utiles au début, mais si elles ne sont que peu voire pas utilisées, pas besoin de les garder !
• …

Épurez vos designs

Vous l’ignorez peut-​être, mais certains éléments graphiques requièrent plus d’énergie pour leur affichage !

Le choix des couleurs a lui aussi un impact sur la consommation de votre site. En effet, certaines couleurs sont plus gourmandes que d’autres. Par exemple, un pixel bleu utilise environ 25% plus d’énergie qu’un pixel vert ou rouge ! Aussi, le mode foncé consomme beaucoup moins d’énergie. Même s’il n’est pas au goût de tout le monde, proposer une version « dark » de votre site web peut aider à réduire de 60% la consommation d’énergie d’un écran !

Lorsque vous pensez à vos couleurs, il faut donc réfléchir à la fois en termes d’accessibilité et d’énergie. Choisissez une palette de 3 couleurs et leurs nuances : une couleur de fond, une couleur secondaire et une couleur de mise en valeur.

Autant d’un point de vue UX que pour l’écoconception, choisissez deux polices maximum : une pour vos titres et une pour vos textes. Il existe d’ailleurs des polices reconnues pour faciliter l’écoconception : les polices natives (ou Web Safe Fonts). Ces polices de caractères sont celles présentes par défaut sur votre appareil. On retrouve généralement Arial, Times New Roman ou encore Verdana.

De plus, un site écoresponsable est par définition responsive ! Soyez user-​friendly, privilégiez le mobile first et offrez à vos utilisateurs une expérience optimale, peu importe leur support.

Vos contenus

Pour proposer un site écoconçu, il faut évidemment se pencher sur le fonds de votre site et les contenus que vous y proposez. Rendre vos pages plus ergonomiques et lisibles, aller droit au but, faciliter l’expérience de l’utilisateur pour trouver les informations.

Le contenu multimédia (son, image, vidéo, document…) est celui qui prend le plus de place et demande le plus de travail au chargement. Il vous faudra donc supprimer ou alléger ces contenus, privilégier des formats natifs ou compressés et favoriser l’hébergement en externe.

Le contenu de vos pages, c’est avant tout du texte. Vous affichez sûrement une certaine quantité de contenus rédigés sur les pages de votre site, votre blog, vos fiches produits… Afin d’optimiser la visibilité et lisibilité de ces contenus, mettez en avant votre esprit de synthèse et privilégiez des affichages en bloc. Cela vous sera bénéfique d’un point de vue SEO et vos utilisateurs vous remercieront de pouvoir trouver les informations recherchées rapidement !

Le format vidéo est particulièrement énergivore sur les sites web. Il est donc primordial d’adapter leur format et de les optimiser en dehors de votre site, en utilisant YouTube ou Vimeo par exemple. Arrêtons aussi la lecture automatique et laissons l’utilisateur choisir de lancer la vidéo pour limiter les consommations superflues.

Si vous le pouvez, il serait préférable de favoriser les styles (langage CSS), pictogrammes, icônes ou glyphes aux images (PNG, GIF, JPEG…) pour éviter à l’internaute de devoir charger des ressources supplémentaires. En effet, ces éléments natifs aux polices de caractères ne demanderont pas l’énergie pour charger une image !

Si vous devez toutefois en afficher en nombre limité, il ne faudra pas oublier de les redimensionner et de les compresser avant leur transfert sur votre site pour diminuer leur poids autant que possible. Enfin, vous pouvez avoir recours au lazy loading, technique permettant le chargement des images seulement si l’utilisateur les affiche à l’écran (inutile de charger une image en bas de page si elle ne sera pas vue).

Sensibilisez vos utilisateurs

Comme nous le disions plus haut, l’écoconception n’est pas bien mise en avant. Pourtant, elle vous est bénéfique à plusieurs niveaux ! Afin de dissiper les doutes et les aprioris, soyez fier(e) de qui vous êtes et montrez le haut et fort. Parlez-​en autour de vous, sur votre site, sur vos réseaux… Insérez une partie écoconception dans votre à‑propos et expliquez son but, l’importance que ça a pour vous, son impact sur votre marque…

L’écoconception commence à diverses échelles et tout le monde peut faire un pas vers un monde numérique plus responsable !

Evaluez votre site

Vous voulez connaître l’impact écologique de votre site web et savoir comment l’améliorer ? Il existe plusieurs outils qui vous permettent d’analyser les pages de votre site et vous offrent des pistes d’amélioration.

EcoIndex

Le site français EcoIndex.fr (actuellement désactivé) et l’extension associée GreenIT Analysis (Chrome et Firefox) auditent votre site web et vous présentent une note sur 100 (et une équivalence relative de A à G) de votre performance environnementale. Vous avez également accès à d’autres renseignements comme l’empreinte technique et environnementale de la page (taille, poids, eau, gaz à effet de serre…). L’extension vous propose en plus une liste de 22 bonnes pratiques d’écoconception pour améliorer votre page.

Ecometer

Ecometer.org est un outil français développé en Bourgogne qui vous permet d’évaluer le niveau d’écoconception de votre site web. C’est avant tout une solution pédagogique qui a pour but de sensibiliser les acteurs du numérique à l’impact environnemental des services du numérique.

Et bien d’autres…

Vous pouvez également retrouver Ecograder, solution créée par une agence digitale américaine spécialisée dans l’accompagnement des entreprises dans une démarche écoresponsable. Elle analyse votre page et vous propose des axes d’amélioration pour réduire votre impact environnemental.

Enfin, l’outil anglais Website Carbon Calculator calcule la quantité de carbone émis par une page en prenant en compte la quantité de données chargées, la nature de l’énergie utilisée pour l’hébergement du site ou encore le trafic de votre site.

Quelques sites verts

D’accord pour la théorie. Mais en pratique, ça ressemble à quoi un site écoconçu ? Certains exemples sont si évidents que l’on n’y pense même pas, d’autres font la une des médias marketing et votre réseau LinkedIn ne parle que d’eux, tandis que le reste existe paisiblement de l’autre côté de l’atlantique. Faisons un petit tour de ce à quoi peut ressembler un site vert dans la « vraie vie » !

Dalkia, l’énergie à la française

Membre du groupe EDF, cette entreprise est spécialisée dans l’énergie. Comme elle l’explique sur son site, l’entreprise a effectué en 2021 une refonte complète de son site web. Celle-​ci lui a permis de réduire de plus de moitié les émissions de CO2 liées à ses visites :

• Hébergement alimenté par des ressources renouvelables et réduction du nombre de serveurs ;
• Charte du site limitée à une police native et 3 couleurs : vert clairs et ses nuances, noir et orange ;
• Réduction du nombre et du poids des pages ;
• Médiathèque limitée, 1 image par page et souvent réutilisée, vidéos hébergées sur YouTube…

Grâce à ces changements, le site obtient une note moyenne de A par EcoIndex. Dans une volonté de viser la neutralité carbone, Dalkia s’engage également dans la durée en finançant également un projet forestier de compensation carbone en Seine-Maritime.

Wikipedia, le géant du savoir en toute sobriété

La preuve que si vous le valorisez bien, le contenu de votre site compte plus que son apparence ! Créé en 2001, l’encyclopédie collective n’a pas vu son design changer catégoriquement depuis ses débuts. Le site est toujours resté simple, organisé en blocs mettant en avant l’architecture des pages et des articles. Bien que ce modèle ne puisse pas être réutilisable par toutes et tous aujourd’hui, le site reste une ressource de base pour les internautes. Si l’on prend par exemple l’article sur l’écoconception, EcoIndex lui attribue la note C !

Proposant du texte dans sa forme la plus simple, des images toujours plus optimisées et claires, son émission carbone basse est un atout non négligeable lorsque l’on sait que le site accueille plus de 60 millions d’articles et environ 500 millions d’utilisateurs par mois !

Sustainable Web Design, l’écosite bien construit

Comme son nom l’indique, ce site est dédié à l’écoconception web et il ne se contente pas d’en parler ! Avec son design épuré et coloré, ce site repousse les rumeurs d’un Green UX triste et peu engageant en produisant seulement 0.49g de CO2. Il a été développé par les créateurs de l’outil Ecograder.

Avec son fond uni et ses formes colorées, ce site est dynamique (visuellement) et propose un paramétrage de l’accessibilité avec un menu déroulant : contraste, nuance de gris, taille des textes, présence des formes en arrière-​plan… On y retrouve de nombreux articles qui touchent à l’écoconception et au marketing. L’EcoIndex attribue la note A à toutes les pages de ce site très user-​friendly.

Low Tech Magazine, magazine numérique alimenté par le soleil

Le site du Low Tech Magazine est écoconçu à bien des égards. D’une part, le design du site respecte l’optimisation des images et des couleurs. La saturation choisie de ces dernières ainsi que le traitement des images donnent à la page un aspect usé que l’on associe aux pages de magazines. Simple d’utilisation, il est également accessible en plusieurs langues !

De plus, le serveur du site est alimenté entièrement par l’énergie solaire et sera rendu indisponible si la météo rend le chargement des batteries impossible. Fonctionnalité interactive, l’arrière-plan du site change selon le temps extérieur et le niveau de batterie ! EcoIndex lui attribue également un A.

Fairphone, le numérique vert de la tête aux racines

Cette marque de téléphones éthiques issue des Pays-​Bas met l’environnement et le développement durable au cœur de sa démarche. Et c’est aussi le cas pour son site web !

Malgré une démarche « éco » moins poussée que les sites précédents, Fairphone bénéficie d’un design simple et clair, utilise une seule police et abandonne la vidéo au profit d’icônes et d’images statiques optimisées. Cela lui permet d’obtenir un B sur l’EcoIndex.