Refonte du site Lausanne Marketing: de WordPress à Astro

Un site web, c’est un outil. Et comme tout outil, il finit par montrer ses limites. Après plusieurs années sous WordPress, lausanne.marketing avait besoin d’une refonte en profondeur. Pas un simple lifting visuel, mais une reconstruction complète, pensée pour la performance, la maintenabilité et le SEO.

Voici le retour d’expérience complet sur cette migration vers Astro, avec les choix techniques, les résultats mesurés et les leçons apprises en chemin.

Pourquoi quitter WordPress ?

WordPress reste une solution pertinente pour beaucoup de projets. Mais dans notre cas, les irritants s’étaient accumulés au fil du temps.

Un plafond de performance structurel

Le site tournait bien. Mais chaque optimisation supplémentaire demandait un effort disproportionné pour un gain marginal. Le problème n’était pas la configuration : c’est l’architecture WordPress elle-même qui impose un plancher technique. Base de données, PHP, plugins qui chargent leurs propres scripts et styles. On finit par optimiser autour des contraintes du CMS plutôt que de les éliminer.

Maintenance chronophage

Entre les mises à jour de WordPress core, celles des plugins, les conflits de compatibilité et les patchs de sécurité, la maintenance prenait un temps disproportionné par rapport à la valeur produite. Chaque mise à jour apportait son lot d’incertitudes.

Dépendance aux plugins

Le moindre besoin spécifique passait par l’installation d’un plugin. Formulaire de contact, SEO, cache, sécurité, redirections : la liste s’allongeait et chaque plugin devenait un point de fragilité supplémentaire.

Un site qui ne reflétait plus notre expertise

En tant qu’agence spécialisée en stratégie digitale, notre site devait être un exemple de ce que nous recommandons à nos clients : performance, accessibilité, code propre. L’écart entre notre discours et la réalité technique de notre propre site devenait difficile à justifier.

Le choix d'Astro

Le choix du framework n’a pas été fait à la légère. Plusieurs options ont été évaluées : Next.js, Nuxt, Hugo, Eleventy, et Astro.

Pourquoi pas un autre framework ?

Next.js et Nuxt sont des frameworks puissants, mais conçus pour des applications web avec de l’interactivité côté client. Pour un site vitrine, c’est du surdimensionnement : plus de complexité, plus de JavaScript envoyé au navigateur, plus de surface de maintenance.

Hugo offre d’excellentes performances mais impose un langage de templating rigide (Go templates) qui complique les personnalisations avancées.

Eleventy était un candidat sérieux. Simple, rapide, flexible. Mais Astro apportait un avantage décisif : l’architecture en composants.

Ce qu’Astro apporte

Zéro JavaScript par défaut. Astro génère des pages HTML statiques pures. Le JavaScript n’est chargé que là où il est explicitement nécessaire (menu mobile, formulaires, dark mode). Le reste du site fonctionne sans une seule ligne de JS côté client.

Architecture en composants. Chaque élément du site (header, footer, cards, boutons, grilles) est un composant .astro réutilisable avec des props typées. Le code est modulaire, lisible et maintenable.

Content Collections. Les données sont structurées dans des fichiers YAML, JSON et Markdown avec validation de schéma intégrée. Plus de base de données, plus de requêtes SQL. Le contenu est versionné avec le code dans Git.

Optimisation d’images native. Le composant <Image /> d’Astro convertit automatiquement les images en WebP, les redimensionne et ajoute les attributs width/height pour éviter le layout shift.

Le stack technique retenu

Voici l’ensemble des technologies choisies pour la nouvelle version du site.

Framework et styles

• Astro 5 pour la génération statique et l’architecture en composants
• Tailwind CSS v4 pour le styling utilitaire avec des tokens de design personnalisés
• Phosphor Icons via astro-icon pour l’iconographie

Gestion du contenu : un CMS Git-based

Un des choix les plus structurants de cette refonte a été d’abandonner le modèle base de données + back-office de WordPress au profit d’un CMS Git-based avec Sveltia CMS.

Le principe est simple : le contenu (pages, articles, références) vit dans des fichiers YAML, JSON et Markdown, versionnés dans Git aux côtés du code. Sveltia CMS fournit une interface d’édition visuelle qui commit directement dans le repo GitHub. Pas de base de données, pas d’API propriétaire, pas de vendor lock-in.

Les avantages concrets :

• Chaque modification de contenu est un commit Git : historique complet, rollback instantané, revue possible via pull request
• Le contenu et le code suivent le même workflow : branches, merges, déploiement automatique
• Aucune dépendance serveur : le CMS tourne entièrement dans le navigateur, sans backend à maintenir
• Portabilité totale : si Sveltia CMS disparait demain, le contenu reste dans des fichiers standards, lisibles par n’importe quel autre outil

Ce choix a aussi une dimension stratégique liée à l’IA (voir ci-dessous).

Préparé pour l’ère des agents IA

Ce n’est pas un hasard si nous avons choisi une architecture entièrement basée sur des fichiers et Git. Cette stack est nativement compatible avec les agents IA.

Un agent IA (comme Claude Code, Cursor ou un agent n8n custom) peut :

• Créer et modifier du contenu en éditant directement des fichiers Markdown et YAML dans le repo
• Publier un article en créant un commit et en poussant sur la branche principale
• Mettre à jour les données du site (coordonnées, navigation, SEO) sans passer par une interface graphique
• Déclencher un build et un déploiement via l’API GitHub Actions

Avec WordPress, des solutions existent (API REST, MCP WordPress). Mais l’agent doit composer avec des couches intermédiaires : authentification, endpoints spécifiques, shortcodes de page builders comme Elementor ou Bricks, JSON propriétaire. Ca fonctionne, mais chaque couche ajoute de la complexité et des points de friction inutiles entre l’agent et le contenu.

Avec notre stack, ces couches n’existent pas. L’agent travaille directement avec des fichiers Markdown et YAML dans un dépôt Git. Le chemin entre l’intention et la publication est le plus court possible.

Nous utilisons déjà cette approche au quotidien : cet article a d’ailleurs été rédigé avec l’assistance de Claude Code, directement dans le repo. La boucle contenu/review/publication est entièrement pilotable par des agents, avec un humain dans la boucle pour la validation.

C’est un investissement pour l’avenir. À mesure que les agents IA gagnent en capacité, les sites construits sur des architectures ouvertes et fichier-based seront les premiers à en bénéficier pleinement.

Hébergement et CI/CD

• Cloudflare Pages pour l’hébergement statique gratuit et performant
• Build et déploiement automatiques à chaque push via l’intégration Git de Cloudflare
• Pagefind pour la recherche full-text côté client, indexée au build

Outils complémentaires

• Dark mode natif via CSS custom properties et toggle avec détection automatique des préférences système
• Cloudflare Turnstile pour la protection anti-spam sur les formulaires
• Schema.org / JSON-LD pour les données structurées (Article, FAQ, Organization, Person)

Ce stack a un avantage majeur : aucun serveur à gérer. Le site est entièrement statique, servi depuis un CDN. Pas de base de données, pas de backend, pas de mises à jour de sécurité côté serveur.

Résultats concrets

Les résultats se mesurent sur plusieurs axes : performance, SEO, maintenabilité et coûts.

Performance

Les gains de performance sont les plus visibles :

• Score Lighthouse mobile : 99/100 de manière stable
• Largest Contentful Paint (LCP) : sous les 1.5s sur mobile
• Cumulative Layout Shift (CLS) : quasi nul grâce aux dimensions d’images explicites
• First Input Delay (FID) : négligeable, le site n’envoie quasiment pas de JavaScript

Le site se charge en moins d’une seconde sur une connexion standard. Un niveau de performance quasi impossible à atteindre avec une architecture WordPress classique, quel que soit le niveau d’optimisation.

SEO

La migration a été faite avec un soin particulier pour préserver le référencement existant :

• Redirections 301 pour toutes les URLs qui ont changé
• Données structurées enrichies (Article, FAQPage, BreadcrumbList, Organization)
• Sitemap et robots.txt générés automatiquement
• Canonical URLs sur chaque page
• Open Graph et Twitter Cards systématiques

Le trafic organique n’a subi aucune baisse après la migration. Les Core Web Vitals améliorés ont même contribué à un meilleur positionnement sur certaines requêtes.

Maintenabilité

• Zéro plugin à mettre à jour
• Zéro faille de sécurité côté serveur (pas de serveur)
• Contenu versionné dans Git : chaque modification est traçable et réversible
• Build reproductible : le même code produit toujours le même résultat

Coûts

• Hébergement : gratuit (Cloudflare Pages)
• CDN : inclus (Cloudflare, réseau mondial)
• CMS : gratuit (Sveltia CMS, open source)
• SSL : gratuit et automatique

Le coût d’exploitation est passé à zéro, contre une trentaine de francs par mois pour l’hébergement WordPress précédent. Sur un an, l’économie est significative.

Leçons tirées de la migration

Toute migration comporte ses défis. Voici les enseignements les plus utiles pour ceux qui envisagent une démarche similaire.

Le contenu prend plus de temps que le code

La partie technique de la migration (setup Astro, création des composants, intégration du design) a été la plus rapide grâce à l’IA. Ce qui a pris le plus de temps, c’est la direction artistique et la révision du contenu : réécriture des textes, optimisation des images, vérification des liens, restructuration des pages.

Si vous planifiez une refonte, prévoyez au moins la moitié du temps pour le contenu et le design.

Les redirections sont critiques

Chaque URL de l’ancien site doit pointer vers son équivalent sur le nouveau. Une seule URL oubliée peut entraîner une perte de trafic et de backlinks. Nous avons utilisé un fichier _redirects versionné avec le code pour garantir que rien ne passe entre les mailles du filet.

Le dark mode est plus complexe qu’il n’y paraît

L’implémentation d’un dark mode sur un site statique demande un vrai travail de design system. Chaque couleur du site doit passer par des tokens sémantiques (CSS custom properties) qui basculent entre les modes clair et sombre. C’est un investissement initial conséquent, mais le résultat est nettement plus fiable qu’une approche par overlay mix-blend-mode.

Tester sur de vrais appareils

Les scores Lighthouse en lab ne reflètent pas toujours l’expérience réelle. Nous avons testé sur plusieurs smartphones (entrée de gamme inclus), sur différentes connexions (3G, 4G, Wi-Fi) et dans différents navigateurs. Les résultats étaient systématiquement bons, mais certains ajustements n’auraient pas été détectés sans ces tests terrain.

Documenter chaque décision

Chaque choix technique est documenté dans des fichiers de règles versionnés avec le code. Pourquoi Tailwind plutôt que du CSS pur ? Comment fonctionne le dark mode ? Quelles sont les conventions de spacing ? Cette documentation permet à n’importe quel développeur de reprendre le projet sans période d’adaptation.

Conclusion

Migrer de WordPress vers Astro n’est pas anodin. C’est un investissement en temps et en compétences. Mais pour un site vitrine orienté performance et SEO, les bénéfices sont considérables : un site plus rapide, plus sûr, moins coûteux à opérer et plus agréable à maintenir.

Cette refonte illustre une conviction que nous partageons avec nos clients : la technologie doit servir les objectifs business, pas l’inverse. WordPress servait bien son rôle il y a quelques années. Aujourd’hui, Astro répond mieux à nos exigences de performance, de qualité et de maintenabilité.

Vous envisagez une refonte de votre site web ? Si votre stack actuel freine vos ambitions, c’est peut-être le moment de reconsidérer les fondations.