Comment améliorer l’effet visuel des images lazyload sur LiteSpeed
Temps de lecture : 3 minutes
Lorsque l’option « Générateur de cloud de LQIP » est activée dans LiteSpeed Cache > Page Optimization > [4] Réglage des médias (l’option « Chargement différé des images » doit être activée), par défaut, un emplacement réservé (placeholder) d’une dimension de 150px * 150px est généré pour remplacer l’image avant son affichage à l’écran. Redoutable, améliore considérablement les temps de chargement de la page mais peu élégant, même si une qualité proche ou égale à 20 est définie dans l’option « Qualité de LQIP » (par défaut à 4) et surtout que les images du site ne font pas 150px * 150px …
On peut déjà améliorer ça avec les réglages de base du plugin LiteSpeed Cache en activant l’option « Texte indicatif responsive », oui c’est très mal traduit, en fait l’option en anglais s’appelle « Responsive Placeholder ». Ce réglage permet de générer des placeholder aux dimensions des images du site, dont voici la traduction :
Les espaces réservés aux images réactives peuvent contribuer à réduire le remaniement de la mise en page lors du chargement des images. L’espace réservé sera généré avec les mêmes dimensions que l’image si celle-ci possède les attributs de largeur et de hauteur.
Superbe, vous venez d’apprendre comment améliorer l’effet visuel du chargement des images différées en remplaçant les carrés gris de 150px * 150px par des images réactives basées sur les dimensions de nos images 👏👏👏
Peut-on encore améliorer l’effet visuel des images lazyload sur LiteSpeed ?
La réponse est OUI. Avec un peu de style CSS, on peut ajouter un effet de flou pour donner un aperçu de l’image qui est en cours de téléchargement et qui ne va pas tarder à s’afficher. Exemple :
img[data-lazyloaded] { filter: blur(4px); } img.litespeed-loaded { transition: 0.25s filter linear; filter: blur(0); }
Faites appel à nos experts LiteSpeed Cache pour l’optimisation et le peaufinage des fonctionnalités du plugin, spécifiquement réglés pour votre site.