Illustration d'un vélo stylisé avec des feuilles vertes, symbolisant l'éco-conception

Éco-conception web avec Astro : sobre et performant

· 11 min de lecture · Catégories : site web, entreprise

En bref

J’ai construit ce site avec Astro, un framework moderne qui génère des pages statiques. Résultat : vitesse maximale, sécurité renforcée, empreinte écologique réduite. Le score Lighthouse atteint 100/100 sur tous les critères : performance, accessibilité, SEO, bonnes pratiques. C’était un objectif ambitieux, mais chaque point compte.

L’hébergement est chez o2switch, en France. Les données restent sur le territoire, et la proximité géographique réduit la latence. Pour les statistiques, j’utilise Matomo auto-hébergé plutôt que Google Analytics. Pas de cookies tiers, respect du RGPD par défaut.

Une page web simple consomme environ 0,8 gramme de CO₂. Avec des images lourdes ou des vidéos, ce chiffre peut monter à 8 grammes ou plus. L’enjeu n’est pas anodin, mais il reste proportionné.

Cohérence. Si nos vélos sont pensés pour durer, le site doit l’être aussi.

Introduction

J’ai mis du temps à décider comment faire ce site. Longtemps, j’ai essayé de tout coder en HTML pur. C’était laborieux. Puis j’ai découvert Astro, et ça a changé le rapport.

Dans cet article, j’explique les choix techniques que j’ai faits, et pourquoi ils correspondent à ce que je veux construire avec Racine.

Pourquoi j’ai tourné le dos aux solutions traditionnelles

Lorsqu’on lance une entreprise aujourd’hui, les premières recommandations qu’on reçoit pour créer un site web sont généralement d’utiliser WordPress ou Shopify. Ces plateformes sont populaires pour une bonne raison : elles permettent de mettre en ligne rapidement un site attrayant sans connaissances techniques approfondies.

Cependant, après avoir étudié ces options, j’ai rapidement constaté qu’elles ne correspondaient pas à ma vision pour Racine.

Les limites des CMS traditionnels

Les CMS (Content Management Systems) comme WordPress présentent plusieurs inconvénients :

  • Lourdeur excessive : WordPress est devenu au fil des années une plateforme extrêmement lourde. Un site WordPress typique charge des dizaines de scripts JavaScript, des feuilles de style CSS volumineuses et utilise une base de données, même pour afficher une simple page statique.
  • Coût caché : Entre l’hébergement spécifique, les extensions payantes et les thèmes premium, le coût total peut rapidement grimper.
  • Souveraineté limitée : Avec des plateformes comme Shopify, vos données et votre site sont hébergés sur leurs serveurs, selon leurs conditions, et avec un coût. Chaque économie est bonne à prendre quand on veut proposer des vélos à un prix raisonnable.
  • Maintenance constante : WordPress nécessite des mises à jour régulières pour des raisons de sécurité.

Je cherchais une approche plus directe, plus légère, que je pourrais comprendre et maîtriser entièrement. Une approche qui me permettrait d’apprendre et d’évoluer, tout en restant fidèle à mes principes.

Comment ai-je conçu ce site en prioritisant sobriété et performance ?

Pourquoi ces choix techniques reflètent-ils les valeurs de Racine ?

J’ai opté pour une approche différente : créer un site statique en utilisant des technologies modernes mais légères :

  • Astro comme framework de développement,
  • HTML et CSS purs pour la structure et la mise en forme,
  • Pas de base de données
  • Pas de JavaScript inutile
  • Hosting français chez o2switch

Qu’est-ce qu’un site statique ?

Un site “statique” signifie que les pages web sont générées à l’avance et non à chaque visite d’un utilisateur. Contrairement à un site “dynamique” qui assemble la page en temps réel (en interrogeant une base de données), un site statique est composé de simples fichiers HTML, CSS et JavaScript pré-compilés.

Les avantages sont considérables :

  • Vitesse de chargement extrêmement rapide
  • Sécurité renforcée (pas de base de données à pirater)
  • Empreinte écologique réduite (moins de calculs serveur)
  • Coûts d’hébergement minimisés

Pourquoi j’ai choisi Astro

Astro est un framework web relativement récent qui s’est rapidement imposé comme une référence pour la création de sites performants. Ça me semble être le meilleur compromis après avoir passé du temps (trop) à coder mon site en pure HTML. Voici pourquoi j’ai été séduit par cet outil :

La philosophie “content-first” d’Astro

Astro part d’un principe simple : n’envoyer que le strict nécessaire au navigateur. Sa philosophie “Zero JS by default” signifie qu’il ne charge du JavaScript que lorsque c’est vraiment nécessaire.

Pour un site comme celui de Racine, qui est essentiellement un site vitrine avec un blog, cette approche est idéale.

Logo du framework Astro

Intégration native du Markdown

Le Markdown est un langage de balisage léger qui permet d’écrire du contenu formaté de manière simple. Astro l’intègre nativement, ce qui facilite énormément la gestion du blog.

Pour chaque article, je crée simplement un fichier texte avec l’extension .mdx contenant mon contenu et quelques métadonnées (titre, date, etc.), et Astro s’occupe de le transformer en page HTML optimisée.

Flexibilité et évolutivité

Astro permet d’intégrer progressivement des fonctionnalités plus avancées si nécessaire. Je peux commencer avec un site simple et, au fur et à mesure que Racine grandit, ajouter des composants interactifs sans sacrifier les performances.

Communauté active et open source

Astro est un projet open source, ce qui signifie que son code est disponible publiquement et que n’importe qui peut contribuer à son amélioration. Cette philosophie s’aligne parfaitement avec les valeurs de transparence et de partage que je souhaite incarner avec Racine.

Comment optimise-t-on les performances d’un site éco-conçu ?

Qu’est-ce que Lighthouse ?

Lighthouse est un outil d’audit développé par Google qui permet d’évaluer la qualité d’un site web selon plusieurs critères :

  • Performance : vitesse de chargement et d’affichage
  • Accessibilité : utilisabilité pour les personnes en situation de handicap
  • Bonnes pratiques : respect des standards du web
  • SEO : optimisation pour les moteurs de recherche

L’outil fournit un score de 0 à 100 pour chaque catégorie, ainsi que des recommandations d’amélioration.

Exemple de score Lighthouse élevé

Mon objectif : un score parfait

Je me suis fixé l’objectif ambitieux d’atteindre un score Lighthouse de 100/100 dans toutes les catégories. Ce n’était pas juste pour la satisfaction d’avoir un “score parfait”, mais parce que chaque point représente une amélioration concrète de l’expérience utilisateur et de l’impact environnemental du site.

Mesures concrètes mises en place

Performance

  • Optimisation manuelle des images : chaque image est redimensionnée à la taille exacte nécessaire, compressée et convertie en formats modernes comme WebP.
  • Chargement paresseux (lazy loading) : les images ne sont chargées que lorsqu’elles entrent dans le champ de vision de l’utilisateur.
  • Minification des fichiers : tout le code HTML, CSS et JavaScript est “minifié” pour réduire sa taille.
  • Utilisation minimale de JavaScript : uniquement quand c’est absolument nécessaire.

Accessibilité

L’accessibilité web (WCAG et RGAA) désigne la capacité d’un site à être utilisé par tous, y compris les personnes en situation de handicap. J’ai mis en place :

  • Contraste élevé entre le texte et l’arrière-plan pour faciliter la lecture
  • Textes alternatifs pour toutes les images
  • Structure sémantique avec des balises HTML appropriées (header, nav, main, footer, etc.)
  • Navigation au clavier fonctionnelle
  • Balises ARIA pour améliorer la compatibilité avec les lecteurs d’écran

Ces attributs ARIA (Accessible Rich Internet Applications) sont des attributs supplémentaires qui améliorent l’accessibilité des éléments interactifs pour les technologies d’assistance.

Pourquoi un design minimaliste est-il plus écologique et plus lisible ?

Typographie optimisée

J’ai choisi une typographie système qui utilise les polices déjà installées sur l’appareil de l’utilisateur, évitant ainsi le chargement de fichiers de polices externes. Cette approche réduit considérablement le poids de la page tout en maintenant une esthétique soignée.

Interface minimaliste et fonctionnelle

Le design du site Racine est volontairement épuré :

  • Navigation simple et intuitive
  • Espacement généreux pour améliorer la lisibilité
  • Palette de couleurs limitée
  • Absence d’animations superflues
  • Priorité au contenu utile plutôt qu’aux effets visuels

Cette approche s’inspire en partie du site Low-tech Magazine, qui pousse la sobriété numérique à l’extrême avec un site alimenté à l’énergie solaire.

Comment respecter la vie privée des visiteurs sans sacrifier l’analyse ?

Analyse d’audience respectueuse

Pour comprendre comment les visiteurs utilisent le site, j’ai choisi Matomo (anciennement Piwik), une alternative open source à Google Analytics. Contrairement à ce dernier, Matomo :

  • Est auto-hébergé sur mes propres serveurs
  • Respecte le RGPD en ne partageant aucune donnée avec des tiers
  • Offre une option d’anonymisation des IP
  • Ne dépose pas de cookies tiers
  • Respecte le signal “Do Not Track”

Logo de Matomo, solution d'analytique web open source

Hébergement français et responsable

J’ai choisi d’héberger le site chez o2switch, un hébergeur français auvergnat qui utilise des datacenters situés en France. Cela offre plusieurs avantages :

  • Souveraineté des données : les données restent sur le territoire français
  • Respect du RGPD facilité
  • Soutien à l’économie locale
  • Réduction de l’empreinte carbone grâce à un hébergement plus proche des utilisateurs français

Le site web comme extension de la marque

Ce que ça dit concrètement

Le site web de Racine n’est pas qu’un outil marketing. C’est une façon de pratiquer ce que je prêche :

  • Durabilité : un site conçu pour durer, facile à maintenir – à l’image de nos cadres en acier pensés pour traverser les décennies
  • Accessibilité : tant par son prix abordable que par son usage inclusif
  • Transparence : code open source, explications claires des choix techniques
  • Souveraineté : maîtrise complète de la technologie utilisée

Pourquoi ça compte

Si je conçois des vélos pensés pour durer, être réparables et avoir un faible impact environnemental, un site web énergivore et opaque serait une contradiction évidente.

Ce n’est pas juste une question d’image. C’est une question de cohérence.

Quel est l’impact réel du numérique sur l’environnement ?

L’impact du numérique : ni minimiser, ni dramatiser

Quelques chiffres pour situer les choses :

  • Le secteur numérique représente environ 3-4% des émissions mondiales de gaz à effet de serre, (et ce chiffre ne semble pas compter les évolutions récente de l’IA)
  • C’est significatif, mais bien plus que l’aviation (≈2%), mais moins que l’industrie de la viande (≈15%) ou le transport routier (≈18%)
  • La consultation d’une simple page Web consommerait à elle seule environ 0,8 gramme de carbone, le chiffre étant multiplié par 10 pour une page enrichie d’images complexes ou de vidéos. A titre de comparaison et pour remettre en perspective, un steak de bœuf c’est une dizaine de kilos de CO2 émis, une bière 700g, une voiture c’est environ 100g de CO2/km.

Cela ne signifie pas qu’il faut ignorer l’empreinte environnementale du web, mais plutôt l’aborder avec pragmatisme.

Agir à son échelle

L’éco-conception web n’est pas une solution miracle aux problèmes environnementaux, mais c’est un pas dans la bonne direction. En tant qu’entrepreneur, je considère qu’il est de ma responsabilité d’agir là où j’ai le pouvoir d’agir, sans critiquer les autres solutions mais en proposant et en agissant pour ma vision.

Comme pour les vélos Racine, l’objectif n’est pas la perfection absolue (rien est parfait, ou alors à quel coût ?), mais une amélioration significative par rapport aux pratiques standards.

Conclusion : simplicité, cohérence et accessibilité

Est-ce que c’est le site web parfait d’un point de vue environnemental ? Non. Un tel site serait probablement… inexistant ! Mais c’est un site que je comprends entièrement, que je peux faire évoluer sans dépendre d’un prestataire, et qui ne charge que ce dont il a besoin. Pour une marque qui fabrique des vélos qu’on répare soi-même, c’est cohérent.

Se lancer est plus accessible qu’on ne le pense

Si vous envisagez de créer ou de refondre un site web pour vous ou votre entreprise, sachez que l’approche que j’ai décrite ici est aujourd’hui très accessible :

  • Les frameworks comme Astro, Hugo ou 11ty (Eleventy) simplifient grandement la création de sites statiques
  • De nombreuses ressources gratuites existent pour apprendre les bases du HTML, CSS et JavaScript (et de tous les langages de programmation d’ailleurs)
  • Des communautés actives sont prêtes à aider les débutants

Une invitation à la cohérence

Plus qu’un simple exercice technique, la création du site de Racine a été pour moi une façon de mettre en pratique une conviction profonde : nos valeurs doivent se refléter dans chacune de nos actions, y compris dans nos choix numériques.

Car au fond, l’éco-conception web n’est qu’une extension logique d’une démarche plus globale : créer des produits et des services qui respectent à la fois les utilisateurs et l’environnement dans lequel nous vivons tous.

Pour aller plus loin dans l’éco-conception web

Si les principes que j’ai partagés dans cet article vous inspirent, voici quelques ressources pour approfondir le sujet de l’éco-conception web dont je me suis moi même inspiré :

Ressources pédagogiques

Outils techniques

Communautés

Formations

Vous avez des questions sur l’approche technique utilisée pour le site de Racine ou des suggestions pour améliorer notre site ? N’hésitez pas à me contacter par mail à victor.deweerdt@velos-racine.fr.

Articles similaires

Le premier cadre Racine, fabriqué en France chez MILC