Ces trois éléments sont définis dès le départ pour ceux qui ne savent pas exactement de quoi il s'agit.
Chargement paresseux
Le chargement paresseux, également appelé à tort "paresseux" pour une traduction littérale, est un modèle de conception qui est utilisé pour retarder le chargement ou le rendu d'un objet jusqu'au moment opportun de son utilisation afin d'éviter le préchargement inutile d'objets qui pourraient ne pas être utilisés. Il est le plus souvent utilisé pour les images et contribue à améliorer les temps de chargement et à économiser la bande passante.
Le rendu de chaque image est retardé jusqu'à ce qu'elle soit nécessaire, se chargeant au fur et à mesure que vous faites défiler la fenêtre d'affichage
Fenêtre de visualisation
Fenêtre de visualisationplaceholder, qui n'a pas de traduction exacte, mais est souvent appelé "fenêtre graphique", a été créé par Apple 2007 pour son iPhone était une fenêtre virtuelle similaire à celle que Nokia avait conçue pour Mini Map. Il s'agissait d'une balise méta destinée à permettre aux pages Web de communiquer aux navigateurs mobiles la manière dont ils souhaitaient que le navigateur Web rende la page.
Sans cette balise méta, les iPhones rendaient les pages Web sous la forme d'une fenêtre de 980px de large que l'utilisateur devait agrandir et réduire. Grâce à cette balise méta, vous pouvez rendre une page à sa taille réelle, puis adapter la mise en page pour fournir le type de page que nous nous attendons tous à voir lorsque nous utilisons un navigateur mobile. Elle est finalement devenue une balise méta standard prise en charge par la plupart des appareils et est celle utilisée aujourd'hui pour ce que l'on appelle le responsive design.
Cache Litespeed
LiteSpeed Web Server est un serveur web et un logiciel de serveur web pour WordPress (LSCWP) LiteSpeed Cache pour WordPress (LSCWP) est son plugin d'accélération de site tout-en-un, qui propose un cache unique à l'échelle du serveur et une collection de fonctions d'optimisation pour les sites qui utilisent WordPress et sont hébergés sur un serveur WordPress.
Chargement des images
Idéalement, toutes les images devraient être chargées en différé, à l'exception de celles qui se trouvent déjà dans le viewport lors du chargement initial de la page, c'est-à-dire ce qui apparaît au premier coup d'œil sur l'écran avant que nous fassions défiler la page.
Il y a un problème. La page peut paraître laide au premier chargement, car les images ne sont pas affichées tant qu'il n'y a pas de mouvement et vous devez exclure les deux ou trois premières qui sont affichées
Bien que WordPress dispose d'un chargement différé natif depuis la version 5.5 et que cela puisse être réalisé avec de nombreux autres plugins tels que Perfmattersle contrôle Viewport pour limiter les images en particulier que vous voulez afficher et celles qui ne le sont pas n'est pas si simple, puisque nous pouvons lui dire de ne pas faire de chargement différé par exemple des images que nous voulons afficher, mais nous ne pouvons pas définir ou exclure les images que nous voulons afficher deux, trois ou quatre premiersmais nous ne pouvons pas définir ou exclure des images spécifiques pour chaque page de manière simple et nous ne pouvons le faire qu'avec la fonction en vrac.
VPI
Le 25 juillet, LiteSpeed a ajouté dans la mise à jour de la version 5.0 de son plugin une option flexible pour résoudre ce problème qu'elle a appelée VPI (Viewport Images).
Le service VPI examine une URL et détermine quelles images sont visibles sur un écran de 1300×900 pixels pour les vues de bureau et quelles images sont visibles sur un écran de 480×800 pour les vues mobiles. Il renvoie une liste de ces images au plugin LiteSpeed, et le plugin LiteSpeed les exclut du chargement lent la prochaine fois qu'il met en cache cette URL.
Le résultat est une page qui s'affiche complètement au-dessus du pli, tandis que toutes les images sous le pli continuent à se comporter comme avant. La page conserve son bon score de vitesse de page, tandis que les visiteurs humains rencontrent un premier écran complet de contenu.
Configuration
Pour utiliser ce nouveau service, vous devez bien sûr activer Chargement paresseux dans le plugin.
Sa configuration est très simple, il suffit de l'activer et il ne possède que deux interrupteurs.
Lorsque les images de la fenêtre d'affichage (ci-après VPI) sont activées et que cron est réglé sur ON, les images VPI seront générées en arrière-plan via une file d'attente basée sur cron.
Si vous ne souhaitez pas activer cron, vous devrez traiter la file d'attente VPI manuellement. Vous pouvez le faire à partir du bouton"Exécuter manuellement la file d'attente VPI" qui apparaît lorsqu'il y a des UR dans la file d'attente. Ou, depuis le tableau de bord principal, à partir de l'option"Force cron".
La chose intéressante et vraiment utile à propos de cette nouvelle option est que maintenant, à la fois dans l'éditeur classique et dans Gutenberg, dans chaque article et page vous trouverez une nouvelle boîte dans les options LiteSpeed où vous pouvez complètement désactiver cette option et supprimer n'importe quelle image du Viewport pour l'ajuster à votre goût.
Les images qui apparaissent dans ces cases ne seront pas chargées de manière différée
Si l'entrée n'a pas encore été traitée pour l'IPV, les deux cases apparaîtront vides, mais vous pouvez ajouter manuellement des images comme vous le souhaitez ou supprimer des images des deux cases et forcer un nouveau calcul de l'IPV.
Le bon et le moins bon
Sans aucun doute, le grand avantage de l'IPV de LiteSpeed est de pouvoir décider rapidement et facilement, sur un coup de tête, à quelles images spécifiques nous ne voulons pas que le chargement différé soit appliqué et de le définir manuellement pour chaque page.
Le hic, c'est que cette option s'ajoute aux autres services d'optimisation WordPress de QUIC.cloud tels que Critical CSS (CCSS), Unique CSS (UCSS), Low Quality Image Placeholders (LQIP) et Image Optimisation pour lesquels on nous propose une gratuité limitée, qui peut ne pas toujours suffire, et par la suite vous devez acheter des crédits, bien que pas cher.
J'ai décidé de le tester pour comparer le résultat avec le Lazy Load natif de WordPress Core et Perfmatters (avec des exclusions fixes par quantité) et jusqu'à présent je peux voir une amélioration dans la petite marge qui restait déjà.
Le résultat visuel final est exactement le même que celui obtenu avec Perfmatters, puisqu'il suffit de changer la couleur du placeholder du gris au blanc et ajustez la durée de l'effet de"fondu enchaîné" avec ce CSS.
/* Fade para Lazy Load de Litespeed - 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;
}
