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.
Appelez sans tarder notre N° vert pour parler à un spécialiste : 0805 690 960 (appel gratuit)
A lire également
Aides financières à la digitalisation région Occitanie
Écrit le . Publié dans Actualités.Financez la digitalisation de votre entreprise grâce à l’aide de la région Occitanie. Lancez votre site e-commerce, ajoutez une fonction de click and collect, faites la promotion de votre établissement via de la publicité sur Google…Lenteur WordPress et WooCommerce, comment désactiver wc-ajax=get_refreshed_fragments ?
Écrit le . Publié dans Performance site web.Vous avez constaté des lenteurs sur votre site marchand réalisé avec WordPress et WooCommerce.Qu’est-ce que le KEI (Keyword Efficiency Index) et son utilité en SEO ?
Écrit le . Publié dans SEO.Le KEI (indice d’efficacité de mot-clé) compare le nombre de recherches globales pour un mot clé et son coefficient de concurrence afin d’obtenir une estimation de l’efficacité de ce mot clé. Plus un KEI est élevé mieux c’e…