Comment améliorer vitesse de son site WordPress LiteSpeed

Tu dois savoir que la vitesse d’un site web est quand même assez importante.  Elle est le standard pour votre expérience utilisateur et c’est encore plus valable si vous avez un site de vente e-commerce.

Si vous vous préoccupez un tant soit peu de votre site web et que vous souhaitez augmenter son SEO et d’être mieux référencé sur Google et que les autres moteurs de recherche, penser à la vitesse de son site web est primordial parce que sinon vous passez à côté d’une large audience qui pourraient venir sur votre site web gratuitement!

Alors pour augmenter la vitesse de son site Web lorsque nous sommes sur WordPress, quelles sont les options qui s’offrent à nous?

Alors c’est bien, nous avons plusieurs extensions, nous avons par exemple WP Rocket,  Siteground SG Optimizer, mais surtout, nous avons LiteSpeed cache.

Mais qu’est-ce que LiteSpeed ?  En fait, c’est une technologie de serveur qu’un certain nombre d’hébergeurs utilisent aujourd’hui et qui permet de gérer les ressources d’une certaine manière comme à apache, nginx etc, LiteSpeed est donc un type de serveur et donc si votre serveur est sous LiteSpeed, il est recommandé d’utiliser LiteSpeed cache. Car il va directement utiliser les fonctionnalités de native de LiteSpeed qui est sur votre serveur.

Souvent le problème, c’est que les serveurs web qui utilisent LiteSpeed sont des hébergements mauvaise qualité, par exemple, je pense ici à Hostinger, SiteGround, et beaucoup de petits hébergeur en partagé.

Version vidéo

Tu préfères la version vidéo? Je t’invite à regarder ce tutoriel version vidéo sur la chaîne YouTube Informerick.

Prérequis

Alors, vous avez compris que vous avez besoin d’un serveur qui est la technologie LiteSpeed. Allez vous informer avec votre hébergeur parce que cela est important de savoir si elles utilisent cette technologie.

Télécharger l’extension 

Alors voici ce qu’il faut faire: 

Il va falloir ajouter extension à votre site web. Pour la télécharger, c’est ici:  Télécharger LiteSpeed cache – Extensions WordPress 

Noter que l’extension est totalement gratuit et que la seule fonctionnalité payante est l’utilisation de leurs CDN Quic.Cloud, mais je ne crois pas que vous en aurez besoin.

Configurer LiteSpeed cache

Alors ici faites attention, parce que ça va être une longue partie. Prenez le temps de vérifier chacune des sections de ce tutoriel, que nous allons voir ensemble pour faire la configuration de l’extension.

N’oubliez pas que ce que je vais vous dire est généraliste, je ne vais pas spécifier exactement pour votre site web, si votre site web a beaucoup de contenu multimédia ou beaucoup d’images et si votre site web est spécialisée dans la vidéo, etc. 

Alors, vous devrez vérifier chacune des options faire vos propres tests et bien sûr vous rappeler que ce que nous montrons, c’est ce que veulent dire les options et comment bien configurer, ce n’est pas un petit guide absolu sur comment rendre un site web plus rapide, c’est vraiment la présentation des options de ce plugin LiteSpeed Cache.

Presets

Le principe, c’est que ce sont des configurations prédéfinies qui sont recommandées par LiteSpeed, vous avez 5 choix. 

Essentiel 

Vous avez la formule essentielle qui va aller dans le strict minimum. Dites-vous que si vous avez des problèmes avec ce strict minimum, c’est que votre site est développé et qu’il ne devraitj amais être publié, c’est absolument le strict minimum.

La formule essentielles ne s’occupe du cache. Il ne va pas toucher à tout ce qui est des fichiers de votre site web. Il va simplement mettre en cache les éléments. Par cache, ce qui je veux dire, c’est qu’il va sauvegarder certains petits fichiers qui sont utilisés par votre site web dans le navigateur internautes et sur votre serveur au lieu de faire des requêtes sur le serveur de renvoyer les mêmes fichier, il va se rappeler des fichiers qu’il a besoin nécessaire.

Basique

La formule basique va un peu plus loin, il contient tout ce qu’il y a dans la formule essentielle mais nous ajoutons deux choses:

•  l’optimisation de vos images
•  le cache pour les appareils mobiles

Cette option serait le strict minimum que je vous recommenderais, c’est lui qui va jouer un gros atout à votre SEO parce que justement le cache niveau navigateurs mobiles. Aujourd’hui, n’oubliez pas que Google est mobile-first.

Avancé

La formule avancée pousse plus loin c’est l’approche recommandé par LiteSpeed et celle que je vous recommande aussi, cette formule vous permet d’aller jouer dans vos fichiers de votre site il va aller minifier les fichiers JavaScript, les fichiers HTML et JavaScript. Aussi l’affichage des polices sera différé.

Agressif

La formule agressive comme son nom l’indique est vraiment agressif sur votre site web, c’est à partir de là qu’il peut y avoir certains problèmes à votre site Web lorsque nous touchons aux paramètre de ce mode. Il peut cependant considérablement augmenter la vitesse de votre site s’il est bien codé.

Ici, il va combiner vos fichiers CSS et JavaScript, ainsi que de jouer avec le lazy load (téléchargements différé, lorsque nous n’avons besoin), exemple lorsque nous ne voyons pas une image, elle ne sera pas charger avant que l’internaute soit rendu pour la voir, cela peut par contre causer des problèmes s’ils sont mal placés.

Extrême 

La combine extrême tant qu’à elle va jouer avec le délai des fichiers et le chargement des ressources selon le besoin. Là, il y a très forte chance que la plupart des sites web vont avoir des problèmes, mais peut-être si vous êtes vraiment motivé allez-y avec cette formule mais il va falloir repenser votre site à coup sûr!

La section général

Ce sont les paramètres généraux vis-à-vis l’extension

Voici les options que vous pouvez y ajouter

• Mettre à jour automatiquement
  • Capable de mettre l’extensions à jour automatiquement lorsque de nouvelles mises à jour sortent.
• Clé de domaine
  • La clé de domaine permet de créer un lien avec Quic.cloud, le CDN que je vous parlais au début pour utiliser des outils avec certaines ressources depuis leurs serveurs, c’est la seule fonctionnalité payante qui se retrouve dans LiteSpeed.
• Mode visiteur
  • Si votre site web est une landing page ne page qui n’a pas d’utilisateur ou de contenu dynamique, vous pouvez activer cette option. Il va vraiment tout mettre en cache, sans avoir besoin de toujours mettre à jour.
• Optimisation visiteur
  • Optimise pour les visiteurs en premier lieu
• IP du serveur
  • Permet aux services cloud de directement appeler votre IP au lieu de votre nom de domaine qui va décharger les DNS 
• Notifications
  • C’est un genre d’abonnement infolettre pour votre site web on se voit la dernière nouveauté à propos de l’extension.

La section cache

Bon maintenant, nous attaquons au plus gros morceau du gâteau en même temps me dites-vous c’est dans le nom du plugin “cache”. Nous allons élaborer chacun des paramètres qui seront séparer par des onglets.

| 1 | Cache

• Activer la mise en cache
  • Avec ce paramètre, vous serez capable de mettre un cache votre site web c’est le paramètre général qui permet d’activer tout ce qui a fait la mise en cache. Après ça, nous pourrons configurer les autres paramètres plus avancée du cache. Mais lui c’est les paramètres général.  

S’il n’est pas activé, aucun autres paramètre de cache ne sera prise en compte

Recommandation: Actif

• Mettre en cache les utilisateurs connectés
  • Ceci permet de mettre un cache en mode cache privé les pages dynamiques à chaque des utilisateurs connectés. 

Recommandation:

Si votre site n’a pas d’utilisateur: Inactif

Si votre site a des utilisateurs et votre contenu change souvent: Inactif

Si votre site a des utilisateur et votre contenu ne change pas souvent: Actif

• Mettre en cache les commentateurs
  • Mettre un cache les commentaires des utilisateurs dont leurs commentaires sont en attente.

Recommandation: Inactif

• Mettre en cache l’API REST.
  • Permet de mettre un cache les requêtes à l’API REST de WordPress, qui fait la connexion entre le serveur et le client. Cela peut faire économiser de nombre de requêtes que le client veut télécharger, mais cela ne va rien changer pour le serveur.

Recommandation: Inactif (Car peut causer des problème)

• Mettre en cache la page de connexion
  • Ceci va vous permettre de mettre un cache les page d’inscription et de connexion de votre site web.

Le problème à celui-ci c’est que lorsque vous utilisez des choses dynamiques prenons par exemple les Captcha, les requêtes effectué n’iront pas vers une nouvelle page, donc ils seront vers une page cache équivalente, ce qui peut causer des boucles 

Recommandation : Inactif

• Mettre en cache favicon.ico
  • Permet de mettre en cache votre favicon (la petite icône qui représente votre site web)

Recommandation: Actif

• Ressources PHP de cache
  • Certains thèmes et autres plugins font appel à PHP pour faire des requêtes dynamiques et avoir du contenu dynamique à votre site.

Recommandation: 

Si le contenu dynamique de votre site change constamment: Inactif

Si le contenu dynamique a juste des ajouts mais beaucoup de choses qui restent en place: Actif

• Cache mobile
  • Permet de créer un fichier de caché par et pour les appareils mobiles 

Recommandation;

Si votre site a une version mobile dédié : Actif

Si votre site est responsive : Inactif

• Liste des agents utilisateurs mobile
  • Les agents sont les  type de navigateur et d’appareils qui sont pris en compte dans une requête vers votre site, nous pouvons recevoir ses paramètres cependant je vous conseille de laisser les paramètres par défaut.

Recommandation: Laisser par défaut

• URI mises en cache privées
  • Ces mises en cache ne seront pas en public et donc contiennent souvent des informations confidentielles. Par exemple une page de paramètre utilisateur, etc.

Recommandation: Mettre les pages qui peuvent être caché mais qui contiennent du data sensible.

• Forcer la mise en cache des URL

Si certaines pages conçues par certaines extension bloquent le cache, vous pouvez forcer la mise en cache en passant outre ces paramètre de blocage contre le cache.

Recommandation: Mettre en cache les URL qui ne sont pas mis en cache 

• Forcer les URL du cache public

Même chose que pour les paramètres avant mais ça va permettre de passer directement le cache public de tout le monde.

Recommandation: Peut être utile par exemple pour un article de blog qui a beaucoup de visiteurs et que vous voulez être sûr qu’il soit mis en cache.

• Supprimer la chaîne de requête

Permet de supprimer certains paramètres PHP d’une requête en GET d’une page (exemple: ?utilisateur=pierrot)

Recommandation: Il est recommandé de ne Pas mettre en cache les paramètres permettent d’utiliser des Analytics à votre site par exemple UDM

| 2 | TTL

Le TTL veut dire Time to Live (Temps de vie), c’est utilisé dans les caches pour savoir combien de temps est valide un fichier de mise en cache.

• Durée de vie par défaut du cache publique
  • La durée en secondes qu’un fichier mise en cache publics devrait durer

Recommandation:  mettre au minimum 24 heures, je vous recommande une semaine. 

• TTL cache privé par défaut
  • La durée en secondes qu’un fichier mise en cache privée devrait durer.

Recommandation: De 30 minutes à un 1 heure (N’oubliez pas que le cache privé sont des informations plus sensible)

• TTL de page d’accueil par défaut
  • Durée de mise en cache de votre page d’accueil 

Recommandation:

• Page d’accueil dynamique: 1 semaine
• Page d’accueil fixe: 1 mois

• Flux TTL par défaut
  • C’est le temps de mise en cache de vos flux RSS.

Recommandation:

• Beaucoup de nouvelles page à votre site en 24 heures: 1 jour
• Sinon : 1 semaine

• Default REST TTL
  • Le temps de mise en cage de chacune des requêtes REST a votre serveur.

• Recommandation: 1 semaine 

• Default HTTP Status Code Page TTL
  • Pour chacune des réponses HTTP par exemple une erreur 404 lorsqu’il est envoyé combien cette page de temps devrait être mise en cache 

Recommandation: Jamais plus d’1h pour les codes d’erreurs

| 3 | Purger

• Tout purger lors d’une mise à niveau
  • Est-ce que lorsque vous mettrez à jour l’extension cela va devrait supprimer toutes les caches de votre site pour en intégrer de nouveaux?

Recommandation: Actif

• Règles de purge automatique pour les publication/mise à jour
  • Permet sur certains types de formats, par exemple sur les pages ou sur les publications de blog de supprimer le cache lorsque la publication et créer où est mise à jour 

• À moins que vous fassiez beaucoup de changement mineurs sur l’ensemble de vos pages régulièrement, cochez tout.

• Servir le périmé
  • Mettre les vieux cache disponible aux yeux du visiteur en attendant de télécharger un nouveau cache.

Recommandation: Si cela vous dérange qu’il se peut que votre utilisateur se retrouve avec une plus vieille version de votre site temporairement, ne l’activez pas.

Si cela ne vous dérange pas, activez-le pour réduire de beaucoup les requêtes!

• Purge planifiée d’URLs
  • Permettre de mettre certaines URL qui pourront être purgé automatiquement après un certain moment 

Recommandation: Selon votre besoin

• Heure de purge planifiée
  • Le temps de rafraîchissement des URL a mettre en purge

• Purger tous les crochets
  • Des Hooks WordPress qui permet de purger lorsque certains de ces Hooks sont demandés.

Recommandation: Peut être utile si vous êtes un développeur et souhaitez supprimer du cache avec les hooks

| 4 | Exclure

• Ne pas mettre en cache les URI
  • Permet d’empêcher que certaines pages ne soient pas mises en cache

Recommandation: 

Si certaines de vos pages sont souvent mises à jour par du nouveau contenu telle qu’une page de connexion et d’inscription et des paramètres utilisateur .

• Ne pas mettre en cache les chaînes de requête
  • Lorsque certains paramètres de GET sont utilisés et peuvent exclure d’être mise en cache.

Recommandation: Si vous avez des formulaires qui sont en mode GET, je vous recommande de les mettre les paramètres de celui-ci pour être sûr que le serveur récupère les informations.

• Ne pas mettre en cache les catégories
  • Permet que dans certaines catégories, les pages et ou article ne soit pas mise en cache 

• Ne pas mettre en cache les étiquettes
  • Permet aux pages et aux articles qui ont un certain étiquette de ne pas être mise en cache 
• Ne pas mettre en cache les cookies
  • Si certains cookies de connexion sont utilisés et  que vous ne souhaitez pas qu’ils soient mis en cache, cela va permettre de régler certain bug lorsque vos utilisateur se déconnectent mais apparaissent encore connectés lorsqu’ils visitent une page mise en cache.
• Ne pas mettre en cache les agents utilisateur
  • Si vous connaissez les principaux agents utilisateurs et connaissez le principe, ajoutez les principaux agents utilisateur, par exemple a des appareils Android Google Chrome Mozilla Firefox Safari, etc.

Recommandation: Si vous vous y connaissez, ajoutez-les, sinon cela ne vous apportera pas réel grand bénéfice

• Ne pas mettre les rôles en cache
  • Permet à des utilisateurs qui ont un certain rôle de ne pas avoir de cache, par exemple les administrateurs qui voudraient toujours avoir les dernières nouveautés qui sont sur le site.

| 5 | ESI 

ESI (pour Edge Side Includes) est un langage qui permet d’étendre l’extensibilité du web. Si vous voulez plus vous y intéressé voici un article Wikipédia ce sujet. 

• Activer ESI
  • Permet d’activer cette fonctionnalité 
• Mettre en cache la barre d’administration
  • Permet d’utiliser aussi pour mettre un cache la barre d’administration de WordPress, je vous recommande de le faire si vous utilisez ESI.
• Mettre en cache le formulaire de commentaire
  • Si vous souhaitez mettre un cache les formulaire de commentaire si cela te reste toujours la même requête vers votre serveur vous pourrez faire sinon ne l’activez pas.
• Nonces d’ESI
• Varier le groupe

| 6 | Objet

Les objets caches permettent de mettre en cache des requêtes qui sont souvent utilisées pour éviter le surchargement des ressources de la base de données .

• Mise en cache d’objet
  • Activer la Fonctionnalités des objet cache

Recommandation: Si vous voyez un service actif sur votre serveur, cela veut dire que votre serveur prend en compte le cache objet et devriez l’utiliser.

• Méthode
  • La méthode c’est le type d’infrastructure qui est utilisé. Les principaux sont Memecached et Redis

Recommandation: Utilisez bien entendu lui que votre serveur propose, s’il vous offre les deux, tentez Redis 🙂

• Hébergeur
  • IP de votre serveur de mise en cache OBJET (Souvent localhost)

• Port
  • Port de votre serveur de mise en cache objet  (Par défaut, Memcached: 11211, Redis; 6379)
• Durée de vie de l’objet par défaut
  • Temps de vie de vos objets qui sont des requêtes vers la base de données. Ne pas mettre plus de 15 minutes.
• Nom d’utilisateur
  • Le nom d’utilisateur pour se connecter à ce serveur de mise en cache objet 
• Mot de passe
  • Ainsi que le mot de passe pour se connecter aussi 
• ID de base de données Redis
  • Régis peut vous donner des bases de données et numérotés comme dans un array et qui commence donc par 0.
• Groupes globaux
  • Les groupes globaux par défaut qui utilise les objets pour se connecter au réseau si vous ne vous connaissez pas laissé par défaut
• Ne pas mettre en cache les groupes
  • Permet d’éviter de mettre en cache les groupes qui font partie des objetsé. Si vous ne vous connaissez pas, laissez-le par défaut 
• Connexion persistante
  • Est-ce que vous voulez une connexion persistante entre le serveur de mise en cache et votre serveur je conseille de laisser activer cela va permettre d’éviter du temps de chargement de ses requêtes 
• Mettre en cache wp-admin
  • Souhaitez-vous mettre en cache la page d’administration de votre site. Cela peut faire que certaines données soient expirées et ne soient pas réels et ce que vous voulez du serveur 
• Stocker les transients
  • Activer là si vous ne souhaitez pas activer le wp-admin c’est pour mettre un cache un gros les transients de la base de données 

| 7 | Navigateur 

• Cache navigateur
  • Permet aux navigateurs des internautes qui sont sur votre site web de mettre en cache sur leur ordinateur les fichiers de votre site

Recommandation : Actif

• TTL du cache navigateur
  • Combien de temps les fichiers sur l’ordinateur de l’internaute devra être mise en cache sur l’ordinateur 

Recommandation: 1 mois

| 8 | Avancé

• Cookie de connexion
  • Définir un cookie de connexion pour votre site web peut être utile si vous avez plusieurs applications qui nécessitent plusieurs d’utilisateurs distincts sur le même nom de domaine 

Recommandation: Mettre vos cookies de connexion si vous avez plusieurs applications sur votre nom de domaine

• Améliorer la compatibilité HTTP/HTTPS
  • Si vous utilisez HTTP et HTTPS par exemple que vous avez justement plusieurs applications, je vous recommande d’activer ceci, ce qui permettra d’assurer que le navigateur vérifie à chaque fois vérifie si sur l’URL donné, il aura le bon certificat.
• Clic instantané
  • Permet au code d’essayer de deviner où est-ce que l’utilisateur va cliquer en prochain, il va donc tenter de précharger la page. Par contre, cela cause un gros travail car le serveur peut charger des pages dont les utilisateurs ne veulent même pas cliquer ou ne cliquera peut-être jamais 

Recommandation: Inactif

La section CDN

| 1 | Réglage du CDN

• CDN QUIC.cloud
  • C’est le CDN en partenariat avec LiteSpeed cache. Si vous êtes abonné à ces services vous devez activer cette fonctionnalité pour faire en sorte que ce soit pleinement compatible avec votre plugin. 
• Utiliser le mappage CDN
  • Ceci permet d’utiliser Quic.Cloud comme un système CDN traditionnel, pour desservir vos images, vos fichier JavaScript, HTML… vos ressources au lieu de juste traiter l’information qui devra être rendu côté serveur.

• URL de CDN
  • Si vous avez un autre CDN, c’est ici que vous allez pouvoir définir l’URL de votre CDN.

Vous pouvez aussi choisir les fichiers à rendre disponible à ce CDN. 

• Attribut HTML à remplacer
  • Ces classes d’attributs seront à remplacer dans votre HTML par des liens de votre CDN, c’est souvent là que je vais devoir justement définir les exemples les attributs SRC pour les images, JS, etc.
• URL originales
  • URL original de votre site qui permettra à votre CDN desservir au bon endroit au cas où que l’internaute tente de se diriger vers le CDN au lieu de votre site.
• Répertoires inclus
  • Répertoire inclus dans le CDN pour éviter le chargement des ressources de cet endroit et qui sont rendu par le CDN
• Exclure le chemin
  • Au contraire des répertoires inclus, ce sont les endroits dont ils doivent explicitement être exclus du CDN
• API Cloudflare
  • Si votre CDN est Cloudflare, vous pouvez entrer toutes vos informations pour vous y connecter.

| 2 |  Configuration du CDN Quic.cloud

• Configurer le compte Quic.cloud
  • C’est simplement ici que vous pouvez vous connecter à votre compte Quic.Cloud automatiquement lorsque vous appuyez sur le bouton lier un compte.
• État de configuration du CDN
  • Voir l’état actuel si vous êtes bien connectés à Quic.cloud

| 3 |  Gérer

Cette section c’est simplement pour gérer votre compte Quic.Cloud ou votre Cloudflare, vous y retrouverez des options de base comme si vous étiez sur leur site respectif .

La section Optimisation d’images

| 1 | Résumé d’optimisation des images

Ici, vous avez un petit résumé de vos configuration que vous avez configuré pour les configurer c’est dans la section avec l’onglet de réglages d’optimisation des images.

| 2 | Réglages d’optimisation des images

• Auto Request Cron
  • Les crons jobs est un système d’envoi d’action qui s’exécutent à de certains moments. Donc avec ce paramètre, vous pouvez utiliser les cron jobs pour optimiser vos images.
• Cron de traction automatique
  • Permet à la cron job de demander automatiquement l’optimisation d’images au service Quic.Cloud
• Optimiser les images originales
  • Optimiser les images mais garde une copie des originaux dans un même dossier 

Recommandation: Actif

• Supprimer les sauvegardes d’originales
  • Supprime les images originales ne regarde que les images optimiser 

Recommandation: Inactif

• Optimiser sans perte
  •  tente d’optimiser au max les images sans impacter la qualité de ceux-ci

Recommandation: Inactif (À part si votre site se concentre principalement sur l’affichage d’images)

• Conserver les données EXIF/XMP
  •  Conserver les métadonnées des images sur leur localisation et les informations originales des images.

Recommandation: Inactif (si vous ne voulez peut être pas vous retrouver dans la même situation que Vice avec John McAfee) 

• Remplacement de l’image WebP
  • Remplace toutes les images par les images en format WebP.

Recommandation: Actif ;

• Attribut WebP à remplacer
  • Attribut avec balises qui contient des images qui remplace les PNG, jpg etc en WebP
• WebP pour srcset extra
  • Remplace les images générés dans une logique srcset en dehors de WordPress

Recommandation: Inactif

• Contrôle de la qualité des images WordPress
  • Pourcentage de la qualité à conserver sur la compression des images 

La section page Optimisation

| 1 | Réglages CSS

• Minifier CSS
  • Est-ce que vous souhaitez minifier vos fichiers CSS? Cela permettra de supprimer les espaces et tout mettre sur une ligne, ce que nous appelons les mettre en ligne (inline).  Aussi les commentaires seront supprimés ce qui permettra de diminuer la taille des fichiers donc d’augmenter la rapidité de téléchargement de ceux-ci.

Recommandation: Actif

• Combiner CSS
  • Permet de combiner tous vos fichiers CSS à un seul fichier.

Recommandation: Inactif , cela créer de trop gros fichiers a télécharger et les ressources ne sont pas toujours chargés d’un seul coup.

• Générer l’UCSS

L’unused CSS c’est un fichier qui a été vérifié et vérifie si tous les sélecteurs et leur propriétés CSS sont bien utilisés et supprime ce qui n’est pas utilisé 

Recommandation: Actif (attention, c’est une fonctionnalité qui nécessite Quic.Cloud)

• UCSS en ligne
  • Mettre le fichier ucss en une seule ligne et supprime les espaces et commentaires

Recommandation: Actif

• Combiner les CSS externes et en ligne
  • Combiner les fichiers CSS qui ne sont pas à votre site sont utilisés pour les styles extérieure à un seul fichier

Recommandation: Inactif , vous n’utilisez pas toujours tous les styles des éléments externes

• Charger le CSS de manière asynchrone

Permet de charger le CSS en même temps que la page html se charge, sans blocage

Recommandation: Actif (Mais testez-le ! Cela peut causer des effet de FOUC)

• CCSS par URL
  • Le critical CSS est le CSS minimum requis pour avoir une page viable, qui n’es pas bugué, cela permet par URL donc à chaque pas d’avoir leur propre unique CSS

Recommandation : Actif

• Librairie CSS Async en ligne
  • Technique permet d’éviter le FOUC dont nous avons parlé plus haut.

• Optimisation de l’affichage des polices
  • Permet de modifier le display sur les polices et le mettre en SWAP pour garder le style de police à l’écran même lorsqu’une chargeons le site .

| 2 | Réglages JS

• Minifier JS
  • Même chose que le CSS. Permet de minifier le JavaScript et le mettre tout en une ligne et d’enlever les commentaires 

Recommandation: Actif

• Combiner JS
  • Là aussi même chose que le CSS, cela permet de combiner tous les  fichier JavaScript en un seul fichier.

Recommandation: Inactif

• Combiner les JS externes et en ligne
  • Permet de mettre les fichiers et JavaScript qui proviennent de l’externe à une ligne. 

Recommandation: Essayez-le, mais peut causer des problèmes

• Charger le JS en différé
  • Ok maintenant ça c’est un gros point que si vous ne vous y connaissez pas en JavaScript, prenez le temps de lire attentivement ce qui suit:

Le JavaScript modifie les éléments de l’HTML avec des conditions, des boucles etc, si le HTML qu’il tente de traiter dans la page n’existe pas, cela va causer des erreurs.

Alors comment on règle ceci ?

Avant, on ne se compliquait pas la vie, nous placions tous nos fichier JavaScript à la fin de page.

Maintenant, nous avons deux façon de la gérer:

Manière normale → Lorsque le HTML charge et trouve un fichier JavaScript, l’exécute et après continue de placer le HTML (donc fait une pause lors du chargement, c’est là le problème !)

De manière Asynchrone → En même temps que le chargement de la page

De manière Différé → Attends le chargements de tout la page HTML et là ,s’exécute (même si le fichier JavaScript est au début de page)

Donc voilà, mais cependant ce n’est pas aussi facile, certain créateurs de thème et d’extensions ne font pas attentions aux détails et la façon de gérer du code peut causer des problème lorsque nous sommes dans la manière normal ou asynchrone.

Donc voici votre démarche a suivre:

1. Essayer en asynchrone, ce serait le meilleur scénario
2. Si vous avez des problèmes, passez en mode différé, c’est moins efficace que de l’Asynchrone, mais meilleur que normal.

| 3 | Réglages HTML

• Minifier le HTML
  • Mettre tout votre HTML en une seule ligne et supprimer les commentaires 

Recommandation: Actif

• Pré-chargement des DNS
  • Permet de précharger les sites web dont vous faites le plus de requêtes. C’est souvent là que vous faites des requêtes JavaScript ou pour autre 

Recommandation: Tester votre site web sur gtmetrix.com  et mettre tous les URL que vous retrouverez dans l’onglet “Waterfall”

• Contrôle du préfixe DNS
  • Permet d’automatiquement charger les requêtes DNS dans tout la page

Recommandation: Inactif , vous n’avez pas toujours a exécuter tous les requêtes qu’une page propose

• Sélecteurs HTML de chargement différé
  • Si vous souhaitez charger un élément HTML de votre page en mode différé c’est-à-dire qu’à la fin de ce que tu télécharges, il ne faut pas qu’il bloque le rendu vous pouvez ajouter sont ses lecteurs HTML comme une classe.

Recommandation: Faites-le pour les commentaires !

• Retirer les chaînes de requête
  • Lorsque le chargement seront fait en différé surtout pour le Javascript lorsqu’ils sont télécharger des fois cela prend les paramètres dans l’ URL de téléchargement est-ce que vous voulez que ce soit un gros retirer du téléchargement 

Recommandation: Inactif , cela joue parfois dans des paramètre essentiels de certains fichier javascript (Comme Google Analytics, Google recaptcha…)

• Charger les Google Fonts de manière asynchrone
  • Permettre lorsque nous chargeons les police de Google (qui sont les plus utilisés partout sur le web) qu’ils soient chargés en même temps que chargement de votre site sans bloquer .

Recommandation: 

• Inactif mais devez avoir mis le display swap.
• Encore mieux: Chargez de manière locale vos Google fonts avec OMGF!

• Retirer les polices Google
  • Mettre si vous utilisez un certain type de police que vous hébergez localement sinon ne le faites jamais.
• Retirer les émojis WordPress
  •  enlève la feuille de script contient tous les émojis WordPress.

Recommandation: Actif , à moins que votre site soit vraiment djeunes 😉

• Retirer les balises Noscript
  • Cette balise est utilisée pour les navigateurs plus vieux qui ne supporte pas le JavaScript en tant que tel si vous souhaitez le support de navigateurs si vieux que vous devriez même pas penser à les supporter.

Recommandation : Actif

| 4 | Réglages des médias

• Chargement différé des images
  • Permet d’afficher uniquement les images qui sont la fenêtre d’affichage en bref de l’utilisateur le voit et non à l’avance.

Recommandation: Actif

• Basic Image Placeholder
  • Permet de définir un plat soda c’est-à-dire un effet d’attente lorsque l’image télécharge.
• Texte indicatif responsive
  • Texte permettant de définir les dimensions à l’image remaniements pour éviter dans certaines situations de remaniement en responsive

Recommandation: Actif

• Responsive Placeholder SVG
  •  Un template prédéfini pour définir un SVG responsive.

Recommandation: Laisser par défaut

• Responsive Placeholder Color
  • Couleur du texte responsive dont nous avons parlé plus haut 
• Générateur de cloud de LQIP
  • Service de Quic.Cloud permettant de générer votre image en faible qualité pour servir d’images de rendu avant de charger la vraie image en bonne qualité.
• Qualité de LQIP
  • Qualité de cette images de faible qualité 
• Dimensions minimales de LQIP
  • Dimension minimale de l’image de prérendu.
• Générer LQIP en arrière-plan
  • Est-ce que vous souhaitez que cette image choisir est arrière plan

Recommandation: Si vous souhaitez utiliser ce service, je vous le recommende

• Chargement différé des iframes
  • Souvent lorsque nous utilisons iframes est souvent pour des enfants que centre de notre contenu de la page en je ne conseille pas de différer de chargement de sérail prime à moins que vous ayez beaucoup la vraie monsieur votre site web tout d’abord ce n’est pas recommandé 
• Ajouter les dimensions manquantes
  • Ajoute des dimensions aux images et aux vidéos que vous ajoutez au site cela permet d’éviter un navigateur de charger automatiquement les dimensions ce qui Du délai de traitement 

Recommandation: Actif

| 5 | VPI

• Viewport Images
  • Lorsque vous avez activer le lazy load ceci permet à des images de notre exclu d’être chargé avant même le chargement initial lazyload

Recommandation: Inactif (utilise des ressources serveur)

• Viewport Images Cron
  •  Si vous souhaitez quand même activer la fonctionnalité viewport image je conseille d’utiliser la grande qui permet de le faire depuis des tâches planifiées.

| 6 | Médias exclus

• Exclut l’image du chargement lent
  • Permet d’exclure des images du lazyload

Recommandation: Exclure le logo du site, le logo dans le footer et l’image la plus lourde d’une page (exemple, celles d’un slider, header etc…)

• Le nom de la classe d’image de chargement différé exclut
  • Permet d’exclure une classe entière que contiennent certaines images du lazy load.
• Lazy Load Image Parent Class Name Exclude
  • Permet d’éviter le lazy load dans les images de certains iframes qui contient des classes 
• Lazy Load Iframe Class Name Excludes
  • Permet d’éviter le lazyload de certain iframes.
• Lazy Load URI Excludes
  • Permet d’éviter tous lazyload sur les URL demandés
• LQIP exclut
  •  Permet d’exclure des images du serveur LQIP de Quic.Cloud

| 7 |  Localisation

• Cache Gravatar
  • Mettre en cache le service Gravatar (service qui permet de créer un style d’images profil) en local 

Recommandation: Actif (Si vous utilisez Gravatar)

• Cron du cache Gravatar
  • Créer une tâche automatique qui permet de mettre en cache ses images de profil.

Recommandation : Inactif

• TTL du cache Gravatar
  • Temps de vie du cache cité plus haut 

Recommandation: 1 mois

• Localiser les ressources
  • Ta mère des copies en local certains fichiers JavaScript des ressources externes d’autres sites par exemple les widgets de Twitter et de Facebook 

Recommandation: Inactif (A moins que vous utilisez leur widget beaucoup!)

• Fichiers de localisation
  • Localisation de ces fichiers externe 

| 8 | Personnalisation

• JS exclu
  • Exclure les fichiers JavaScript a la minification/combinaison

Reco mmandation: Exclure au grand minimum jQuery

• JS différé exclut
  • Exclure certains fichiers JavaScript d’être différé 

Recommandation:

• Jquery
• Scripts liés à l’Analytics et aux publicités

• JS de mode invité exclu
  • Exclure certains fichier JavaScript modifier par extension lorsque les utilisateurs sont en mode visiteurs 
• URI exclut
  • Empêche toute optimisation sur les pages visitées 
• Optimiser pour les visiteurs uniquement
  • Permet d’optimiser seulement des fichiers pour les utilisateurs invités, visiteurs. 

Recommandation: Inactif (Lorsque vous avez un utilisateur actif, le cache s’occupe du reste)

• Rôle exclu
  • Les rôles qui seront sélectionnés seront exclus de toute optimisation

| 9 | Personnalisation – CSS

• CSS exclu
  •  un fichier CSS sélectionnez ne seront pas minifier ou combiné 
• UCSS File Excludes and Inline
  • Les CSS sélectionnés seront exclus des CSS unused
• UCSS Selector Allowlist
  •  Les sélecteur CSS ajoutés seront ajoutés de force dans le unused CSS
• URL UCSS exclus
  • Les pages données ne génèreront pas d’unused CSS

• Séparer le cache du CCSS par type de publication.
  • Permet de séparer par X type le critical CSS. (Vous pouvez définir page, post ou un custom post type)

• Séparer les URL de ca CCSS
  • Est-ce que vous mettez certaines chaînes de caractères sûr permet de séparer les fichiers de CSS critique distinct pour chacune de ces chaînes de caractères 

• Règles CSS critiques
  • Ajouter du CSS critique minimum de votre site doit toujours avoir 

La section base de données

| 1 | Gérer

Cet endroit est un outil qui permet de modifier certains outils pour nettoyer votre base de données et en voir un résumé.

| 2 | Réglages d’optimisation de la BDD

• Nombre maximum de révisions
  • Nombre maximum d’historiques de sauvegarde que vous avez fait pour vos pages 

Recommandation: 5-10

• Âge maximal des révisions
  • Age que ces révisions doivent être sauvegardés

Recommandation: 0 (pour désactiver)

FAQ