Comment nous avons conçu un des sites les plus légers du monde

L'écoconception web est une approche visant à minimiser l'empreinte carbone d'un site ou d'une application web. C'est une histoire de compromis à plusieurs niveaux : technique et fonctionnalités, design et légèreté, contenu et sobriété. Découvrez notre approche qui nous a permis d'atteindre le top 1% mondial pour le site d'une de nos clientes.

Des pages web statiques pour un site vitrine

Le site est celui de Lisa, Avocate au barreau de Vannes spécialisée en droit des étrangers. Le site a pour but de présenter son activité et son parcours, lister ses domaines d'intervention, afficher les informations juridiques propres au métier d'avocat (honoraires et recours) et lister ses informations de contact.

Lisa ne souhaite pas alimenter d'articles de presse ou de contenu relatifs à l'actualité de son activité via le site ; il s'agit donc d'un site vitrine. C'est là que le premier élément décisif se joue : choisir l'outil adapté pour la réalisation technique. Nous aurions pu choisir WordPress, ou des alternatives de constructeur de site plus récentes comme Webstudio, mais cela signifie sous-utiliser ces outils. WordPress étant adapté pour les sites au contenu changeant fréquemment, nous aurions d'une part les pages du sites regénérées inutilement à chaque visite du site (alors que le contenu ne change pas) et d'autre part un tableau de bord et tout un système d'édition de pages et de contenu inutilisé (car les pages sont conçues, codées et optimisées par nos soins).

Nous avons choisi de coder le site et de générer ses pages une seule fois en amont, avec Astro. Le site est ainsi composé de pages statiques, déjà prêtes à la lecture, et évite la génération des pages à chaque visite, réduisant l'émission carbone du site.

Un contenu simple pour un site clair

Des pages adaptées

Une page, une intention de recherche. C'est une des règles d'or du SEO qui se trouve aussi être adaptée pour la structuration d'un site en pages. Une page avec trop peu de contenu risque de ne pas répondre aux attentes d'un visiteur entraîner un clic - donc une page à charger - supplémentaire. A l'inverse, une page trop dense en contenu noie l'information et présente plus d'éléments à charger que nécessaire.

Le site de Lisa est structuré raisonablement :

• Une page d'accueil qui donne le ton et fait le lien avec le reste des pages du site
• Une page de présentation pour les visiteurs souhaitant en savoir plus sur son parcours
• Une page listant ses domaines d'intervention avec précision
• Une page présentant les modalités de ses honoraires
• Une page de contact pour lister les moyens de la joindre et se rendre à son cabinet
• Une page de mentions légales

Un contenu efficace

Le contenu du site ne cherche pas à séduire les moteurs de recherche outre mesure ni à surcaptiver l'attention du visiteur. Au contraire, le contenu à été rédigé comme a été pensé internet à l'origine : transmettre de l'information. Les textes sont concis, les photographies peu nombreuses illustrent le propos ou décorent le site sans perturber la lecture, les éléments cliquables servent la navigation ou la traduction des textes en anglais.

Aucun élément n'alourdit le chargement des pages ou la charge mentale.

Des scripts utiles uniquement

Deux scripts sont intégrés au site, dont le premier est minimaliste :

• L'affichage du menu au format mobile
• Les webanalytics conformes aux normes RGPD (avec Umami)

Hormis ces deux éléments essentiels, aucun script mobilisant les ressources navigateur du visiteur n'est présent. Contrairement à la majorité des sites web aujourd'hui, il n'y a pas de pop-up intempestive, de modal d'abonnement à une newsletter interrompant la lecture, pas de pistage ni de collecte de données indésirables, pas d'encart publicitaire ni de bandeau de cookies, pas d'incitation à laisser un avis Google ou Trustpilot collée à l'écran. C'est d'autant moins de ressources à charger depuis des fournisseurs externes et à afficher à l'écran.

La page de contact affiche une carte situant le cabinet dans Vannes. Une simple capture d'écran permet de charger une image légère, plutôt qu'une intégration embarquant un service complet de géolocalisation et de cartographie.

Un design épuré pour un site léger

Parce-que le métier d'avocat s'y prête bien, nous avons conçu un design épuré pour le site de Lisa. Une attention particulière a été portée sur le choix typographique et le jeu de couleurs. Ainsi, pas de vidéo haute définition ni de photographie haute résolution, pas d'animation complexe ni d'effets coûteux en ressources. Au contraire, chaque élément du design porte un sens : un fond clair pour la solennité, une police d'écriture serif (Lustria) pour la rigueur et des teintes pastel (rose, lavande) pour l'humanité.

Une unique police d'écriture

Lustria est une police d'écriture ne comportant qu'une graisse. Contrairement à certaines conventions du design web, au lieu d'avoir une police pour le titre (police de titrage) et une autre pour les textes (police de labeur), nous utilisons la même police pour les deux rôles, en jouant avec la taille pour les différencier.

Nous embarquons la police d'écriture avec le site de Lisa en la téléchargeant depuis Fontsource. Cela évite d'aller charger la police depuis un fournisseur externe à chaque première visite du site, ou plus en fonction du cache du visiteur.

Au-delà de l'écoconception du site web

Tous ces éléments nous permettent de réduire drastiquement l'empreinte carbone de nos sites web dont celui de Lisa. Un dernier levier pour aller plus loin est celui de l'hébergement.

Un hébergement durable et écoresponsable

Comme indiqué dans notre démarche pour l'écoconception, nous sélectionnons des serveurs durables situés en Europe qui sont alimentés à l'énergie hydraulique. La chaleur produite par ces serveurs est convertie en chauffage et l'air naturel (plutôt que l'eau) les refroidit. Le cycle de vie de ces serveurs est étendu pour minimiser le gaspillage de ressources matérielles (plus d'information sur le cycle de vie des serveurs Hetzner).

Nous avons obtenu un excellent écoindex (A+) et un haut placement puisque Website Carbon nous place dans le top 1% mondial. Consultez l'audit complet pour avoir plus de détails sur les scores atteint par le site de Lisa, ou découvrez comment mesurer l'empreinte carbone d'un site web.