Avertissement : ce résultat est obtenu sur un thème WP correctement codé (Astra Pro, dans ce cas). Si votre thème embarque 14 sliders, 8 polices Google et un Header Builder en JS, aucun plugin ne sauvera votre score. La perf, c'est 70 % le thème, 30 % le reste.
Le point de départ
Site WooCommerce fashionhouse.fr (anonymisé), 1 200 produits, ~80 000 visites/mois. Avant intervention :
- LCP : 4,8 s (mauvais)
- CLS : 0,38 (mauvais)
- INP : 320 ms (à améliorer)
- Score PageSpeed mobile : 42
Stack final
Voici exactement ce qu'on a utilisé :
- WordPress 6.5 + WooCommerce 8.7
- Thème Astra Pro (light build)
- Alesta AI v1.3 (modules Performance + Médias)
- Cloudflare (plan Free suffit)
- Hébergement : o2switch (5,99 €/mois)
Étape 1 — Audit avec Alesta
Le module Core Web Vitals scanne le site et liste tout ce qui pèche en CWV. On le lance en premier pour avoir une liste de tâches priorisée, pas pour le perf-score immédiat.
L'audit a remonté 47 problèmes. 80 % du score perdu venait de 3 d'entre eux : images
non-optimisées (3,2 Mo de PNG sur la page d'accueil), JS bloquant (jQuery + 8 scripts
tiers), polices Google chargées sans display=swap.
Étape 2 — Images (le gain #1)
Le quick-win le plus rentable, toujours. On active deux modules : Conversion WebP en batch sur toute la médiathèque, puis Compression auto pour les images uploadées dans le futur.
Résultat : 3,2 Mo → 480 Ko sur la home. Gain LCP : -2,1 s. Le seul vrai effort, c'est de relancer le batch après chaque upload massif.
On active aussi Lazy loading pour différer le chargement des images sous la ligne de flottaison (loading="lazy" + IntersectionObserver fallback).
Étape 3 — JS / CSS
Le module Minification CSS/JS fait un travail propre — il combine, minifie et critical-pathe le CSS au-dessus du fold. Réglages utilisés :
- CSS critical inline : activé
- JS defer : activé (sauf scripts checkout)
- JS async : réservé aux scripts analytics
- jQuery : gardé (WooCommerce en dépend), mais déplacé en footer
Gain INP : -180 ms. C'est ici qu'on a le plus de risque de casser quelque chose — toujours tester checkout + recherche + filtre Woo après activation.
Étape 4 — Cache & .htaccess
Le module Cache & .htaccess génère un cache disque full-page + un .htaccess optimisé (compression Brotli, headers cache long pour assets, redirections HTTP→HTTPS sans saut intermédiaire).
Un détail souvent oublié : vider le cache après chaque deploy WooCommerce. Alesta le fait automatiquement sur "publier produit" — un mini-soulagement.
Étape 5 — Polices & tiers
Les polices Google Fonts via CDN sont une plaie pour le LCP. On les a auto-hébergées (Alesta a
un sous-module qui le fait) avec font-display: swap et preload sur
les variantes critiques.
Pour les scripts tiers (analytics, chat, pixel) : on a tout reporté à l'interaction (premier scroll ou premier clic). Aucun n'est chargé au paint initial.
Étape 6 — BDD & nettoyage
Le module Nettoyage BDD a supprimé : 47 000 révisions d'articles, 12 000 commentaires spam non détectés, 380 transients expirés. Taille BDD : 412 Mo → 138 Mo. TTFB : -120 ms.
Étape 7 — Cloudflare
Cloudflare plan Free, juste activé en CDN sans Workers. Réglages spécifiques :
- Auto Minify : désactivé (Alesta le fait mieux côté serveur)
- Brotli : activé
- Rocket Loader : désactivé (casse souvent JS Woo)
- Cache Level : Standard
- Always Online : activé
Le résultat
| Métrique | Avant | Après | Évolution |
|---|---|---|---|
| PageSpeed mobile | 42 | 98 | +56 pts |
| PageSpeed desktop | 71 | 100 | +29 pts |
| LCP | 4,8 s | 1,4 s | -71 % |
| CLS | 0,38 | 0,02 | -95 % |
| INP | 320 ms | 110 ms | -66 % |
| Taille page d'accueil | 4,1 Mo | 720 Ko | -82 % |
| Taux de rebond mobile | 62 % | 34 % | -45 % |
Ce que cette recette ne fera pas
Honnêtement :
- Si votre thème est mal codé, vous plafonnerez à ~70-80. Changez de thème avant tout.
- Si vous avez 30 plugins, désactivez-en 20 avant de toucher au perf. Le poids cumulé tue.
- Page builders lourds (Elementor non-optimisé) = -15 points minimum. Migrez vers Bricks ou Astra Builder.
Conclusion
La perf n'est pas un sujet d'expert : c'est une discipline d'ordre d'exécution. Audit → images → JS/CSS → cache → BDD → CDN. Dans cet ordre. Alesta automatise 90 % du travail, mais c'est votre rigueur qui fait le delta final.
