Évaluer l'éco-conception d'un site web

L'hébergement : premier levier de l'éco-conception

Les deux éléments sur lesquels nous avons la main pour améliorer l'éco-conception sont le site web lui-même et le choix de son hébergement. L'hébergement regroupe les serveurs ou centres de données sur lesquels le site et son contenu (photos, vidéos, articles, ...) est stocké.

Nous avons sélectionné des serveurs alimentés à l'énergie hydraulique, situés en Europe et proches de chez nous, dont la chaleur est convertie en chauffage, et refroidis à l'air naturel, sans refroidissement à l'eau.

The Green Web Foundation permet de savoir si un site est hébergé de manière durable.

Le site web : second et principal levier de l'éco-conception

Croiser plusieurs métriques

Côté site web, nous pouvons orienter le développement vers l'éco-conception dès le début de sa réalisation. Il s'agit de définir des métriques : des seuils en-dessous lesquels nous considérons qu'un site est simplement conçu, sans notion d'éco-conception. Pour ce faire, PageSpeed, Kastor et Website Carbon représentent de bons évaluateurs. PageSpeed permet de mesurer la performance, l'accessibilité, la qualité et le référencement d'une page web ; c'est la performance qui permet. Kastor mesure l'éco-socio-conception d'une page web tandis que Website Carbon mobilise un modèle poussé pour mesurer l'émission carbone d'un site et fournir un écoindex.

En ajoutant The Green Web Foundation pour l'hébergement ainsi que d'autres outils pour diversifier les mesures, on obtient plusieurs outils fournissant plusieurs métriques, et pouvons croiser celles qui sont déterminantes dans l'éco-conception :

Outil	Hébergement	Eco-conception	Performance	Accessibilité	Qualité	Référencement
Website Carbon
Green Web Foundation
Kastor
Greenoco
Ecograder
PageSpeed

Préférer un site statique

Nous réalisons des sites statiques, c'est à dire des sites dont les pages ne nécessitent aucun calcul côté utilisateur pour en générer le contenu. C'est une méthode en opposition aux sites pré-rendus côté serveur, où une partie du contenu est rendu côté serveur et l'autre partie rendue côté utilisateur. Nous avons donc une génération du site optimisée puisqu'elle n'a lieu qu'une seule fois pour toutes les visites, contre une fois par visite.

Un site pré-rendu côté serveur sera plus particulièrement adapté si des informations doivent être affichées en temps réel ou presque, ou si le contenu est très fréquemment mis à jour, plusieurs fois par jour, ou encore s'il nécessite beaucoup d'interactions utilisateur. C'est le cas de sites e-commerce, d'information en continu ou d'analyses de données interactives par exemple.

Éviter les intégrations dynamiques

Les widgets sont très utiles pour ajouter des fonctionnalités au site sans effort : charger les derniers avis Google, réserver un créneau de rendez-vous, intégrer un chatbot avec des réponses automatiques plutôt que les échanges de mails, pister le comportement des visiteurs du site avec Google Tag Manager, ce qui implique l'ajout d'un bandeau de cookies, afficher une pop-up au chargement de la page ou après le scroll pour inciter l'abonnement à la newsletter... Leur intégration est très souvent motivée par des raisons marketing ou par facilité.

Nous choisissons d'intégrer les outils tiers directement au site, avec échanges API. Par exemple, les avis Google peuvent être intégrés directement au site, évitant ainsi un appel réseau inutile. Nous utilisons les formulaires de contact plutôt que les chatbot et privilégions les analyses respectueuses de la vie privée ne déposant aucun cookies, évitant les bandeaux agaçants forçant à accepter tous les cookies.

Avoir une approche sans script d'abord

Tout script exécuté côté utilisateur impacte fortement son émission carbone. Nous cherchons d'abord à livrer des pages sans script, et en intégrons avec parcimonie le cas échéant. Fournir son adresse email plutôt que de présenter un formulaire de contact, gérer les prises de rendez-vous de vive voix plutôt que via un outil intégré au site... tout dépend du trafic de votre site et de la manière dont vous voulez travailler.

Limiter le superflu

Les animations impressionantes en 3D auront toujours un impact fort sur le ressenti qu'un utilisateur aura en visitant un site. Est-ce pour autant constamment nécessaire ? Plutôt que reproduire par réflexe ce qui nous plaît dans les autres sites, nous remettons d'abord en question leur existence et réflechissons à leur plus-value. Ainsi, nous nous assurons que la présence d'un élément augmantant l'empreinte carbone du site est réellement utile ou pertinente.

Préférer les animations CSS

Les animations légères et les micro-interactions rendent un site plus vivant et indiquent à l'utilisateur qu'il peut interagir. Les plus grosses animations sont à utiliser avec précaution, l'aspect impressionnant pouvant être au détriment de la navigation et perturber la lecture du contenu.

Penser les animations en CSS d'abord pour ne pas ajouter de scripts inutilement à la page web participe à préserver sa légèreté. Lorsque CSS ne suffit plus, JavaScript se présente alors comme une alternative pertinente.

Optimiser les images

Nous optimisons les images une première fois pour en limiter le poids. Nous les optimisons une seconde fois en les convertissant systématiquement au format WebP, adapté au web. Cela peut paraître trivial, mais malheureusement, beaucoup de sites affichent encore des images haute-résolution, sur-dimensionnées par rapport à leur affichage réel.

Embarquer un jeu de polices sobre

Nous utilisons très souvent un couple de polices : une pour les titres, l'autre pour les textes. Parfois, selon le design, une troisième police vient s'ajouter pour servir un propos visuel. Dans tous les cas, les polices sont embarquées dans le site pour réduire les appels réseau à des services tiers.

Limiter la complexité du DOM

Les outils de création de site web comme Wix, Squarespace, Hostinger ou Webflow vont ajouter des balises HTML pour permettre toutes sortes de dispositions de contenu possibles. Cependant, pour chaque page ou section, vous ne choisirez qu'une disposition à la fois. Vous vous retrouvez alors avec une quantité non négligeable d'éléments inutiles, qui vont alourdir le chargement des pages de votre site et impacter négativement son écoindex.

L'éco-conception : une affaire de compromis

Les éléments listés sur cette page sont des leviers concrets pour réduire le coût du chargement et du fonctionnement des pages d'un site web sur un appareil, ordinateur ou mobile. Plus ils sont respectés, plus le site sera écoconçu. Il est pourtant légitime de décider de ne pas respecter certains levier en fonction de l'utilité que présente le site.

Par exemple, un site d'un photographe aura tendance à limiter l'optimisation de ses photographies et préférer de grandes résolutions. Un site mettant en avant les compétences d'animation 3D d'une personne a toutes les raisons de montrer l'étendue de ces compétences à travers des animations spectaculaires. Un site présentant les données météorologiques en temps réel nécessite l'utilisation de scripts de récupération et d'affichage des données.

Chez Piksail, on vous aide justement à trouver le juste milieu pour concevoir un site respectueux de l'environnement en fonction de sa raison d'être.

Découvrir notre approche