Certaines images ne sont pas LazyLoadées

Problème

  • Certaines images ne sont pas LazyLoadées
  • PageSpeed recense certaines images sous "Différez le chargement des images hors écran"

Si vous avez déjà activé le LazyLoad et vérifié que la page est en bien en cache, mais que vous en trouvez qui ne sont pas LazyLoad, il y a plusieurs raisons possibles.

Galerie de produit WooCommerce (WooCommerce product gallery)

Ces images utilisent le data-src qui figure dans la liste de compatibilité ci-dessous.

Les images sont exclues pour des raisons de compatibilité 

Lorsque le code de l'image contient certains attributs dont on sait qu'ils sont utilisés à des fins contradictoires, ils sont automatiquement exclus. 

Veuillez vérifier ceci sur votre site :

  • Visitez votre page en contournant WP Rocket en ajoutant ?nowprocket à son URL, ex: http://example.com?nowprocket
  • Clique droit sur la page >  Afficher le code source de la page pour voir son code HTML
  • Trouvez l'image qui n'est pas LazyLoadée. Vérifiez dans la balise <img> si l'un des attributs suivants entraîne l'exclusion de l'image de LazyLoad :

data-src
data-no-lazy
data-lazy-original
data-lazy-src
data-lazysrc
data-lazyload
data-bgposition
data-envira-src
fullurl
lazy-slider-img
data-srcset
class="ls-l
class="ls-bg
soliloquy-image
loading="eager"
swatch-img
data-height-percentage
data-large_image
avia-bg-style-fixed
data-skip-lazy
skip-lazy
image-compare__

Conflit avec la réécriture de ShortPixel Global WebP

Lorsque cette option de ShortPixel est activée, notre LazyLoad ne fonctionnera pas correctement.

Le balisage n'est pas pris en charge

Il s'agit le plus souvent d'images de fond, qui doivent être dans un format spécifique pour être LazyLoadées.

Un cas fréquent est celui des images de fond d'Elementor qui sont chargées dans des fichiers CSS séparés au lieu d'être directement dans le HTML. Dans ce cas, vous pouvez essayer ce plugin (pas d'affiliation avec WP Rocket): https://fr.wordpress.org/plugins/lazy-load-background-images-for-elementor/

Conflit avec un autre script de LazyLoad

Si votre thème ou un autre plugin ajoute également un LazyLoad, cela pourrait provoquer des conflits et notre LazyLoad pourrait ne pas fonctionner comme prévu.

L'image est injectée dans la page après son chargement

WP Rocket ne peut détecter que les images présentes dans le HTML lorsque la page se charge. Si un plugin injecte des images dans la page avec JavaScript après le chargement de la page, elles ne seront pas LazyLoadées.

Cela a-t-il répondu à votre question ? Merci pour votre retour :) Une erreur est survenue lors de l’envoi de votre retour. Veuillez réessayer plus tard.