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__
Images encodées en Base64
Les images d'arrière-plan avec un encodage Base64 ne sont pas lazyloadées pour assurer la compatibilité.
Images en arrière plan et thème Bridge
Le LazyLoad des images d'arrière-plan du thème Bridge est désactivé pour des raisons de compatibilité.
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.