Ici c’est un tuto pour LiteSpeed Cache mais tu peux bien sûr utiliser un autre plugin de cache. Un plugin de cache accélère considérablement ton site en créant des copies statiques de tes pages. Au lieu de recalculer chaque page à chaque visite, le serveur sert directement la copie en cache. Résultat : ton site charge beaucoup plus vite.
Pourquoi LiteSpeed Cache ?
Ton template tourne sur Elementor et LiteSpeed Cache est le plugin de cache recommandé sur o2switch (gratuit et optimisé pour leur serveur). Le cache de page seul représente environ 80% du gain de performance.
Installation
- Va dans Extensions > Ajouter
- Recherche « LiteSpeed Cache »
- Installe et active le plugin
Ce qu’il faut activer
Cache
- Activer le cache : ON
- Cache mobile : ON
- Cache des utilisateurs connectés : OFF
Image Optimization
- Lazy Load Images : OFF
- Responsive Placeholders : OFF
- WebP Replacement : ON
⚠️ Pourquoi désactiver le Lazy Load Images ?
LiteSpeed remplace temporairement le src des images par un placeholder transparent en attendant qu’elles entrent dans le viewport. Sur certains widgets (galeries Jeg Elementor Kit, cartes d’articles), le remplacement échoue et l’emplacement reste vide. Mieux vaut compter sur le lazy loading natif HTML (déjà actif via l’attribut loading="lazy" généré par WordPress). WebP Replacement reste utile et ne pose pas ce souci.
Ce qu’il ne faut PAS activer (incompatible avec Elementor)
⚠️ Ces réglages peuvent casser le design de ton site. Laisse-les tous sur OFF :
Page Optimization > CSS
- CSS Minify (Réduire CSS) — peut désynchroniser les styles et casser tout le design
- CSS Combine (Combiner CSS) — incompatible avec le CSS dynamique d’Elementor
- Load CSS Asynchronously — risque d’afficher le site sans aucun style (texte brut)
- UCSS (Generate Unique CSS) — supprime du CSS qu’il juge « inutilisé » mais dont Elementor a besoin (animations, responsive, popups…)
- Inline CSS Async Lib — lié à CSS Async, même risque
Page Optimization > JS
- JS Minify (Réduire JS) — peut casser le chargement des scripts Elementor en modifiant leur structure
- JS Combine (Combiner JS) — peut casser des scripts qui dépendent de l’ordre de chargement
- JS Deferred (Charger JS en différé) — retarde l’exécution des scripts Elementor, empêchant le rendu correct du design
- JS Delay (Delay JS) — trop agressif, peut bloquer les animations et interactions Elementor
Page Optimization > HTML
- HTML Minify — peut poser problème avec certains widgets Elementor
- Google Fonts Async — peut provoquer un flash de texte non stylé (FOUT) au chargement
- Remove Google Fonts : OFF (ton template utilise Google Fonts !)
Paramètres Guest Optimization
- Guest Optimization — OFF. Ce réglage applique des optimisations uniquement aux visiteurs non connectés, ce qui peut donner un design parfait quand tu es connecté mais un site complètement cassé pour tes visiteurs
- Guest Only — OFF. Même raison : crée un décalage entre ce que tu vois et ce que tes visiteurs voient
Quand vider le cache ?
Si tu modifies une page et que le changement ne s’affiche pas :
- Va dans LiteSpeed Cache > Purge > Purge All
- Recharge ta page avec Ctrl+Shift+R (ou Cmd+Shift+R sur Mac)
En cas de problème de design
- Purge le cache (LiteSpeed Cache > Purge > Purge All)
- Si le design est toujours cassé, vérifie dans Page Optimization que toutes les options CSS et JS sont bien sur OFF
- Vérifie aussi que Cache Visiteur est sur OFF (c’est la cause la plus fréquente de design cassé uniquement pour les visiteurs)
- Re-purge le cache
- Vide le cache de ton navigateur (Ctrl+Shift+R)
