Optimiser un site WordPress sous Divi 4 avec LiteSpeed
- Quelques conseils préliminaires
- Du côté de DIVI 4
- 1. Du côté de LiteSpeed : onglet Cache
- 2. Du côté de LiteSpeed : onglet Page Optimization (CSS / JS)
- 3. Du côté de LiteSpeed : onglet Media
- 4. Du côté de LiteSpeed : option QUIC.cloud / CDN si tu l'utilises
- Pour terminer : notre Configuration ultra agressive
Quelques conseils préliminaires
Éviter les doublons d’optimisation : si LiteSpeed minifie, laisse Divi tranquille sur la minification. Le but c’est 1 seul outil qui compresse/minifie.
Builder Divi qui ne charge plus / module qui ne s’affiche pas : dans 90% des cas c’est le “Combine JS” ou le “Delay JS” de LiteSpeed. On les coupe ou on exclut les scripts Divi.
Cache mobile séparé : utile parce que Divi peut charger des ressources différentes.
Tester en mode non connecté : beaucoup de gens testent en admin, mais LiteSpeed ne sert pas le même HTML.
Du côté de DIVI 4
| Option Divi | Recommandation | Pourquoi |
|---|---|---|
| Enable Dynamic Module Framework / Chargement dynamique des modules | Activé | Divi ne charge que ce qui est utilisé sur la page. |
| Dynamic CSS | Activé | Réduit le CSS global de Divi. |
| Critical CSS | Activé | Améliore LCP, surtout mobile. |
| Load Google Fonts Locally | Activé si tu utilises les fonts Divi | Moins de requêtes externes. |
| Use Inline Styles | Désactivé (si LiteSpeed gère bien le cache) | Évite de gonfler le HTML. |
| Improve Google Fonts Loading | Activé | Chargement plus rapide. |
| Limit Icon Fonts Support | Activé + choisir ce que tu utilises | Moins de poids sur les icônes Divi. |
| Defer jQuery And jQuery Migrate | Désactivé si LiteSpeed gère le defer / si plugins sensibles | Évite les conflits. On laisse LiteSpeed le faire. |
| Static CSS File Generation | Activé | Divi génère des fichiers CSS plus légers. |
Si tu as déjà LiteSpeed qui minifie, tu peux laisser Divi sans minification/compression supplémentaire, pour éviter les doublons.
1. Du côté de LiteSpeed : onglet Cache
| Section | Option | Valeur | Notes |
|---|---|---|---|
| Cache | Enable Cache | ON | De base. |
| Cache | Cache Logged-in Users | OFF (sauf si intranet) | Inutile sinon. |
| Cache | Cache Mobile | ON | Divi est responsive, mais un cache mobile dédié évite les surprises. |
| Cache | Separate Mobile View | ON si tu as un menu/builder différent mobile | Divi peut rendre différemment selon device. |
| TTL | Default Public Cache TTL | 86400 (1 jour) | Standard. |
2. Du côté de LiteSpeed : onglet Page Optimization (CSS / JS)
| Option | Valeur | Commentaire |
|---|---|---|
| CSS Minify | ON | OK avec Divi. |
| CSS Combine | OFF (au début) | Divi charge déjà dynamiquement. Combine peut casser ou grossir le fichier. |
| CSS HTTP/2 Push | OFF | HTTP/2 n’en a plus trop besoin. |
| JS Minify | ON | En général OK. |
| JS Combine | OFF (au début) | C’est souvent ça qui casse Divi/builder. |
| Load JS Deferred | ON | Pour le score. Mais il faudra peut-être exclure jQuery quand Divi en a besoin tôt. |
| Deferred JS Delay (Delay JS) | ON | Gros gain Lighthouse. Mais il faudra whitelister les scripts critiques Divi. |
| HTML Minify | ON | Safe. |
Important : dans LiteSpeed → Page Optimization → JS → Exclude from Defer / Delay, prévois d’exclure ce qui touche au builder ou aux menus si tu vois des soucis :
- jquery.js
- jquery-migrate.js
- éventuellement le handle Divi scripts.js (nom exact à vérifier dans le source)
- scripts de menu mobile
3. Du côté de LiteSpeed : onglet Media
| Option | Valeur | Notes |
|---|---|---|
| Lazy Load Images | ON | Gros gain mobile. |
| Lazy Load Iframes | ON | Youtube, maps… |
| Responsive Placeholder | ON | Évite le CLS. |
| Generate WebP | ON (si ton serveur le permet) | Poids d’images réduit. |
| Image Optimization | ON | Litespeed gère très bien. |
4. Du côté de LiteSpeed : option QUIC.cloud / CDN si tu l'utilises
Active le CDN si tu as du trafic hors Europe.
Active HTTP/3 / QUIC.
Laisse le “Guest Mode” et “Guest Optimization” activés : très bons pour les scores PageSpeed.
Pour terminer : notre Configuration ultra agressive
1. Divi — Options du thème → Performance
| Option | Valeur recommandée | Commentaire |
|---|---|---|
| Dynamic Module Framework | ✅ Activé | Charge uniquement les modules utilisés. |
| Dynamic CSS | ✅ Activé | Supprime le CSS global inutile. |
| Critical CSS | ✅ Activé | Améliore LCP et CLS sur mobile. |
| Static CSS File Generation | ✅ Activé | Améliore les temps de build Divi. |
| Load Google Fonts Locally | ✅ Activé | Supprime les requêtes vers fonts.googleapis.com. |
| Improve Google Fonts Loading | ✅ Activé | Précharge et réduit le FOUT. |
| Limit Icon Fonts Support | ✅ Activé | Allège les fichiers Divi icons. |
| Use Inline Styles | 🚫 Désactivé | Évite d’alourdir le HTML. |
| Defer jQuery And jQuery Migrate | 🚫 Désactivé | On laisse LiteSpeed gérer le defer global. |
2. LiteSpeed Cache — Réglages complets
2.1. Cache
| Option | Valeur | Notes |
|---|---|---|
| Enable Cache | ✅ ON | Obligatoire. |
| Cache Logged-in Users | 🚫 OFF | Pas nécessaire. |
| Cache Commenters | 🚫 OFF | Pas d’intérêt sur site vitrine. |
| Cache Mobile | ✅ ON | Pour séparer la vue responsive. |
| Separate Mobile View | ✅ ON | Divi adapte le rendu, c’est plus sûr. |
| Default Public Cache TTL | 86400 (1 jour) | Très bon compromis. |
| Purge All On Upgrade | ✅ ON | Évite les incohérences après MAJ. |
2.2. Page Optimization → CSS / JS / HTML
| Option | Valeur | Commentaire |
|---|---|---|
| CSS Minify | ✅ ON | OK avec Divi. |
| CSS Combine | 🚫 OFF | Combine casse souvent Divi Builder. |
| CSS HTTP/2 Push | 🚫 OFF | Inutile en HTTP/2+. |
| JS Minify | ✅ ON | Gain net. |
| JS Combine | 🚫 OFF | Risque d’erreurs sur les animations Divi. |
| Load JS Deferred | ✅ ON | Déplacer les JS non critiques. |
| Load Inline JS Deferred | ✅ ON | Allège le parsing initial. |
| Delay JS | ✅ ON | Gros gain Lighthouse mobile. |
| HTML Minify | ✅ ON | Sans risque. |
| DNS Prefetch | Ex: fonts.gstatic.com, ajax.googleapis.com | Si utile. |
Scripts à exclure du “Delay JS” (si un bug Divi apparaît) :
Dans LiteSpeed → Page Optimization → JS Settings → Tuning → “Exclude from Delay” ajoute :
jquery.js
jquery-migrate.js
et-builder-modules-global-functions.js
et-core-common.js
2.3. Media
| Option | Valeur | Notes |
|---|---|---|
| Lazy Load Images | ✅ ON | Essentiel pour mobile. |
| Lazy Load Iframes | ✅ ON | Pour YouTube, maps, etc. |
| Responsive Placeholder | ✅ ON | Évite les CLS. |
| LQIP (Low Quality Placeholder) | ✅ ON | Placeholder flouté avant chargement. |
| Generate WebP Versions | ✅ ON | Réduction du poids d’image. |
| Image WebP Replacement | ✅ ON | Remplace automatiquement les JPG/PNG. |
2.4. CDN / QUIC.cloud
Même si tu n’as pas encore de CDN :
- Active QUIC.cloud CDN si ton hébergeur le permet : il sert les fichiers statiques optimisés automatiquement.
- Active HTTP/3 + QUIC dans “Server” si possible.
- Laisse “Guest Mode” et “Guest Optimization” activés → gros impact sur le First Load mobile.
2.5. Database & Heartbeat
| Option | Valeur | Commentaire |
|---|---|---|
| Clean All Revisions | ✅ ON (hebdomadaire) | Allège la base Divi (gourmande). |
| Heartbeat Frontend | OFF | Réduit les requêtes. |
| Heartbeat Backend | 60s | OK pour l’éditeur. |
Recommandation complémentaire
Désactive le “Static CSS” de Divi et vide le cache LiteSpeed après toute grosse mise à jour du thème.
Cela évite les incohérences CSS entre Divi et LiteSpeed.
Teste avec un smartphone réel : PageSpeed est parfois plus sévère que l’expérience réelle.
Mesure après purge totale (LiteSpeed → Manage → Purge All + Purge All CDN).
