Entreprise ACM : site e-commerce spécialisé dans l’aménagement intérieur et l’équipement de la maison. Solution historique WordPress/WooCommerce devenue lente, difficile à maintenir et peu performante au regard des Core Web Vitals.
Retour au portfolio
ACM : Refonte E-commerce avec Astro, Express & WordPress
Le Contexte
Contexte client
Problématique
Le site existant souffrait de trois maux : un thème WordPress monolithique aux performances dégradées, une exposition des clés API WooCommerce dans le bundle JavaScript, et un processus de déploiement manuel source d’erreurs.
Performance
Le score Lighthouse desktop plafonnait à 78. Le Cumulative Layout Shift dépassait 0.25 sur mobile. Le temps d’interactivité (INP) atteignait 380 ms.
Sécurité
Les clés consumer_key et consumer_secret de WooCommerce étaient accessibles en clair dans le bundle JavaScript via les variables d’environnement.
Déploiement
Aucun environnement de test. Chaque modification était poussée directement en production.
Solution retenue
Architecture Astro SSR + Express proxy déployée sur hébergement privée : le front-end moderne en Astro/React dialogue avec WordPress/WooCommerce via un proxy API sécurisé.
- Date : Semaine 1-2
Audit & Analyse
Audit Lighthouse, identification des fuites de clés API, cartographie des routes WooCommerce à migrer.
- Date : Semaine 3-6
Migration Front-end
Refonte en Astro SSR, composants React, styles Tailwind CSS. Reconstruction des pages produits et catégories.
- Date : Semaine 7-8
Sécurisation & Proxy
Développement du proxy Express, déplacement des credentials côté serveur, suppression des variables exposées.
- Date : Semaine 9-10
Déploiement & QA
Mise en production, tests Core Web Vitals, vérification SEO et indexation.
Analyse Technique : advanced
Architecture Proxy
BrowserFrontend Astro
→ProxyExpress Sécurisé
→APIWordPress/Woo
Architecture Proxy Express
Le serveur Express agit comme intermédiaire unique entre le navigateur et les API WordPress/WooCommerce. Tous les appels API transitent par api.domaine-exemple.com, les credentials sont stockés côté serveur dans les variables d’environnement .env. Le navigateur ne voit jamais les clés.
🛠️
Protection anti-indexation preprod
Sur la version de preprod, toutes les précautions ont été prises pour éviter l’indexation inutile et potentiellement risquée : directives Disallow dans le robots.txt, blocage via htaccess, et balises meta + en-têtes X-Robots-Tag (noindex, nofollow, noarchive, nosnippet, noimageindex) injectés côté serveur.
Résultats
Desktop
100
Performance
100
Accessibilité
91
Bonnes pratiques
100
SEO
Mobile
91
Performance
96
Accessibilité
91
Bonnes pratiques
100
SEO
CLS
0,05
Cumulative Layout Shift
INP
32 ms
Interaction to Next Paint
Lighthouse : de 78 à 100 sur desktop, de 68 à 91 sur mobile. Le CLS passe de 0.25 à 0.05. L’INP chute de 380 ms à 32 ms. Les clés API ne sont plus exposées dans le bundle : vérification par analyse du source map.
i
Score mobile vs desktop
Google applique un scoring Lighthouse bien plus agressif sur mobile : le throttle CPU est x6, la bande passante est réduite (simulant une connexion 3G/4G), et les Core Web Vitals sont évalués dans des conditions plus strictes. Il est donc tout à fait normal d’obtenir un score mobile inférieur au score desktop, même avec une optimisation poussée. Un écart de 15 à 20 points entre les deux est courant et ne reflète pas un défaut de performance réel.
Amélioration
WordPress/WooCommerce
Ancienne architecture
- Thème WordPress monolithique
- Clés API exposées dans le bundle JS
- Lighthouse Desktop : 78/100
- CLS > 0.25, INP 380 ms
- Déploiement manuel et directement en production
Astro SSR + Express Proxy
Nouvelle architecture
- Astro SSR + composants React
- Credentials sécurisés côté serveur
- Lighthouse Desktop : 100/100
- CLS 0.05, INP 32 ms
- CI/CD avec environnements de test
| Métrique | Avant (WordPress) | Après (Astro) | Gain |
|---|---|---|---|
| Lighthouse Desktop | 78/100 | 100/100 | +28% |
| Lighthouse Mobile | 68/100 | 91/100 | +34% |
| CLS | 0.25 | 0.05 | -80% |
| INP | 380 ms | 32 ms | -92% |
| Clés API exposées | Oui | Non | Sécurisé |
| Environnements | Production unique | Dev + Staging + Prod | 3 environnements |
Stack Technologique
Technologies utilisées
Orfèvre Digital
Prêt à lancer votre projet ?
Je donne vie à vos idées en créant des sites web et applications intuitifs, esthétiques et fonctionnels.
Disponible
Chapitres de l'étude de cas
1+6
Recommandé
Architecture Proxy + SSR unifiée
Comment structurer un site Astro en SSR avec un proxy Express intégré pour dialoguer avec WordPress et WooCommerce sans exposer les clés API.
Brouillon
Recommandé
Déploiement complet sur o2switch avec Passenger
Procédure pas à pas pour déployer un site Astro SSR + proxy Express sur un hébergement o2switch, avec Passenger, le fichier app.js et le .htaccess.
Brouillon
Recommandé
Gestion des environnements multiples (dev, test, prod)
Comment gérer l'URL du proxy API selon l'environnement : développement local, serveur de test et production, sans tout reconfigurer à chaque build.
Brouillon
Recommandé
Gestion des catégories API WordPress et WooCommerce
Ajout des endpoints catégories manquants sur le proxy o2switch pour permettre au front-end de récupérer les catégories de blog et de produits.
Brouillon
Recommandé
Bloquer l'indexation d'un site de test sur o2switch
Comment configurer le .htaccess d'un sous-domaine de test pour empêcher Google d'indexer le site, tout en conservant les performances et les redirections SEO.
Brouillon
Recommandé
Remplacer astro preview par un serveur Express complet
Pourquoi astro preview ne fonctionnait pas avec les routes proxy, et comment le remplacer par un serveur Express unifié qui sert le rendu Astro ET le proxy API.
Brouillon
Recommandé
Sécurité des clés API WooCommerce
Comment éviter d'exposer les clés WooCommerce (consumer_key, consumer_secret) dans le bundle JavaScript côté client en passant par un proxy serveur.
Articles Connexes
3+2
Connexe
SEO et Performance Web : Les Deux Piliers de la Visibilité en Ligne
Maîtrisez les fondamentaux du SEO et de la performance web : Core Web Vitals, audits, optimisation des assets, contenu optimisé et stratégie d'amélioration continue.
Cluster
Brouillon
Connexe
Composants React
Créez des composants React réutilisables avec les patterns Atom/Molecule/Organism. Maîtrisez les props, le state et la composition de composants.
Cluster
Connexe
Astro : Le Framework Web Orienté Contenu
Astro est le framework web optimisé pour le contenu. Créez des sites rapides avec l'architecture Islands, zéro JavaScript par défaut et multi-frameworks.
Cluster
Brouillon
Connexe
HTML Sémantique : Structurez vos Pages pour le SEO
Maîtrisez les balises sémantiques HTML5 pour votre SEO, accessibilité et maintenabilité. Guide complet : balises, exemples et checklist de validation.
Cluster
Prérequis
PHP : Le Langage Serveur le Plus Déployé au Monde
PHP alimente 77% des sites web. Maîtrisez ses versions modernes (PHP 8+), sa POO, son écosystème Composer et ses frameworks (Symfony, Laravel).
Inspiration
Découvrez d'autres projets
Développement 21 juillet 2026
Bao-Link Documentation : De WordPress à un Écosystème Centré Utilisateur
Le projet Bao-Link raconte l'évolution du site et de ses outils: la création d'un premier site WordPress vitrine, puis le passage à Astro avec un site 100% sur mesure, sans template, centré sur le SEO et l'expérience utilisateur ainsi que les projets liés : diag-application et personas.
Astro WordPress # Migration
Voir le projet 
Développement 16 juillet 2026
Soair : La Transition Numérique Complète
Étude de cas complète : création d'un site WordPress professionnel puis migration vers Hugo pour des performances optimales et un SEO décuplé.
# Soair WordPress Hugo
Voir le projet 
Développement 1 juin 2026
Ideeri Documentation : Application SaaS Immobilière
Regroupement des études de cas sur le développement de l'application SaaS immobilière Ideeri : interface professionnelle et interface particulier.
# SaaS # Immobilier React
Voir le projet
Prêt pour l'aventure
Prêt à lancer
votre projet ?
Discutons ensemble de vos objectifs et transformons votre vision en une réalité performante et pérenne.
