Tutoriel LiteSpeed Cache – Le meilleur plugin de performances pour WordPress

LiteSpeed Cache est le meilleur plugin de WordPress pour optimiser les WebPerfs de son site. Il est :

• 🥰 Gratuit (ton hébergement te le fournit)
• 💪 Très puissant

Ceci dit, il n’est pas forcément évident à manipuler. Il nous permet certes d’aller très loin, mais c’est également très facile de faire n’importe quoi.

C’est pourquoi je t’ai concocté un tutoriel bien badass pour t’aider à l’utiliser correctement. Et ce, même si tu es un complet débutant.

Bien que je ne couvre pas TOUTES ses fonctionnalités dans ce dernier, tu seras amplement capable de te débrouiller avec. Et surtout, d’avoir de très bonnes performances, sans casser ton site.

Bref. Prêt à taper des gros scores sur PageSpeed Inisght ?

Accès rapide aux différentes sections de ce tuto

Avant de démarrer

Avant de démarrer les optimisations, je t’invite à auditer les performances de ton site via PageSpeed Inisght et WebPageTest.

Défini les réglages suivant sur WPT pour des résultats plus précis (dans Advanced Configuration) :

De cette manière, tu pourras comparer les performances de ton site avant et après. Je suis curieux de connaitre les résultats. 😁

☝️ Ton site génère du trafic, voir de l’argent ? Evite de alors de tenter tes optimisations en live. Crée une sauvegarde de ton site, puis réinstalle une version de « teste » sur un autre nom de domaine (ne crée pas de staging, généralement LiteSpeed n’est pas actif dans cet environnement).

Rapide présentation de panel Admin de LiteSpeed

Une fois le plugin installé, le panel Admin ressemble à ça :

✅ = Nous verrons cet onglet dans ce tutoriel.
❌ = Nous ne verrons pas cet onglet (réservé pour d’autres articles).

Il faut impérativement que ton hébergement soit dôté de la techno LiteSpeed pour pouvoir bénéficier de ses optimisations. Tu peux consulter cet article : Activer LiteSpeed sur son hébergement web

Réglages Généraux de LiteSpeed (onglet Général)

Dans cet onglet, il n’y a pas grand-chose à toucher par défaut.

1. Clé de domaine : Clique sur le bouton « Demander ma clé de domaine » si ce n’est pas déjà fait.

Il est impératif de demander une « clé de domaine » afin d’activer les services QUIC.cloud pour activer les différentes optimisations de LiteSpeed.

2. Mode Visiteur : Conditionnel ✅❌

Il s’agit d’une optimisation intéressante pour servir une page en cache « par défaut », très légère, à l’utilisateur pour la première page qu’il consulte. Cela peut-être un énorme gain de performance, mais il y a des inconvénients.

Pour faire simple :

➡️ Si ton site est un site vitrine, tu peux l’activer. ✅

➡️ Si ton site est multilingue ou présente des variations de contenus en fonction de certains paramètres utilisateurs, ne l’active pas. ❌

Teste bien ton site en navigation privée pour être certain que tout fonctionne bien. Petit conseil : teste ton site après 10-15 minutes à partir du moment où tu as activé cette fonctionnalité.

3. Optimisation visiteurs : Ne l’active pas. ❌

Alors ça l’ami, c’est une optimisation atomique. Mais je ne te recommande pas de l’activer. Assez simplement, cette fonctionnalité fonctionne en addition avec le « mode visiteur ». LiteSpeed va non seulement servir une page en cache par défaut, mais en plus y appliquer TOUTES les optimisations les plus hard dessus.

C’est intéressant pour taper les 100/100 sur PSI et autres outils d’audits, mais ça ne te donnera pas un réel aperçu des performances de ton site dans sa globalité. Donc fais l’impasse sur cette fonctionnalité.

On en a terminé avec cet onglet. On passe à la suite !

Réglages du Cache !

Onglet : Cache

1. Activer la mise en cache

C’est la fonctionnalité de base : sans elle, pas de cache, pas de miracle ! Lorsque tu l’actives, LiteSpeed va commencer à mettre en cache tes pages.

Conseil : Laisse-le activer, sauf si tu as une configuration très spécifique (du genre un site dont le contenu change en continu en temps réel). Si jamais tu le désactives, sache que tout le cache sera purgé.

2. Mettre en cache les utilisateurs connectés

Cette option permet de créer une version en cache pour les utilisateurs identifiés. Ça peut être intéressant si ton site est majoritairement consulté par des membres (ex. forum ou espace membres).

Pour faire simple :

– Si tes utilisateurs connectés ont besoin d’un contenu personnalisé (tableau de bord unique, infos sensibles, etc.), désactive-le ❌.

– Si la plupart des pages sont les mêmes pour tous les utilisateurs connectés, tu peux tenter de l’activer ✅.

Attention : Fais des tests en navigation privée pour être sûr que chacun voit ce qu’il doit voir.

3. Mettre en cache les commentateurs

En activant ce réglage, LiteSpeed mettra aussi en cache les pages visitées par ceux qui laissent des commentaires. Pas forcément indispensable si tu n’as pas beaucoup de discussions, mais ça ne fait pas de mal pour la performance.

Note : Si tu désactives, seules les pages sans commentaires en attente pourront être mises en cache.

4. Mettre en cache l’API REST

L’API REST est utilisée par WordPress (et parfois des extensions) pour récupérer ou envoyer des données. Activer le cache dessus peut alléger la charge du serveur, mais ça peut aussi poser problème si tu utilises des fonctionnalités qui nécessitent une réponse dynamique.

💡 Mon conseil : Laisse-le inactif pour la majorité des sites. Active-le uniquement si tu sais précisément ce que tu fais et que tes appels REST n’ont pas besoin de réponses en temps réel.

5. Mettre en cache la page de connexion

C’est un petit gain possible pour les sites où la page de login est consultée fréquemment. Mais attention : la page de connexion reste une page dynamique qui doit gérer la sécurité et les sessions utilisateurs.

À tester : Si tu as peu de connexions par jour, ça n’aura pas un impact monstrueux. De base, je le laisse inactif pour éviter tout souci d’authentification.

6. Ressources PHP de cache

Certaines extensions ou thèmes chargent des ressources PHP sur tes pages. Activer ce cache peut aider à réduire la charge serveur.

Généralement, il s’agit de CSS et de JS encapsulé dans les fichiers de ton thème. Donc tu peux l’activer sans prendre trop de risque normalement.

À savoir : Ça va modifier ton fichier .htaccess et peut, dans de rares cas, causer des conflits. C’est rare mais au moins tu le sais.

7. Cache mobile

Si tu as un thème responsive (c’est la norme aujourd’hui), tu n’en as pas forcément besoin. En revanche, si ton site sert une version vraiment différente sur mobile (thème mobile distinct, plugin spécial), active cette option.

Note importante : En l’activant, LiteSpeed va créer un cache séparé pour chaque type d’appareil mobile détecté. Prévois de vérifier si ta version mobile s’affiche correctement.

8. Liste des agents utilisateurs mobile

Lorsque le Cache mobile est actif, LiteSpeed se base sur cette liste pour identifier les navigateurs mobiles. Par défaut, la liste est déjà bien garnie (Android, iOS, Opera Mini, etc.).

Rien à toucher ici la plupart du temps, sauf si tu dois ajouter un user-agent très spécifique.

Onglet : TTL

Tous les réglages de cet onglet sont optimaux pour un site vitrine.

En revanche, pour un site e-commerce, il pourrait être intéressant de réduire la TTL à 24 heures pour les variations de prix, stocks, etc.

Note qu’un TTL réduit peut conduire à une charge serveur plus élevée car le cache devra être rafraichi plus fréquemment. Ce sera peut-être pour un autre article.

Nous n’avons plus rien à faire dans cet onglet. On passe à la suite !

Onglet : Réglages d’optimisation des images

Le sous onglet qui nous intéresse est le numéro 2 « Réglages d’optimisation des images ».

Cet onglet est là pour te permettre d’optimiser tes images et booster les performances de ton site. L’avantage, c’est que LiteSpeed Cache gère tout ou presque : de la compression à la conversion WebP, sans prise de tête. Voici les principaux réglages à connaître :

1. Requête automatique Cron

Ce réglage permet de lancer automatiquement l’optimisation de tes images via une tâche Cron (un script planifié).

Pourquoi l’activer ? Parce que ça te simplifie la vie : tes images sont optimisées à mesure qu’elles sont détectées, sans avoir à appuyer sur un bouton.

💡 Mon conseil : Garde-le actif, à moins que tu veuilles gérer manuellement les optimisations.

2. Cron de traction automatique

Cette option active ou désactive la tâche Cron qui récupère les images déjà optimisées à partir de QUIC.cloud.

En clair : Si tu le rend incatif, LiteSpeed ne va pas récupérer automatiquement les images optimisées. Tu devras les rapatrier manuellement.

💡 Mon conseil : Laisse-le actif par défaut pour que la synchronisation se fasse toute seule.

3. Optimiser les images originales

Ici, LiteSpeed va non seulement compresser les images, mais aussi créer des sauvegardes (ou écraser) des originaux dans le même dossier.

Idée reçue : Certains pensent que si on optimise l’image originale, on perd définitivement la qualité initiale. Pas de panique, LiteSpeed fait (en général) une copie de sauvegarde.

💡 Mon conseil : Laisse actif si tu veux que tout soit géré automatiquement. Mais vérifie bien que l’espace de stockage ne devienne pas trop important (à cause des multiples sauvegardes).

4. Supprimer les sauvegardes d’originales

Cette option, si tu l’actives, va supprimer la sauvegarde initiale de l’image après son optimisation.

Attention : C’est irréversible. Si tu actives ça, plus moyen de revenir à l’original non compressé si tu n’es pas satisfait.

💡 Mon conseil : Perso, je préfère garder ça Inactif pour conserver une marge de manœuvre. Mais si tu es sûr de toi et que tu veux économiser de la place, active-le (en conscience).

5. Optimiser sans perte

Cette fonctionnalité te permet de compresser tes images sans dégrader leur qualité (pas de perte).

Le revers de la médaille : Les gains de poids peuvent être moindres par rapport à une compression avec perte.

💡 Mon conseil : Active-le si tu es très pointilleux sur la qualité d’image (photographes, graphistes…). Sinon, la compression avec perte suffit et soulage mieux ton serveur.

6. Conserver les données EXIF/XMP

Ces métadonnées (GPS, copyright, infos de l’appareil photo, etc.) alourdissent un peu les fichiers. C’est anecdotique, mais ceci plus cela, au bout du compte, ça peut faire pas mal.

💡 Mon conseil : Laisse Inactif si tu n’as pas besoin de ces infos. Active seulement si tu tiens absolument à garder les métadonnées (par exemple, si tu gères un site de photographie professionnelle).

7. Remplacement de l’image WebP

En activant ce réglage, LiteSpeed tentera de servir les versions WebP de tes images (optimisées et plus légères) à la place des JPEG/PNG.

Pourquoi c’est top ? Le WebP est un format très performant : des fichiers plus légers, donc un chargement plus rapide.

Note : Cela va modifier un peu ton fichier .htaccess pour gérer la redirection d’images vers le format WebP.

💡 Mon conseil : Active-le si la majorité de tes visiteurs utilisent des navigateurs compatibles (ce qui est généralement le cas aujourd’hui).

8. Attribut WebP à remplacer

Ici, tu spécifies quels attributs d’images LiteSpeed doit convertir en WebP (par exemple img.src, div.data-thumb, etc.).

En clair : Si tu as un thème qui utilise des classes ou attributs un peu exotiques pour les images, ajoute-les ici pour être sûr que tout est bien converti.

💡 Mon conseil : Les valeurs par défaut suffisent à la plupart des sites. Ajoute seulement si tu as un souci d’affichage sur certaines images.

9. WebP pour srcset extra

Cette option va remplacer automatiquement les URLs des images dans les attributs srcset (surtout utilisées pour la responsive) par leur version WebP.

Avantage : Ça te permet de délivrer des images WebP, même pour celles intégrées avec cet attribut. Gain en perf.

💡 Mon conseil : Active-le et teste un peu ton site en nav privée pour voir si tout s’affiche correctement.

Onglet : Optimisation de Page

Réglages CSS de LiteSpeed

Là on attaque un gros morceau. C’est ici que 80% des optimisations de ton site se joue. Mais ne t’en fais pas, je vais aller au plus simple. T’as pas besoin de tout comprendre pour que ton site soit rapide.

1. Minifier CSS

Cette option va réduire la taille de tes fichiers CSS et de tout CSS en ligne (suppression d’espaces, de retours à la ligne, etc.).

💡 Mon conseil : Active-le. C’est quasiment sans risque et ça fait gagner quelques précieux octets.

2. Combiner CSS

Ici, LiteSpeed va assembler tous les fichiers CSS en un seul pour limiter les requêtes HTTP.

Avantages : Moins de requêtes, donc chargement plus rapide en théorie.
Inconvénients : Si tu as beaucoup de CSS différents (thèmes, plugins), tu peux avoir des problèmes de compatibilité (styles cassés).

💡 Mon conseil : Teste-le. Si tu constates des soucis d’affichage, reviens en arrière et laisse inactif.

3. Générer l’UCSS

UCSS = “Unique CSS”. LiteSpeed va demander à QUIC.cloud de générer du CSS unique pour chaque page, en supprimant le CSS inutile.

Ça peut être un énorme gain de performance, car tu sers uniquement le CSS nécessaire.
Attention : Cette fonctionnalité repose sur un service externe (QUIC.cloud), et peut parfois être capricieuse (comme tous les services qui proposent cette fonctionnalité).

💡 Mon conseil : Active-le. Vérifie l’affichage de ton site (notamment sur mobile) pour éviter toute surprise.

4. UCSS en ligne

Avec cette option, LiteSpeed injecte le Critical CSS directement en ligne (dans la balise <head>).

Avantage : Pas de requête supplémentaire pour charger le fichier UCSS.
Inconvénient : Va alourdir le code HTML de tes pages.

💡 Mon conseil : Perso, je trouve que cette fonctionnalité n’est plus spécialement nécessaire depuis l’existence du protocole HTTP/2.

5. Combiner les CSS externes et en ligne

C’est une extension de la fonctionnalité “Combiner CSS”. En l’activant, LiteSpeed met aussi ensemble le CSS externe et le CSS intégré directement dans les pages.

💡Mon conseil : Tout comme la combinaison de fichiers, ça peut améliorer la perf mais créer des conflits. Il n’y a qu’un moyen de savoir si ça va fonctionne correctement pour ton site. 😊

6. Charger le CSS de manière asynchrone

Cette option optimise l’ordre de chargement du CSS, de sorte que le reste de la page puisse s’afficher pendant que le CSS se télécharge.

Attention : Un chargement asynchrone mal géré peut provoquer un effet “flash” (FOUC) sur ton site (le contenu s’affiche sans style, puis le style se charge d’un coup).

💡 Mon conseil : N’active pas cette optimisation. Elle est datée.

7. CCSS par URL

Cette fonctionnalité permet de déployer des Critical CSS (CCSS) pour chaque URL spécifiquement, plutôt que pour tout le site.

Pourquoi c’est cool ? Parce que chaque page peut avoir un “au-dessus-de-la-ligne” différent. Mais ça demande plus de ressources au service QUIC.cloud.

💡 Mon conseil : Laisse ça de côté pour l’instant.

8. Librairie CSS Async en ligne

En activant, tu demandes à LiteSpeed de charger en asynchrone la librairie nécessaire pour injecter ton CSS (par exemple pour l’UCSS).

Avantage : Moins de blocage au niveau du rendu.

💡 Mon conseil : N’active pas cettet option.

9. Optimisation de l’affichage des polices

Tu peux choisir entre “swap”, “block”, “auto”, etc. pour définir la règle font-display.

L’attribut “swap” est souvent conseillé : les polices par défaut s’affichent d’abord, puis remplacées par les polices custom quand elles sont prêtes, ce qui évite un long flash de texte invisible.

Le truc, c’est que ça génère du CLS dans la majorité des cas. Donc si tu cibles des Core Web Vitals, il va falloir soit préférer les fonts system, soit utiliser une méthodes avancées pour l’éviter (dont je parle dans le Blueprint AFWP).

💡 Mon conseil : Garde “swap” pour un meilleur ressenti utilisateur. Mais peut causer du CLS.

Voilà pour la partie CSS ! Teste bien chaque réglage avant de valider, et pense toujours à vider ton cache et observer le rendu visuel pour éviter les mauvaises surprises.

Réglages JS de LiteSpeed

Cet onglet permet de réduire le nombre de requêtes JavaScript, leur taille et leur mode d’exécution. Comme pour le CSS, ça peut vraiment booster la vitesse de ton site, mais attention aux conflits potentiels avec certains thèmes ou extensions. Passons en revue :

1. Minifier JS

En résumé :

Cette option va « compresser » ton code JavaScript : suppression des espaces, retours à la ligne, commentaires, etc.

💡 Mon conseil : Active-le sans hésiter, le risque de bug est faible et tu gagnes un peu en performance (c’est anecdotiques la plupart du temps, mais c’est cool).

2. Combiner JS

LiteSpeed va fusionner tous tes fichiers JS (locaux) en un seul pour réduire le nombre de requêtes.

Avantages : Moins de requêtes = site potentiellement plus rapide.
Inconvénients : Risque de conflits si le thème ou un plugin n’aime pas la combinaison.

💡 Mon conseil : Active et teste. Si tu vois des erreurs JavaScript (dans la console du navigateur) ou des problèmes d’affichage, repasse en inactif.

3. Combiner les JS externes et en ligne

En plus de combiner les JS locaux, LiteSpeed peut également inclure le JavaScript « inline » (intégré dans le HTML) et les scripts externes.

Avantage : Centralise tout le JS en un seul bloc.
Attention : Ça peut créer davantage de risques de conflits.

💡 Mon conseil : Idem que pour la combinaison des JS locaux : à tester. Si ça passe, super, sinon désactive.

4. Charger le JS en différé (options Inactif, Différé, Reporté)

• Inactif : Le JS est chargé normalement (bloquant).
• Différé : Le JS se charge après que le HTML soit entièrement « chargé », réduisant le temps de blocage.
• Reporté : Repousse l’exécution encore plus loin, ce qui peut améliorer ton score FID (First Input Delay) sur les audits de performance, mais attention aux scripts qui doivent se lancer tôt.

💡 Mon conseil : Active tout l’ami. C’est puissant et efficace. Vérifie bien ton site en nav privé ensuite.

Allez, on passe à la suite !

Réglages HTML de LiteSpeed

Ces options visent à optimiser le code HTML et à gérer certaines ressources externes (DNS, Google Fonts, emojis, etc.). L’idée reste la même : alléger la page pour gagner en vitesse, tout en faisant attention aux éventuels conflits.

Il y a de grandes chances pour que tu n’aies pas spécialement besoin de t’intéresser à toutes ces fonctionnalités. Je ne vais donc pas te dire comment utiliser en détail celles-ci (dans cet article du moins).

Passons-les en revue tout de même :

1. Minifier le HTML

Cette fonction va enlever les espaces et retours à la ligne inutiles dans ton code HTML.

💡 Mon conseil : Active. Très peu de risque, et tu gagnes quelques octets précieux sur chaque page.

2. Pré-chargement des DNS (DNS Prefetch)

Tu peux spécifier ici des domaines pour lesquels tu souhaites accélérer la résolution DNS. Par exemple, si tu charges des ressources depuis https://example.cdn.com, ajoute //example.cdn.com.

Avantage : Les navigateurs commenceront à résoudre l’URL dès qu’ils verront la page, ce qui accélère le chargement du contenu externe.

💡 Mon conseil : Mets ici les URL dont tu es sûr d’avoir besoin rapidement (CDN, polices, scripts externes…).

3. Contrôle du préfixe DNS (DNS-Prefetch Control)

LiteSpeed va automatiquement ajouter dns-prefetch pour les domaines externes détectés. Si tu l’actives, tu laisses LiteSpeed gérer ça.

Franchement c’est sympa.

4. Pré-connexion DNS (Preconnect)

Très proche du pré-chargement DNS, mais va encore plus loin : au lieu de juste résoudre le nom de domaine, le navigateur établit directement la connexion TCP/TLS avec le serveur.

💡 Mon conseil : Mets ici les domaines critiques (par exemple si ton site dépend d’une police Google ou d’un script CDN). Attention de ne pas en abuser, car ça peut aussi surcharger le navigateur s’il y en a trop.

Si tu as localiser tes fonts Google, alors n’indique pas l’adresse de Google fonts. Ce serait parfaitement inutile.

5. Sélecteurs HTML de chargement différé

Ici, tu peux retarder le rendu de certains éléments HTML pour gagner du temps de chargement sur le contenu principal.

Exemple : .class-lazy ou #id-lazy.

💡 Mon conseil : C’est avancé ! À moins de savoir précisément ce que tu fais, tu peux laisser vide. Sache que c’est une bonne opti.

6. HTML Keep Comments

Cette option te permet de conserver certains commentaires HTML (on ne parle pas des commentaires de visiteurs) lors de la minification.

En pratique : Par défaut, LiteSpeed supprime tous les commentaires. Mais si tu as des commentaires qui font office d’indicateurs ou de marquages spéciaux (pour un plugin, par exemple), tu peux les sauvegarder en les référençant ici.

💡 Mon conseil : Si tu n’as pas de raison particulière de garder tes commentaires, laisse tel quel.

7. Retirer les chaînes de requête

En activant ça, LiteSpeed va tenter de supprimer les parties du type ?ver=1.2.3 sur tes ressources (CSS/JS).

Pour quoi faire ? Certains outils de cache le recommandent pour améliorer le score, car ça pourrait éviter que les ressources soient reconnues comme « dynamiques ».

💡 Mon conseil : Tu peux l’activer, mais sache que parfois, la chaîne de requête est utilisée pour forcer la mise à jour d’un fichier en cache. Teste bien pour voir si tout se met à jour quand tu modifies tes fichiers.

8. Charger les Google Fonts de manière asynchrone

Cette option va faire en sorte que les polices Google soient chargées après le rendu initial, pour ne pas bloquer le chargement de la page.

C’est pas bon pour le CLS mein freud.

Inconvénient : Tu peux avoir un flash de texte avec une police générique, puis la police Google qui s’affiche ensuite.

💡 Mon conseil : À activer si tu veux grappiller en performance, mais teste l’aspect visuel.

9. Retirer les polices Google

Si tu l’actives, plus de Google Fonts du tout.

💡 Mon conseil : Si tu as un thème qui se base lourdement sur Google Fonts, ton design va changer radicalement. À activer seulement si tu souhaites les remplacer par des polices locales ou si tu veux couper les ponts avec Google.

10. Retirer les emojis WordPress

WordPress charge un script pour gérer les emojis. En activant ça, tu économises une petite requête et un peu de JS.

💡 Mon conseil : Active, sauf si tu utilises massivement les emojis WP (ce qui est mon cas).

11. Retirer les balises Noscript

Cette option supprime la balise <noscript> qui affiche un contenu de secours pour les visiteurs ayant désactivé JavaScript.

Avantage : Légère réduction de code.
Inconvénient : Peut poser plus de souci que de bénéfice. Laisse ça inactif.

Recommandation : Ce n’est pas indispensable, je préfère la laisser inactif.

Voilà pour les réglages HTML. Comme d’habitude, n’oublie pas de vider ton cache et de vérifier ton site après chaque modification, histoire d’éviter les mauvaises surprises.

Réglage des médias dans LiteSpeed

Dans cet onglet, on va configurer tout ce qui touche aux images (et aussi aux iframes).

1. Chargement différé des images

Cette option permet de charger les images uniquement lorsqu’elles entrent dans la fenêtre d’affichage de l’utilisateur. Cela réduit le nombre de requêtes HTTP initiales et améliore le temps de chargement.

Avantage : Réduction du nombre de requêtes HTTP. C’est cool.

💡 Mon conseil : Active-le sans hésiter. Pas vraiment sujet à débat.

2. Image générique pour l’image de base

Permet de définir une image de substitution qui s’affichera en attendant le chargement des images finales.

On skip.

3. Optimisations liées au LQIP

On passe toutes ces optimisations pour ce tutoriel.

4. Chargement différé des iframes

Comme pour les images, les iframes (vidéos, cartes Google Maps…) ne se chargent que lorsqu’elles entrent dans l’affichage.

Avantage : Réduit le temps de chargement initial et améliore le Largest Contentful Paint (LCP).

💡 Mon conseil : Active-le sans hésiter, surtout si tu intègres beaucoup de vidéos YouTube.

5. Ajouter les dimensions manquantes

Active automatiquement la définition des dimensions des images pour éviter le Cumulative Layout Shift (CLS).

Elle n’est pas toujours efficace. C’est toujours mieux d’attribuer les dimensions de ses images directement.

Avantage : Évite le Cumulative Layout Shift (CLS), améliorant ainsi la stabilité visuelle du site.

💡 Mon conseil : Active cette option, très bénéfique pour l’expérience utilisateur et les Core Web Vitals.

6. Contrôle de la qualité des images WordPress

Définit le niveau de compression automatique des images WordPress (par défaut à 82 sur 100).

💡 Mon conseil : Laisse la valeur par défaut, sauf si tu veux maximiser la qualité des images.

C’est terminé pour les médias. Passons à la suite amigo !

VPI (Viewport Image) dans LiteSpeed

L’optimisation des images de vue écran dans LiteSpeed Cache permet d’afficher immédiatement les images visibles sans attendre le chargement du reste du site. C’est une fonctionnalité qui peut booster le LCP (Largest Contentful Paint) et améliorer l’expérience utilisateur.

📌 Mais attention ! Cette option ne fonctionne que si le chargement différé des images est activé. Voyons en détail comment la configurer correctement.

1. Images de Vue Écran

Cette option détecte les images situées au-dessus du pli ( ce qui est visible immédiatement lorsque tu accèdes à une page) et les exclut du chargement différé.

Avantages :

✅ Améliore le temps de rendu initial en affichant rapidement les images visibles.
✅ Meilleur score Web Vitals, notamment pour le LCP (quand ça fonctionne bien).

Inconvénients :

❌ Parfois ça déconne. Certaines images au dessus de la ligne de flotaison sont toujours en lazyload. Chiant.

💡 Mon conseil : Active cette option. Dans l’absolu c’est une très bonne optimisation (surtout logique). Vérifie juste bien que ça foncitonne comme attendu. Sinon tu peux exclure des images du lazyload individuellement sur chacune de tes pages.

2. Cron d’Images de Vue Écran

Permet d’automatiser la détection et la mise à jour des images de vue écran.

Avantages :

✅ Utile si ton site ajoute régulièrement de nouvelles images.
✅ Assure un fonctionnement optimal en continu sans intervention manuelle.

💡 Mon conseil : Active le cron si ton site est dynamique (blog, e-commerce, news, etc.). Pour un site statique, tu peux le laisser inactif.

Allez hop, la suite (on skip l’onglet 6 « médias exclus ») !

Réglages de localisation de LiteSpeed

1. Cache Gravatar

Cette option stocke localement les avatars des utilisateurs (via Gravatar) pour accélérer leur chargement.

Avantages :

✅ Réduit les requêtes externes vers Gravatar, ce qui améliore les performances.
✅ Meilleure vitesse de chargement des pages affichant des commentaires.

💡 Mon conseil : Active cette option si ton site affiche beaucoup de commentaires ou d’avatars. Pour un site sans interaction utilisateur, ce n’est pas nécessaire.

2. Cron du cache Gravatar

Permet d’actualiser automatiquement les avatars mis en cache via une tâche cron.

Avantages :

✅ Garantit que les avatars restent à jour sans intervention manuelle.
✅ Réduit les requêtes Gravatar en évitant un rechargement trop fréquent.

💡 Mon conseil : Active cette option pour que les avatars restent toujours à jour sans avoir à t’en soucier.

3. TTL du cache Gravatar

En résumé :

• Défaut : 604800 secondes (1 semaine)
  Définit la durée de vie du cache pour les avatars.

Avantages :

✅ Réduit la fréquence de mise à jour des avatars.
✅ Diminution des requêtes vers Gravatar, améliorant le chargement des pages.

Inconvénients :

❌ Si la valeur est trop haute, certains avatars peuvent ne pas être actualisés rapidement.

💡 Mon conseil : Laisse la valeur par défaut (1 semaine) ou ajuste selon la fréquence des changements d’avatars sur ton site. Si tu veux que les avatars soient actualisés plus souvent, baisse cette valeur.

4. Localiser les ressources

Cette option permet de stocker localement certaines ressources externes comme les scripts de widgets.

Avantages :

✅ Accélère le chargement en évitant les appels à des domaines externes.
✅ Peut améliorer la compatibilité avec certaines extensions de protection de la vie privée.

Inconvénients :

❌ Nécessite des tests pour s’assurer que les scripts fonctionnent correctement.
❌ Peut poser problème en cas de mises à jour des scripts distants.

💡 Mon conseil : Active cette option uniquement si certaines ressources ralentissent ton site. Teste toujours après l’activation pour éviter tout dysfonctionnement. 🔍

5. Fichiers de localisation

Liste les fichiers que tu veux stocker en local au lieu de les charger depuis des sources externes.

Passe cette fonctionnalité. On verra ça ensemble plus tard.

Personnalisation (JS) et Personnalisation CSS de LiteSpeed

LiteSpeed Cache propose des options avancées pour personnaliser l’optimisation du JavaScript et du CSS afin d’éviter les conflits et de garantir une compatibilité optimale avec ton site. Ces réglages permettent d’affiner les exclusions de scripts et de styles pour éviter des problèmes liés à une optimisation trop agressive.

Je n’aborderai pas ces sections dans cet article, car elles méritent en fait un article complet. Mais concrètement, ces fonctionnalités te permette d’exclure des ressources JS & CSS des optimisations de LiteSpeed.

Base de données

Depuis cet onglet, tu peux purger pas mal d’éléments qui encombrent ta BDD. Mais globalement, y’a pas grand chose d’autre à dire de plus.

Quand tu as terminé de rédigé tes contenus, passent vider un peu toutes les révisions et transients. Ça fera un peu de bien à ton site !

Dans le second onglet, tu peux définir une limite au nombre de révisions de tes pages et articles. Utile pour limiter la place qu’elles prennent en base de données.

Perso j’aime bien les limiter à 30.

Ça peut paraitre un peu élevée, mais ça arrive parfois que je doive remonter à pas mal de révision pour récupérer un élément. Donc je préfère définir une limite assez élevée.

Ton site se débrouille comment sur PageSpeed Insight ?

Ça y est. Nous sommes arrivés au bout de ce looooong tutoriel.

Ton site est fonctionnel ? Pas de bug en particulier ?

Bien ! Passe le sous PSI et WebPageTest pour voir.

Son score de performance a évolué dans le bon sens ? Magnifique.

La plupart du temps, ces optimisaitons sont largement suffisantes pour des projets de sites vitrines. Inutile d’aller chercher plus loin.

Tu souhaites aller plus loin ?

C’est possible. J’offre plusieurs possibilités.

La première, c’est tout simplement d’accéder à PS architect™. Un recueille sur toutes les stratégies d’optimisations en WebPerf que j’ai accumulé ces dernières années.

Il y en a pour tous les goûts et surtout, je t’apprends à comment avoir tes Core Web Vitals, même avec un site 100% construit avec Elementor. J’expose des tips jamais vu nulle-part.

La deuxième, c’est tout simplement de passer par mon service d’optimisation. Il est garantie Vert ou remboursé. Et tu as l’assurance d’avoir un site rapide et parfaitement fonctionnel.

N’hésite pas à me contacter 😉