Skip to main content

Comment améliorer l’effet visuel des images lazyload sur LiteSpeed

Écrit le . Publié dans .

Temps de lecture : 3 minutes

Le plugin d’optimisation de site WordPress LSCWP (LiteSpeed Cache WordPress) est un outil fabuleux, qui une fois bien configuré permet d’améliorer considérablement les performances des sites web. Une des fonctionnalités permet le chargement différé des images (Lazyload) afin que le navigateur de l’utilisateur les charge uniquement lorsqu’elles apparaissent dans le « viewport » (la zone de visualisation), par exemple en faisant défiler la page ou en augmentant la taille de la fenêtre du navigateur. Voyons comment améliorer l’effet de base qui affiche un carré gris par quelque chose de plus agréable.

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)

Partager l’article

A lire également