Étape 2 : Présentation du tableau de bord de LiteSpeed Cache

Le tableau de bord de LiteSpeed Cache est accessible depuis le menu LiteSpeed Cache dans votre tableau de bord WordPress. C’est ici que vous pouvez suivre l’état d’optimisation de votre site et accéder à divers outils et rapports pour améliorer ses performances.

1. Vue d’ensemble de l’optimisation
   Dans cette section, vous aurez un aperçu des éléments optimisés sur votre site, tels que :
   • Images optimisées : Un nombre total d’images qui ont été compressées pour réduire leur taille sans perte significative de qualité.
   • Utilisation du CDN : Indique si le CDN (Content Delivery Network) est activé et le pourcentage de contenu distribué via celui-ci. Cela est crucial pour accélérer le temps de chargement de vos pages.
   • Optimisation des CSS et JavaScript : Cette section montre le pourcentage de fichiers CSS et JavaScript optimisés, ce qui contribue à réduire le temps de chargement de vos pages.
2. Scores de performance
   Le tableau de bord affiche également vos scores de performance, notamment les scores PageSpeed. Contrairement à des outils tiers comme GTmetrix, ces scores sont mesurés directement sur le serveur, ce qui donne une évaluation plus précise de la rapidité et de la réactivité de votre site.
3. Alertes et recommandations
   Vous trouverez aussi des alertes concernant des éléments nécessitant votre attention, comme les fichiers non optimisés ou des configurations qui pourraient être ajustées pour améliorer les performances. LiteSpeed Cache vous propose des recommandations pour optimiser encore plus votre site.
4. Accès aux fonctionnalités avancées
   Le tableau de bord vous permet d’accéder rapidement aux différentes fonctionnalités du plugin, telles que l’optimisation des images, le réglage du cache, et la configuration du CDN. Vous pouvez naviguer facilement vers ces sections pour effectuer des ajustements selon les besoins de votre site.
5. Mises à jour et notifications
   Enfin, le tableau de bord vous informera des mises à jour disponibles pour LiteSpeed Cache, garantissant que vous utilisez toujours la version la plus récente et la plus performante du plugin.

En résumé, le tableau de bord de LiteSpeed Cache est un outil centralisé et convivial qui vous aide à suivre et à améliorer les performances de votre site, tout en vous offrant des recommandations pour maximiser son efficacité.

Étape suivante : Configurer les paramètres de base pour tirer le meilleur parti de LiteSpeed Cache.

Étape 4 : Configuration de l’onglet « Général » dans LiteSpeed Cache

L’onglet Général de LiteSpeed Cache vous permet de configurer des réglages essentiels pour optimiser le fonctionnement de votre site. Voici un aperçu des principales options disponibles, mes réglages personnels pour lddigitalwork.com, et des conseils pour les configurer correctement :

1. Mettre à jour automatiquement :

Réglage : Inactif
Conseil : Il est plus sûr de garder cette option désactivée et de mettre à jour les plugins manuellement. Cela permet d’éviter des mises à jour non testées qui pourraient causer des conflits ou des problèmes de compatibilité sur votre site.

2. Clé de domaine :

Réglage : [Votre clé de domaine ici]
Conseil : Demandez une clé de domaine et ajoutez-la ici pour accéder aux services en ligne de QUIC.cloud. Assurez-vous que toutes les adresses IP des serveurs QUIC.cloud sont autorisées pour un fonctionnement optimal des services.

3. Mode visiteur :

Réglage : Activé
Conseil : J’ai personnellement activé le mode invité pour fournir une page de destination mise en cache lors de la première visite d’un utilisateur. Cela peut améliorer les temps de chargement pour les nouveaux visiteurs, surtout si vous utilisez le CDN de QUIC.cloud. Cependant, je vous conseille de tester cette option sur votre site pour voir comment elle affecte les performances.

4. Optimisation visiteur :

Réglage : Activé
Conseil : J’ai également activé cette option, mais elle ne doit être utilisée que si le mode invité est activé. Cela permet une optimisation maximale pour les visiteurs, ce qui peut encore améliorer les temps de chargement. Testez cette configuration pour vous assurer qu’elle convient à votre site.

Attention: il vaut mieux utiliser CDN de Quic.Cloud plutôt que celui de votre serveur si vous activez cette option pour éviter tout erreur de rendu.

5. IP du serveur :

Réglage : [l’IP de votre site ici]
Conseil : Vous pouvez trouver l’adresse IP de votre serveur dans les informations fournies par votre hébergeur. Cliquez ensuite sur “Vérifier mon IP publique à partir de DoAPI.us” pour confirmer l’adresse IP correcte de votre serveur. Cela permet aux services cloud d’accéder directement à l’IP sans surcharge DNS. Assurez-vous que cette IP est correcte (vérifiez auprès de votre hébergeur) pour éviter les problèmes d’accès.

6. Notifications :

Réglage : Inactif
Conseil : Activez cette option si vous souhaitez recevoir des notifications concernant les mises à jour, correctifs et nouvelles versions de LiteSpeed. Si vous préférez ne pas être dérangé par ces notifications, vous pouvez les désactiver.

En configurant ces réglages, vous optimiserez le fonctionnement de LiteSpeed Cache pour votre site, ce qui contribuera à améliorer les performances globales et l’expérience utilisateur.

Étape suivante : Explorer les réglages spécifiques aux fonctionnalités pour une personnalisation avancée.

Étape 6 : Réglages du CDN et Configuration de QUIC.Cloud

Un CDN (Content Delivery Network) est un réseau de serveurs répartis dans différentes zones géographiques, conçu pour diffuser rapidement les contenus d’un site web (images, vidéos, fichiers HTML, etc.) aux utilisateurs, peu importe leur emplacement. Au lieu de charger toutes les ressources depuis un seul serveur central, un CDN répartit les données sur ses serveurs à travers le monde, réduisant ainsi la distance physique entre l’utilisateur et le contenu. Cela améliore le temps de chargement des pages, réduit la charge sur le serveur principal, et offre une meilleure expérience utilisateur.

Pourquoi intégrer un CDN à son hébergement ? Un CDN est particulièrement utile pour les sites ayant un large public international ou un trafic élevé. En plus de rendre le site plus rapide, il offre des fonctionnalités de sécurité avancées telles que la protection contre les attaques DDoS. Dans de nombreux cas, un hébergeur peut inclure l’option d’un CDN dans ses offres, ce qui est un atout non négligeable pour maximiser les performances du site.

QUIC.cloud est un CDN (Content Delivery Network) spécialement conçu pour optimiser les sites utilisant LiteSpeed. Il accélère la livraison de votre contenu grâce à la mise en cache HTML, améliore le chargement des images et renforce la sécurité de votre site avec des protections intégrées contre les attaques DDoS et un pare-feu (WAF). Utiliser QUIC.cloud est essentiel pour certaines fonctionnalités avancées de LiteSpeed Cache, comme le CSS critique, qui doivent se synchroniser régulièrement avec les modifications apportées à votre site.

Il est important de noter qu’il existe une option gratuite pour utiliser QUIC.cloud, qui est déjà très performante. Cependant, pour bénéficier de tous les 82 points de présence (PoPs) et d’un meilleur routage/Anycast, il est recommandé d’utiliser le plan standard (0,02 $ à 0,08 $/Go) avec le DNS de QUIC.

Configuration de QUIC.Cloud

Étape 1 : Dans les paramètres généraux de LiteSpeed Cache, demandez une clé de domaine et ajoutez l’IP de votre serveur.

Étape 2 : Accédez à CDN → Configuration CDN QUIC.cloud et cliquez sur « Commencer la configuration du CDN QUIC.cloud ». Ensuite, cliquez sur « Actualiser l’état de la configuration CDN » pour obtenir deux serveurs de noms (kevin.quicns.net et jon.quicns.org). Le DNS de QUIC offre de meilleures performances lorsque vous utilisez LiteSpeed, avec un routage géographique plus précis.

Étape 3 : Dans votre registraire de domaine, changez vos serveurs de noms pour ceux de QUIC. Par exemple, sur Hostinger, cela se fait en accédant à Menu Principal → Aperçu Général→Nom de domaine→ DNS/Serveurs de noms (Modifier).

Étape 4 : Configurez les paramètres « Config CDN » dans le tableau de bord de QUIC.cloud. Voici trois paramètres à essayer :

• Backend QUIC : permet à QUIC de se connecter à votre serveur via QUIC et HTTP/3.
• Bloquer XML-RPC du navigateur : la plupart des sites n’utilisent pas XML-RPC et peuvent le bloquer.
• Protection contre le hotlinking : empêche d’autres sites de copier vos images et d’utiliser votre bande passante.

Étape 5 : préférez le plan standard au plan gratuit. Le plan gratuit ne comprend que 6 PoPs sans protection DDoS, tandis que le plan standard utilise tous les 84 PoPs avec davantage de fonctionnalités. Son coût est de 0,02 $ à 0,08 $/Go, selon la région (similaire à BunnyCDN). Vous bénéficierez également d’un certain nombre de crédits gratuits chaque mois si vous utilisez un hébergeur qui utilise LiteSpeed Enterprise (par exemple, Hostinger, ChemiCloud, NameHero), mais pas si vous utilisez OpenLiteSpeed. Ces crédits sont nécessaires pour l’UCSS, le CCSS et les optimisations d’images.

Paramètres CDN

• CDN QUIC.cloud : Activé – QUIC a été conçu spécifiquement pour LiteSpeed. Cependant, vous devez utiliser le plan standard (0,02 $ à 0,08 $/Go) si vous souhaitez bénéficier de tous les 83 PoPs et de la protection DDoS.
• Utiliser la cartographie CDN : Désactivé – Les CDN de QUIC.cloud et Cloudflare ne nécessitent pas de cartographie CDN, donc cela doit généralement être désactivé. Utilisez cette option uniquement si vous utilisez un CDN qui nécessite une URL de CDN, comme BunnyCDN.
• Attribut HTML à remplacer : laissez tel quel puisque le paramètre de cartographie CDN est désactivé.
• URLs d’origine : laissez tel quel, sauf si vous utilisez un multisite avec des domaines et sous-domaines différents.
• Répertoires inclus : seuls les répertoires wp-content et wp-includes devraient être suffisants.
• Exclure le chemin : laissez tel quel, sauf si vous souhaitez exclure des répertoires spécifiques.
• API Cloudflare : uniquement nécessaire si vous utilisez le CDN de Cloudflare au lieu du CDN QUIC.cloud.

Étape 7 : Optimisation d’image

Configurez les paramètres d’optimisation d’image (onglet « Réglages d’optimisation des images »), puis envoyez une demande d’optimisation.

• Auto Request Cron : Activé – envoie une demande pour optimiser les nouvelles images téléchargées.
• Auto Pull Cron : Activé – si le paramètre précédent est activé, celui-ci doit également l’être.
• Optimize Original Images : Activé – voir l’exemple de LiteSpeed, mais il est probablement préférable de l’activer.
• Remove Original Backups : Désactivé – ne supprimez pas à moins d’être satisfait de la qualité.
• Optimize Losslessly : Activé – je préfère la compression sans perte, mais vous pouvez essayer vous-même.
• Preserve EXIF/XMP Data : Désactivé – supprimer les données EXIF aide à réduire la taille des images.
• Create WebP Versions : Activé – crée des images WebP pour les servir dans des formats de nouvelle génération.
• Image WebP Replacement : Activé – activez ceci si vous avez activé l’option précédente.
• WebP Attribute To Replace : spécifiez les attributs d’élément à remplacer par WebP.
• WebP For Extra srcset : Activé – assurez-vous que les images dans le code personnalisé sont servies en WebP.
• WordPress Image Quality Control : 85 – les tests PSI évaluent les images à 85 %, c’est donc ce que j’utilise.

Étape 8 :  Optimisation de page

L’optimisation des pages est cruciale pour améliorer la performance de votre site. Cependant, soyez vigilant, car certains paramètres peuvent causer des problèmes d’affichage ou de fonctionnement. Testez chaque réglage attentivement pour éviter que votre site ne « casse ». Voici les options les plus importantes :

1. Réglages CSS

Minifier CSS : Activez pour supprimer les caractères inutiles dans le CSS.

Combiner CSS: Testez cette option. La combinaison de fichiers CSS peut améliorer la performance mais peut aussi créer des conflits, surtout avec de grands fichiers.

Générer l’UCSS : Utilisez cette option seulement si « Combine CSS » est activé. UCSS permet de supprimer le CSS inutile et est particulièrement utile si vous avez des fichiers CSS lourds.

UCSS en ligne : Désactivez cette option pour charger le CSS dans un fichier séparé, ce qui est plus efficace pour la vitesse de chargement.

Combiner les CSS externes et en ligne : Activez seulement si « Combine CSS » est également activé.

Charger le CSS de manière asynchrone : À tester avec prudence, car cela peut entraîner des problèmes de mise en page.

CCSS par URL : Désactivez l’option pour générer le CCSS par type de publication au lieu de par page. Cela va économiser un quota CCSS important, mais cela peut entraîner un style CSS incorrect si le site utilise un constructeur de page.

Optimisation de l’affichage des polices : Par défaut, pour éviter les problèmes de clignotement des polices (FOUC). Essayez « Swap » si PageSpeed Insights signale le problème.

2. Réglages JS

Minifier JS : Activez pour retirer les caractères inutiles dans le JavaScript.

Combiner JS : Désactivez si vous utilisez HTTP/2 ou si vous avez de gros fichiers JS.

Combiner les JS externes et en ligne : Activez seulement si « Combine JS » est activé pour éviter les conflits d’affichage.

Charger le JS en différé : Testez cette option, mais soyez vigilant aux erreurs de chargement.

3. Réglages HTML

Minifier HTML : Activez pour supprimer les caractères inutiles dans le HTML.

Précharger DNS : Ouvrez votre rapport de code tiers dans PSI et regardez tous les domaines tiers chargés sur votre site. Ignorez les URLs CDN et fonts.gstatic.com, car elles devraient utiliser preconnect au lieu de prefetch. Ensuite, éliminez tout code tiers qui est retardé. Les seuls domaines que vous devriez précharger sont ceux laissés après cela.

Contrôle de Préchargement DNS : Activez cette option, mais rien à faire si vous les avez ajoutés manuellement.

Lazy Load pour les Sélecteurs HTML : Semblable au lazy loading des images, mais cela peut être fait pour tout élément en dessous du pli (#comments et #footer sont courants, produits liés à WooCommerce et sections Elementor se chargeant près du bas de la page).

Supprimer les Chaînes de Requête : Désactivez, car cela est quelque peu obsolète et ne devrait pas affecter les temps de chargement.

Charger les Polices Google de Manière Asynchrone : Désactivez et testez avec précaution, en consultant l’onglet « fonts » de votre rapport GTmetrix pour voir la différence dans vos temps de chargement de polices.

Supprimer les Polices Google : Désactivez uniquement si vous hébergez les polices localement et souhaitez vous assurer qu’aucune police tierce n’est chargée sur votre site Web.

Supprimer les Émojis WordPress : Activez, car les émojis ne sont pas bons pour les temps de chargement.

Supprimer les Balises Noscript : Désactivez, car certaines personnes utilisent encore d’anciens navigateurs. Garder ces balises garantit une meilleure compatibilité pour s’assurer que le JavaScript de votre site Web se charge correctement.

4. Réglages des Médias

Chargement différé des images : Activez pour retarder le chargement des images en dehors de l’écran.

Texte indicatif responsive : Utilisez une image de remplacement pendant le chargement des images.

Chargement différé des iframes : Actif – Le chargement différé des vidéos, des cartes et d’autres iframes améliore la vitesse.

Image générique pour l’image de base : Utilisez une image de remplacement pendant le chargement des images.

Générateur de cloud de LQIP : Actif – Une image de qualité inférieure (générée par QUIC.cloud) sera utilisée comme espace réservé avant le chargement de l’image de meilleure qualité. Testez-le vous-même.

Qualité de LQIP : Si le réglage précédent est activé, cela détermine la qualité de l’image de moindre qualité.

Dimensions minimales de LQIP : 150 x 150 pixels est suffisant. Ceci s’applique uniquement lorsque le générateur de cloud LQIP est activé, et LQIP ne sera utilisé que pour les images plus grandes que cette taille.

Générer LQIP en arrière-plan : Actif – LiteSpeed indique que désactiver cette option ralentit le chargement de la page. Mais testez le avant.

Ajouter les dimensions manquantes : Actif – Ajoute les dimensions d’image manquantes pour définir des largeurs et hauteurs explicites.

5. VPI (Images du viewport)

Images de vue écran : Activez pour que les images dans le viewport soient exclues du lazy load, ce qui améliore le LCP (Largest Contentful Paint).

Cron d’images de vue écran : Activez pour que les images du viewport soient générées en arrière-plan via une file d’attente cron.

6. Médias exclus

Pour améliorer le chargement, excluez certaines images du lazy load en fonction des besoins spécifiques de votre site. Voici quelques éléments que vous pourriez exclure :

• Logo : Ajoutez l’URL de l’image.
• Images de la barre latérale : Ajoutez l’URL de l’image ou le nom de la classe.
• Images de couverture : Ajoutez le nom de la classe (par exemple, class="attachment-full size-full").
• Images de fond : Utilisez l’attribut data-no-lazy pour les images de fond.

7. Localisation

Cache Gravatar : Activez pour accélérer l’affichage des Gravatars dans les commentaires.

Cron du cache Gravatar : Activez pour automatiser la mise à jour des Gravatars en arrière-plan.

Localiser les ressources : Activez pour localiser certains fichiers JavaScript externes.

Étape 9 :  Optimisation de la base de données

L’optimisation de la base de données est essentielle pour maintenir les performances de votre site. Le plugin LiteSpeed Cache propose divers outils pour nettoyer et optimiser votre base de données afin de réduire son poids et d’accélérer le chargement des pages. Voici un aperçu des fonctionnalités disponibles :

Outil d’optimisation de base de données

• Tout nettoyer : Cette option permet de nettoyer tous les éléments non utilisés dans votre base de données, ce qui peut inclure jusqu’à 31 éléments.
• Révisions d’article : Nettoyez toutes les révisions d’articles pour libérer de l’espace. Cela peut inclure des révisions obsolètes qui ne sont plus nécessaires.
• Métadonnées de commentaire orphelines : Nettoyez toutes les métadonnées de publication orphelines pour optimiser votre base de données.
• Brouillons auto : Supprimez les brouillons auto-enregistrés qui ne sont plus nécessaires.
• Articles mis à la corbeille : Nettoyez tous les articles et pages qui sont dans la corbeille.
• Commentaires indésirables : Supprimez tous les commentaires indésirables pour garder votre base de données propre.
• Commentaires mis à la corbeille : Nettoyez tous les commentaires qui ont été mis à la corbeille.
• Rétroliens/pings : Nettoyez tous les rétroliens et pings non utilisés.
• Transients expirés : Supprimez les options de transient qui ont expiré pour alléger la base de données.
• Tous les transients : Nettoyez toutes les options de transient pour améliorer les performances.
• Optimiser les tables : Optimisez toutes les tables dans votre base de données pour améliorer les temps de réponse.

Convertisseur de moteur de table de base de données

Vérifiez également le type de moteur de vos tables de base de données. Il est recommandé de ne pas utiliser le moteur MyISAM, car il peut ralentir votre site. Le plugin vous informera si toutes les tables utilisent un moteur compatible.

Résumé de la base de données

Vous trouverez également un résumé de votre base de données avec des informations comme la taille d’autoload et les entrées d’autoload. Cela vous aidera à identifier les options qui prennent le plus d’espace :

• Taille d’autoload : 332.01K
• Entrées d’autoload : 949

Prenez le temps d’examiner la liste des options d’autoload pour optimiser davantage la base de données.

Réglages d’optimisation de la base de données

Les paramètres d’optimisation suivants peuvent être ajustés pour mieux gérer les révisions des articles :

• Nombre maximal de révisions : Fixé à 10, ce qui vous permet de conserver quelques sauvegardes sans trop alourdir votre base de données. Si vous préférez être plus strict, vous pouvez choisir 5.
• Âge maximal des révisions : Si vous définissez cela à 0, cela signifie que les révisions ne seront jamais supprimées. Cela peut être utile si vous ne mettez pas à jour un article depuis longtemps, car supprimer automatiquement les sauvegardes n’est pas toujours idéal.

Étape 10 :  le Crawler

Le Crawler est un outil essentiel qui parcourt votre site à la recherche de pages dont le cache a expiré et les rafraîchit. Cela peut consommer des ressources, c’est pourquoi cette fonctionnalité est généralement contrôlée au niveau du serveur. De nombreux hébergeurs, en particulier ceux offrant un hébergement mutualisé, n’autorisent pas cette fonctionnalité. Le Crawler est souvent disponible uniquement si vous gérez votre propre serveur.

Configuration du Crawler LiteSpeed

Dans la plupart des cas, vous n’aurez pas besoin d’intervenir, mais si vous gérez votre propre serveur, voici quelques recommandations :

• Activer le Crawler : Assurez-vous que le Crawler est activé dans les paramètres généraux. Personnellement je ne l’active pas car il peut être gourmand en ressources.
• Soumettre votre sitemap : Rendez-vous dans les paramètres de sitemap pour soumettre votre sitemap. Cela aidera le Crawler à trouver toutes les pages de votre site.
• Paramètres par défaut : Il est conseillé de laisser tous les autres paramètres par défaut, sauf si vous avez des besoins spécifiques.

Pour plus de détails, consultez les instructions du plugin qui fournissent des recommandations utiles pour maximiser l’efficacité du Crawler.

Étape 11 :  la Boîte à Outils du plugin

Battements de coeur

• Contrôle du Battements de coeur en Frontend : Activé – contrôle le heartbeat sur le frontend.
• TTL du Battements de coeur en Frontend : 0 – vous pouvez généralement le désactiver ici, mais testez-le.
• Contrôle du Battements de coeur en Backend : Activé – contrôle le heartbeat dans le backend.
• TTL du Battements de coeur en Backend : 0 – vous pouvez généralement le désactiver ici, mais testez-le.
• Battements de coeur de l’Éditeur : Activé – contrôle le heartbeat dans l’éditeur de publication.
• TTL du Battements de coeur de l’Éditeur : 120 – vous souhaiterez probablement des fonctionnalités comme les sauvegardes automatiques, mais envisagez d’augmenter ce chiffre.