PlanetHoster PlanetHoster host Your world

Configuration de Litespeed Cache avec le CDN de CloudFlare

Avec la popularité croissante des applications "CMS" ou "Content management systems" telles que WordPress,  Joomla!, PrestaShop, etc, il est devenu impératif d'y configurer un système de mise en cache efficace afin d'éviter que les visites simultanées n'incombent trop l'hébergement web. Cette configuration permet des temps de chargement très rapides, dessert une version "pré calculée" et une mise en cache des pages de votre site web.

Étape 1: Installer LiteSpeed Cache (LSCache) et Cloudflare

L’installation du plug-in LiteSpeed Cache (LSCache) est très simple.

Rendez-vous dans le "MarketPlace" de plug-in de votre CMS. Cherchez LSCache, puis cliquez sur Installer et activer.

Après avoir installé le plugin, pour le faire fonctionner, rendez-vous dans la section:         

  •  Paramètres

    • Onglet Général

      • "Activer/Désactiver LsCache" (Enable LiteSpeed Cache )

      • Accédez à Gérer >> cliquez sur "tout purger" (Purge All).

Étape 2: Principaux paramètres de LSCache

[1] – Général

  • Enable LiteSpeed Cache – Activé (ENABLE).

  • Default Public Cache TTLLaissez la valeur par défaut, 604800.

  • Default Private Cache TTLLaissez la valeur par défaut, 1800.

  • Default Front Page TTLLaissez la valeur par défaut, 604800.

  • Default Feed TTLLaissez la valeur par défaut, 0.

  • Default 404 Page TTLLaissez la valeur par défaut, 3600.

  • Default 403 Page TTL – Laissez la valeur par défaut, 3600.

  • Default 500 Page TTLLaissez la valeur par défaut, 3600.

  • Automatically Upgrade – Activé ou Désactivé. (il est préférable de mettre les plugins à jours manuellement. Ceci fonctionnera seulement si WP-Cron est activé (Par défaut, WP-Cron est activé dans WordPress ).

[2] – Cache

  • Cache Logged-in Users – Désactivé.  (ne créera pas un fichier de cache pour chaque nouvel utilisateur).

  • Cache Commenters – Activé. Rechargez la page lorsqu'un utilisateur laisse un commentaire.

  • Cache REST APIActivé. Cette option mettra en cache les requêtes "restAPI" de WordPress.

  • Cache Login Page – Activé. Cette option mettra en cache la page de "Login".

  • Cache favicon.ico – Activé. Cette option mettra en cache le favicon.ico.

  • Cache PHP Resources – Activé. Cette option mettra en cache les ressources PHP qui sont chargées par les thèmes.

  • Cache Mobile – Activé. Cette option permettra d'afficher des fichiers HTML différents pour la version "mobile" ou la version "desktop".

  • List of Mobile Users AgentsLaissez la valeur par défaut.

  • Private Cached URIs – Il y a des pages qui ne devraient jamais être mises en cache publiquement. Vous pouvez mettre en cache de facon privée. Listez ces URLs ici .

[3] – Purge

  • Purge All On UpgradeActivé. Cette option indique s'il faut purger toutes les pages lorsqu'une mise à jours est exécutée sur des plugins installés.

  • Auto Purge Rules For Publish/UpdateLaissez la valeur par défaut. Choisir "All Pages" si vous avez des widgets sur vos posts.

  • Scheduled Purge URLs –Permet de planifier de vider la "cache" à une date/heure précise pour les URLs de votre choix.

  • Scheduled Purge Time – Permet de choisir une date pour l'option plus haut.

[4] – Excludes

  • Force Cache URIs –Sert à forcer la "cache". Que la fonction "no-cache" soit activée ou non.

  • Do Not Cache URIs – Permet de choisir quelle page sera en "cache" ou non.

  • Do Not Cache Query Strings – Choisir que certaines requêtes "Query" ne soient pas en "cache".

  • Do Not Cache Categories – Prévenir que certaines catégories ne soient pas mises en "cache".

  • Do Not Cache Tags – Prévenir que certain "tags" spécifiques ne soient pas mis en "cache".

  • Do Not Cache Cookies – Prévenir que certains "cookies" spécifiques ne soient pas mis en "cache".

  • Do Not Cache User Agents – Prévenir que certain "users agents" spécifiques ne soient pas mis en "cache".

  • Do Not Cache Roles – Prévenir que certain "user roles" spécifiques ne soient pas mis en "cache".

Étape 3: Paramètres avancés de LSCache

  • CSS Minify – Activé. Choisir "désactiver" si vous utilisez CloudFlare et que cette option est activée sur celui-ci.

  • CSS Combine – Désactivé. Le mettre à "activer" -*peut perturber le chargement de CSS*.

  • CSS HTTP/2 Push – Désactivé. Envoyez le CSS au Navigateur Web avant que la requête. *peut perturber le chargement de CSS*.

  • JS Minify – Désactivé. Il est recommandé de minimiser le code JavaScript de CloudFlare. Minimiser le code JavaScript à partir d’un plugin peut perturber Rocket Loader de Cloudflare.

  • JS Combine – Activé. Désactiver si ça créer des perturbations sur votre site.

  • JS HTTP/2 Push – Activé. Envoyer le JavaScript au Navigateur Web avant que la requête. HTTP/2 est requis pour fonctionner.

  • CSS/JS Cache TTL – Laissez la valeur par défaut.

  • HTML Minify – Activé. Choisir "désactiver" si déjà activé dans Cloudflare.

    • Inline CSS Minify - Activé. Désactiver si CSS est déjà "Minify(minimiser)" dans Cloudflare.

    • Inline JS Minify - Désactivé. Il est recommandé de minimiser le code JavaScript de CloudFlare.

  • Load CSS Asynchronously – Activé.

    • Generate Critical CSS – Activé ou Désactivé. Permet de charger les règles CSS «critiques» afin d'accélérer le chargement des pages.

    • Generate Critical CSS in Background – Activé.

    • Separate CCSS Cache Post Types – À utiliser si vous devez utiliser plusieurs fichiers CSS critiques pour un seul type de post.

    • Separate CCSS Cache URIs –  À utiliser pour spécifier les URLs avec un formatage non classique afin de ne pas créer des fichiers CSS différents.

    • Inline CSS Async Lib – Activé.

  • Load JS Deferred – Désactivé.  Ceci est déjà activé dans la configuration CloudFlare. Pas besoin d'avoir 2 fois les mêmes options.

  • Exclude JQuery – Activé.

  •  DNS Prefetch – Ceci va pré-charger les domaines externes (exemple Google Analytics and Google Fonts) avant qu'une requête ne soit faite. Ceci permet de charger les pages plus rapidement.

  •  Remove Comments – Désactivé.

[6] – Tuning

    • Combine CSS Priority – Désactivé.  Activé si vous avez besoin de charger des "COMBINED CSS" avant des "UNCOMBINED CSS".

    • CSS Excludes – Permet d'exclure des fichiers CSS d'être compressés.

    • Combined JS Priority – Désactivé. Activé si vous avez besoin de charger des "COMBINED JS" avant des "UNCOMBINED JS".

    • JS Excludes – Permet de lister les fichiers JS exclus de la liste à "minimiser".

    • Max Combined File SizeLaissez la valeur par défaut,

    • Remove Query Strings – Désactivé.

    • Load Google Fonts Asynchronously – Activé.  Ajoutez une pré-connexion afin de charger Google Fonts plus rapidement.

    • Remove Google Fonts – Désactivé ou Activé.  Permet de retirer les "Fonts" de votre thème afin d’utiliser ceux de Google.

    • Critical CSS Rules – Permet de mettre en place des règles de CSS critiques quand le "Asynchronously" est activé.

    • JS Deferred Excludes – À utiliser quand "JS Deferred" est activé. Permet d'exclure des fichier JS.

    • Remove WordPress Emoji – Activé. Désactivé si vous désirez loader le fichiers "JS WordPress emojis".

    • URI Excludes – Un filtre permettant d'exclure certains URLs de l'optimisation.

    • Role Excludes – Un filtre permettant d'exclure de l'optimisation certain type d'utilisateur.

[7] – Media

    • Lazy Load Images – Activé.  Permet de délayer le chargement des images quand elles ne sont pas visibles sur la page.

    • Lazy Load Image Excludes – Permet d'exclure le "lazy loading" de certaines images spécifiques.

    • Lazy Load Image Class Name Excludes –Permet d'exclure le "lazy loading" de certain groupe d'image basé sur leur classe.

    • Lazy Load Image PlaceholderPermet de spécifier une image de marque de substitution jusqu'à ce que le "lazy loading" soit terminé. 

      • Responsive Placeholder – Activé. Permet de laisser une place libre pour spécifier une image de marque de substitution.

      • Responsive Placeholder Background Color – Choisir la couleur de l'image de marque de substitution.

      • Generate Responsive Placeholder in Background – Activer pour générer l'image de marque de substitution automatiquement. Désactiver pour charger l'image de marque de substitution pendant que l'utilisateur attend.

    • Lazy Load Iframes – Désactivé.  Mettre Activé Permet de "Lazy Load" les "iframes "

    • Inline Lazy Load Images Library – Désactivé.  Mettre Activé permet d'accéder à la bibliothèque d'images JS en format HTML, ce qui peut réduire les requêtes HTTP.

    • Optimize Automatically – Activé permet d'utiliser LSCache pour optimiser vos images. Désactivez-le si vous utilisez un plugin différent pour optimiser les images. 

      • Optimize Cron – Activé.

      • Optimize Original Images – Activé.

      • Remove Original Backups – Désactivé.

      • Optimize WebP Versions – Désactivé.  Mettre activé si vous désirez sauvegarder tous les PNG et JPG sous format WebP.

      • Optimize Losslessly – Mettre Activé si vous désirez garder vos images en qualité maximum.

      • Preserve EXIF/XMP data – Désactivé.  Mettre activé si vous désirez garder les données liées aux images (équipement, date droit auteur, coordonnées GPS, etc.)

      • Image WebP Replacement – Désactivé.  Mettre activé si vous désirez sauvegarder tous les PNG et JPG sous format WebP.

      • WebP Attribute To Replace – Spécifiez quels types d'images doivent changer de format pour WebP

      • WebP For Extra srcset – Désactivé. Mettre activé permet d'activer WebP pour générer les images en dehors de l'environnement WordPress.

Voici le code CSS fournis par LiteSpeed afin de charger rapidement les images en utilisant "Lazy Load".

/* PART 1 - Before Lazy Load */
img[data-lazyloaded]{
	opacity: 0;
}

/* PART 2 - Upon Lazy Load */
img.litespeed-loaded{
	-webkit-transition: opacity .5s linear 0.2s;
	-moz-transition: opacity .5s linear 0.2s;
	transition: opacity .5s linear 0.2s;
	opacity: 1;
}

[8] – CDN

    • Enable CDNDésactivé. Comme nous utilisons CloudFlare, laisser à désactivé.

    • CDN Mapping – Si vous utilisez CloudFlare, laisser la valeur par défaut.

    • Original URLs – Si vous utilisez CloudFlare, laisser la valeur par défaut.

    • Included Directories – Si vous utilisez CloudFlare, laisser la valeur par défaut.

    • Exclude Path – Si vous utilisez CloudFlare, laisser la valeur par défaut.

    • Load JQuery Remotely – Si vous utilisez CloudFlare, laisser la valeur par défaut.

    • Quic Cloud API – Si vous utilisez CloudFlare, laisser la valeur par défaut.

    • Cloudflare API – Activé. Allez dans le panneau d'administration de votre API Cloudflare.

[9] – ESI

    • Enable ESIDésactivé. Activez, si vous voulez désactiver la mise en cache de la barre d'administration ainsi que le formulaire de commentaires.

    • Cache Admin BarLaisser la valeur par défaut. Activez, si vous voulez mettre en cache la barre d'administration (Admin Bar).

    • Cache Comment FormLaisser la valeur par défaut. Activez, si vous voulez mettre en cache le formulaire de commentaires. (Comment Form).

    • Vary GroupLaissez la valeur par défaut.

[A] – Advanced

    • Object CacheDésactivé. Activé permet de mettre en cache les "requêtes" faites à la base de données. Ainsi, si une requête est répétée, elle prendra la version en cache.

    • Browser Cache – Activé.

    • Browser Cache TTLLaissez la valeur par défaut, 2592000.

    • Check Advanced Cache – Laissé coché si vous utilisez un autre plugin de cache. Il est vraiment pas recommandé d'utiliser plusieurs modules de cache en même temps.

    • Login Cookie – Permet de créer un "Cookie" unique pour le "Login" permettant de gérer les plug-ins LSCache utilisés par plusieurs sites à partir d’un seul hôte virtuel (Virtual Host).

    • Purge All HooksLaissez la valeur par défaut.

    • Improve HTTP/HTTPS CompatibilityDésactivé.  Si Activé, va sauvegarder tous les "cookies" de connexion en "http" afin d'être accessible en http et https.

    • Instant ClickDésactivé.  Mettre activé si vous désirez pré-charger les liens d'un site lorsque vous passez la souris par dessus (hover).

[D] – Debug

Cette section n'est pas obligatoire dans la configuration par défaut. Permet seulement de "débugger"

    • Diable All FeaturesDésactivé

    • Debug LogDésactivé.

    • Admin IPsVotre adresse IP.

    • Debug LevelBasique ou Avancé.

    • Log File Size LimitLaissez la valeur par défaut, 3MB.

    • Heartbeat – Activé.

    • Log CookiesDésactivé.

    • Collapse Query StringsDésactivé.

    • Log FiltersDésactivé.

    • Excludes FiltersLaissez la valeur par défaut.

    • Exclude Part FiltersLaissez la valeur par défaut.

[C] – Crawler

L’activation du robot n’est pas recommandée si vous utilisez un hébergement TheWorld en raison de la consommation importante de ressources.

    • DelayLaissez la valeur par défaut. 500.

    • Run DurationLaissez la valeur par défaut, 400.

    • Interval Between RunsLaissez la valeur par défaut. 600.

    • Crawl IntervalLaissez la valeur par défaut. 302400.

    • ThreadsLaissez la valeur par défaut. 3.

    • Server Load LimitLaissez la valeur par défaut, 1.

    • Site IPPour le "crawling" par IP au lieu du nom de domaine.

    • Role Simulation Utilisez pour analyser en tant qu'utilisateur spécifique.

    • Cookie Simulation – Pour le "crawling" un cookie spécifique.

    • Custom Sitemap – Permet de "crawl" votre propre sitemap Google XML.

    • Sitemap GenerationLaissez la valeur par défaut.  Permet de générer votre SiteMap.

[W] WOOCOMMERCE

    • Product Update Interval – Laisser la valeur par défaut.

    • Use Front Page TTL for the Shop PageDésactivé, le mettre activé va utiliser le paramètre "front page TTL" de l’onglet “General” .

    • Privately Cache CartDésactivé, ne pas mettre le "panier" en cache.

Étape 4 – Paramètres CLOUDFLARE de rapidité

Un compte Cloudflare est requit pour l'intégrer à LSCache. Vous pouvez créer un compte gratuit si vous n’en avez pas encore.

SPEED  >  OPTIMIZATION

    • Auto Minify – "Minify" seulement le JavaScript (HTML et CSS ont été minify dans LSCache". Ne les activez pas à la fois dans LSCache et Coudflare  - en choisir seulement un.

    • Brotli – Activé. Brotli est similaire à GZIP. Il est plus performant au niveau du travail de compression de fichier.

    • Rocket Loader –Activé. Le "Rocket Loader" est utilisé pour "defer" JavaScript. Cela risque de ne pas fonctionner si JavaScript a été "Minify" avec LSCache.

    • Railgun – Activé. Railgun aide au chargement plus rapide des pages Web non mises en cache. Cette fonctionnalité est disponible avec le plan d’affaires de 200 $ par mois de Cloudflare.

SCRAPE SHIELD

    • Email Address Obfuscation – Activé. Permet de contrer les robots de collecter votre adresse e-mail pour réduire les e-mails indésirables dans votre boîtes courriels susceptibles de consommer des ressources sur votre hébergement.

    • Server-side Excludes – Activé.  Rendre votre contenu visible seulement aux vrais visiteurs.

    • Hotlink Protection – Activé. La protection Hotlink prévient les autres sites Web de faire des liens avec des fichiers de votre site. Les visiteurs pourront toujours voir et télécharger des images de votre site Web, mais cela garantit que les sites spammés ne peuvent pas utiliser votre bande passante en renouant avec des images hébergées sur votre site

Étape 5 – Purge all cache

Une fois la configuration de LiteSpeed ​​Cache et de Cloudflare terminée, purgez tout le cache de la page "LSCache Manage". Essayez de faire un test de vitesse avec Google PageSpeed ​​Insights .

Votre plugin LiteSpeed ​​Cache devrait maintenant être configuré avec Cloudflare. Si vous configurez Cloudflare pour la première fois, l'activation du DNS avec votre hôte Web peut prendre jusqu'à 24 heures.

Si vous avez besoin de l'aide interne de LiteSpeed, ils sont très actifs dans leur communauté.

• Email: support@litespeedtech.com
• La page de blog de LiteSpeed
• Guide du débutant sur leur blog
• Forum d'assistance WordPress.org