LiteSpeed Cache - Guide détaillé :
Menu Page Optimisation
Ce guide sous entend que vous avez déjà procédé à l'installation de l'extension LiteSpeed Cache, si ce n'est pas le cas, vous n'avez pas sélectionné le bon guide.
Résumé d'optimisation des images
Beaucoup d'options amusantes ici que beaucoup d'entre vous reconnaîtront puisqu'elles figurent dans les autres extensions de mise en cache et d'optimisation.
Notre conseil ici est d'être prudent, la plupart de vos problèmes de mise en cache résulteront des choix effectués sur cette page ici.
La minification et le combinage des fichiers est un concept très intéressant sur papier mais n'est pas toujours LA solution.
La plupart des sites Web ne devraient pas minifier ou combiner leurs fichiers puisque la réduction crée un travail supplémentaire sur le serveur et ralentit la visite initiale.
C’est vraiment bien si vous avez des tonnes de visiteurs, mais pour un site avec peu d'achalandage votre cache sera pratiquement recréé à chaque visite vous créant ainsi des latences supplémentaires.
Il est préférable de le faire ces opérations depuis votre un CDN, ceux-ci gère normalement très bien la minification sur leurs serveurs au niveau DNS.
Si votre site est déjà léger, la minification n'aura de toute façon pas beaucoup d'effet.
Combiner le CSS ou le JS ne devrait vraiment pas être fait car cela pose souvent des problèmes et n'accélère pas vraiment votre site de toute façon.
Ce qui est très important au niveau de votre site Web est l'affichage, combien de secondes le site prend avant d'afficher à vos visiteurs.
Combiner et minifier vos fichiers créé des processus supplémentaires et fait en sorte qu'au lieu de charger plusieurs petits fichiers, vous vous retrouvez avec un plus gros fichier. Oui la taille totale du plus gros fichier est plus petite que la taille combinée des fichiers originaux, mais votre site aurait possiblement affiché plus rapidement avec seulement les quelques premiers fichiers chargés avant l'optimisation.
Si vous êtes un guru de l'optimisation, vous savez ce que vous faites et savez comment optimiser correctement le combinage et la minification.
Si vous ne savez pas ce que vous faites, fiez vous à moi la dessus et non à votre score GTmetrix ;)
Je ferrai un guide complet un jour sur ce sujet.
En attendant, vous pouvez tester les options tout de même, nos serveurs sont robustes et ce n'est pas ces optimisations qui vont leur faire du mal, mais il n'est pas impossible que les gains de performances pour l'affichage de votre site ne soient pas aussi au rendez vous qu'espéré.
Testez CHAQUE option UNE PAR UNE en vidant votre cache entra chacune d'elle.
Les résultats peuvent différer d'un site à l'autre.
Nous recommandons de minifier les fichiers par votre CDN mais vous pouvez quand même le faire à partir de LiteSpeed Cloud si le coeur vous en dit.
Le gain est plus impressionnant en passant par le CDN par contre.
*Notez bien:
L'utilisation d'un CDN comporte des avantages et des inconvénients. Si vous ne maitrisez pas ces outils, vous pourriez vous retrouver avec plus de troubles.
Avec l'utilisation d'un CDN, vous n'êtes plus protégé par notre pare-feu et nos règles de sécurité, si vous ne définissez pas de règles de leur côté vous pourriez exposer votre site à du piratage malgré vous.
Si votre site Web à été construit par une agence et qu'il est géré par un CDN de type gratuit, assurez vous d'avoir un accès en tout temps au service en cas de problèmes.
Réglages CSS
Minifier CSS:
Inactif
Vous devriez utiliser un CDN pour réaliser cette opération.
Combiner CSS:
Inactif
Vous pouvez activer si vous voulez mais soyez prudent, peut briser votre site, c'est du cas par cas.
CSS Combine External and Inline:
Inactif
Si vous avez activé l'option plus haut, il est recommandé de l'activer ici aussi, peut réparer certaines erreurs causées par le combinage.
Pousser CSS HTTP/2:
Inactif est plus sûre.
Peut-être activé, ne fais pas une grosse différence sur la majorité des sites.
Charger le CSS de manière asynchrone:
Inactif
Si actif, vous vous garantisses ce qu'on appelle en anglais un FOUC (Flash of Unstyled Content), votre site va charger le texte, l'afficher, ensuite appliquer le style de vos CSS. C'est laid et gênant pour vos visiteurs, ne faites pas ça.
Générer le CSS critique:
Inactif
Une autre option super belle sur papier mais que vous n'arriverez pas à maitriser, vous allez donc vous nuire plus qu'autre chose.
Seuls une mince poignée de site vont réellement profiter de cette option, le pourquoi du comment est complexe à expliquer, je vous invite à chercher pour "devrais-je générer le css critique ou pas?"
Générer le CSS critique en arrière-plan:
Actif
Laissez actif comme par défaut.
Si l'option juste au dessus est activée cette option est importante.
Si l'option juste au dessus est désactivée, cette option n'est pas utilisée de toute façon.
Séparer le cache du CCSS par type de publication:
Si vous utilisez un CSS critique, vous devez répertorier chaque type de publication qui ont leur propre design et CSS! (De bons exemples seraient les pages de catégorie / produit WooCommerce, les pages avec tableau de prix, etc.)
Comme vous m'avez bien écouté et pas activé le CSS critique, ne touchez à rien.
Séparer les URL de la CCSS:
Utilisé de la même manière que l'option précédente mais pour des URL uniques.
Probablement utilisé pour toute page spécifique qui utilise un CSS différent des autres pages.
Librairie CSS Async en ligne:
Inactif
Un vrai bon CSS DEVRAIT bloquer le rendu, sinon vous aurez des problèmes de FOUC (Flash of Unstyled Content).
Font Display Optimisation:
Vous ne devriez utiliser que "par défaut" ou "Block".
N'utilisez jamais Swap ou Fallback, car ils causent des problèmes FOUT (Flash of Unstyled Text).
Réglages JS
Minifier JS:
Inactif
Vous devriez utiliser un CDN pour réaliser cette opération.
Combiner JS:
Inactif
Vous pouvez activer si vous voulez mais soyez prudent, peut briser votre site, c'est du cas par cas.
Combiner les JS externes et en ligne:
Inactif
Si vous avez activé l'option plus haut, il est recommandé de l'activer ici aussi, peut réparer certaines erreurs causées par le combinage.
Pousser JS HTTP/2:
Inactif est plus sûre.
Peut-être activé, ne fais pas une grosse différence sur la majorité des sites.
Charger le JS en différé:
Inactif est plus sûre.
Certains JS sont doivent êtres chargés en priorité "above the fold" et ne devraient pas êtres différés.
Vous devez tester sur votre site pour voir si les résultats fonctionnent.
Load Inline JS:
Par défaut est plus sûre.
Le fait d'utiliser "Prêt après DOM" ou "Différé" peut améliorer les scores de page ou aider d'autres optimisations JS à fonctionner correctement… mais ça peut également modifier l'affichage ou certaines fonctions du site.
Vous devez tester sur votre site pour voir si les résultats fonctionnent.
Optimisation
Cache TTL CSS/JS:
La valeur par défaut est bien.
Utiliser une valeur moindre si vous faites beaucoup de modifications à votre contenu (en cours de développement par exemple).
Utiliser une valeur supérieur si vous ne touchez plus au site.
Minifier le HTML:
Inactif
Vous devriez utiliser un CDN pour réaliser cette opération.
Pré-chargement des DNS:
Tactique intelligente de préchargement des DNS pour les domaines externes, afin qu'ils se chargent plus rapidement lorsque vous cliquez sur leurs URL ou lorsque votre site charge des actifs externes en provenance d'eux. Vous ne savez pas quoi mettre?
Ouvrez simplement votre site dans votre navigateur en mode Incognito > Inspecter> Sources…
Saisissez maintenant toutes les sources de domaine externes que vous voyez. Tous les Google Analytics, les polices d'écritures (Fonts), les médias sociaux, le service de chat, le CDN, etc.
DNS Prefetch Control:
Actif si vous n'utilisez pas l'option plus haut.
Précharge automatiquement tous les domaines appelés depuis CSS et JS.
Ça semble une bonne idée, mais pas nécessaire si vous les avez déjà appelés manuellement à partir de l'option précédente.
Retirer les chaînes de requêtes:
Inactif au début, actif par la suite.
Cette option ne propose aucune amélioration de la vitesse lorsqu'elle est activée.
La plupart des mises en cache peuvent désormais gérer les chaînes de requête.
La plupart des gens utilisent cette option uniquement pour obtenir de meilleurs scores aux tests de pingdom et gtmetrix.
Je recommande de le laisser désactivé si votre site est encore en phase de conception, sinon vous rencontrerez un problème CSS / JS obsolète.
Charger les Google Fonts de manière asynchrone:
Inactif
Tester avec précautions.
Je n'ai pas remarqué beaucoup de différence actif ou inactif, je soupçonne que les polices Google les plus courantes sont déjà mises en cache sur votre navigateur à partir d'autres sites que vous avez visité.
Retirer les polices Google:
Inactif
Si vous êtes certain que votre site n'utilise pas de polices Google ou que vous utilisez des polices personnalisés chargé à même votre hébergement, vous pouvez vous assurer ici que votre thème ne charge pas de police Google inutilement.
Retirer les emoji WordPress:
Actif
Supprime un petit appel JS emoji qui n'est plus nécessaire de nos jours car les navigateurs modernes peuvent afficher les emojis de manière native.
Retirer les balises Noscript:
Inactif
Les balises <noscript> sont utilisées pour la compatibilité avec les anciens navigateurs qui ne prennent pas en charge JavaScript, ou les navigateurs modernes où JS est désactivé pour des raisons de sécurité. Ils donnent au navigateur des instructions sur la marche à suivre s'il ne peut pas exécuter le script associé. Cependant, ces balises prennent de la place.
Lorsque cette option est activée, les balises <noscript> sont supprimées, ce qui entraîne une taille de page plus petite, mais moins de compatibilité pour les navigateurs sans JavaScript fonctionnel. Vous devrez décider vous-même si les gains d'efficacité valent les pertes de compatibilité.
Réglages des médias
Chargement différé des images (LazyLoad):
Inactif
Cette fonction cause souvent des problèmes depuis que les thèmes et constructeurs de page proposent des animations sur les images.
Basic Image Placeholder:
Permet de définir une image encodée en base64 qui sera utilisé en attendant que l'image réelle soit chargée correctement.
Texte indicatif responsive:
Inactif
Actif si vous utilisez la fonction "Chargement différé des images".
Réserve l'espace qu'utilisera l'image lorsque la page est générée, évite certains déformement.
Je laisse inactif puisque je n'utilise pas la fonction "Chargement différé des images".
Responsive Placeholder SVG:
Comme "Basic Image Placeholder" mais vous pouvez utiliser une image SVG qui sera converti en SVG base 64 directement.
Si votre SVG contient des attributs {color} ils seront remplacés par l'option ci-dessous.
Responsive Placeholder Color:
Utilisez une couleurs comme gris pâle ou quelque chose de très sobre, c'est juste pour faire un léger contraste pour aviser vos utilisateurs que quelque chose va s'afficher ici.
LQIP Cloud Generator:
Actif si vous avez beaucoup d'images
Technologie d'espace réservé (PlaceHolder) avancée montrant une version de très basse qualité de votre image qui sera remplacée par la version de haute qualité.
C'est une bonne chose pour les sites comprenant beaucoup d'images, permet d'afficher le site plus rapidement sans devoir utiliser les technologies de LazyLoading.
LQIP Quality:
4 par défaut.
Vous pouvez tester d'autres valeurs, mais plus la qualité est élevée, moins le gain de performance est présent.
LQIP Minimum Dimensions:
Les requêtes LQIP ne seront pas envoyées pour les images dont la largeur et la hauteur sont inférieures à ces dimensions.
Generate LQIP In Background:
Actif par défaut
Chargement différé des iframes (LazyLoad):
Inactif
Utile si vous avez des iframes ou des vidéos intégrés qui ne sont pas chargés sur le premier affichage du site (above the fold).
Peut briser si vous avez des éléments JS associés à ces iframes (animation ou autre).
Utiliser avec précaution.
Bibliothèque de chargement progressif d'images en ligne:
inactif (meilleure performance de cette façon à mon avis).
Peut être activé si vous souhaitez supprimer une autre requête HTTP à des fins de score de page ou si la conception de votre site est super légère.
Médias exclus
Ici j'ai inclus les thermes anglais aussi puisque la traduction fait vraiment mal.
Exclut l'image du chargement lent (Lazy Load Image Excludes):
Exclure des images du chargement différé en spécifiant leur URL.
Probablement une bonne idée pour toutes les images "After The Fold" ou celles figurant sur des pages constamment parcourues ou défilées rapidement par les utilisateurs.
Le nom de la classe d'image de chargement différé exclut (Lazy Load Image Class Name Excludes):
Exclure des images du chargement différé en spécifiant leur classe CSS.
Lazy Load Image Parent Class Name Excludes:
Pour les images qui n'ont pas de classe CSS directement mais que vous ne voulez pas spécifier par URL une par une, vous pouvez utiliser cette fonction pour les les exclure en utilisant la class CSS de leur élément parent.
Lazy Load Iframe Class Name Excludes:
Méthode très efficace pour exclure certaines vidéos du chargement différé.
Par exemple, un vidéo situé au début de votre site ou ceux qui prennent plus de temps à charger et que vous ne voulez pas différer le chargement.
Lazy Load Iframe Parent Class Name Exclude:
Méthode pratique pour exclure les iframes qui n'ont pas de classe CSS attribuée en utilisant la classe de leur élément parent.
Lazy Load URI Excludes:
Méthode efficace pour désactiver les fonctions de chargement différé sur certaines pages complète.
Par exemple, une "landing page" sur laquelle vous souhaitez que les images et les vidéos se chargent dès que possible.
LQIP Exclut:
Permet d'exclure certaines images pour la génération de "placeholder" de basse qualité.
Localisation
Gravatar Cache:
Inactif pour la plupart des sites.
Excellente fonctionnalité pour les sites avec des tonnes de commentaires.
Pas nécessaire si la plupart de vos messages n'ont pas beaucoup de commentaires et/ou n'ont pas beaucoup de trafic.
Gravatar Cache Cron:
Inactif si Gravatar Cache est inactif.
Actif si Gravatar Cache est actif.
Gravatar Cache TTL:
604800 = 1 semaine (par défaut), c'est bien.
7884000 = 3 mois, j'ajusterais à cette valeur si j'utilisait cette fonction, je ne connais pas personne qui modifie vraiment son gravatar...
Localiser les ressources:
Actif, ou pas...
Vous voudrez peut-être activer cette option si votre score sur gtmetrix ou pagespeed vous suggère d'optimiser des ressources (javascript, css, etc...) qui ne sont pas hébergées sur votre compte. Par exemple, les google fonts, google analytics, etc...
Comme vous n'avez aucun contrôle sur ces ressources puisqu'elles sont externes, vous n'avez aucune capacité de les optimiser.
Si défini sur Actif, les ressources seront copiées en local dans votre cache et elles pourront être optimisées si nécessaire.
Cette option est assez récente, nous n'avons pas vérifié très loin si l'opération cause des délais supplémentaires ou pas, très intéressant sur papier mais à utiliser avec précaution.
Localization Files:
Utilisé pour spécifier les ressources externes à importer.
Vous devez spécifier l'URL complète de la ressource, les sources .js uniquement sont autorisées, les autres types de fichiers seront ignorés.
Pour vérifier les ressources à importer, faites valider votre score chez gtmetrix.
Accordage (Tuning)
CSS exclu:
Lister tous les fichiers CSS que vous ne souhaitez pas réduire ou combiner.
Vous pouvez lister leur nom de chaîne complet (par exemple "elementor-builder.css") ou le nom de chaîne partiel (par exemple "elementor").
Permet d'activer les options de minification ou combinage et exclure les fichiers qui peuvent causer des bris de sites.
JS exclu:
Même chose qu'en haut, mais pour le JS.
Règles CSS critique:
Si vous utilisez la fonction «Charger le CSS de manière asynchrone» que nous ne recommandons pas, copiez-collez ici toutes les règles CSS critiques pour vous assurer qu'elles se chargent en premier.
JS différé exclut:
Si vous utilisez la fonction «Charger JS différé», vous pouvez exclure n'importe quel JS spécifique ici pour qu'ils continuent à se charger comme ils le feraient normalement.
Pratique pour tout JS nécessaire et critique à l'affichage du site.
URI exclut:
Lister ici toutes les URL de page que vous souhaitez exclure de toute optimisation de page.
Pratique pour réparer rapidement (disons appliquer un pansement puisque ce n'est pas propre sur le long terme) les pages qui pourraient êtres brisés par les différentes optimisations.
Vous ne devriez pas utiliser cette fonction, si une page n'affiche pas bien, trouvez pourquoi à la place.
Rôle exclu:
Permet d'exclure certains rôles (pour les utilisateurs connectés) des optimisations de page.
Vous ne devriez pas utiliser ces fonctions sauf pour des tests ou du débogage.
Précédent: Guide détaillé : Menu Optimisation d'image
Suivant: Guide détaillé : Menu Base de données
