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
- Les images dont le balisage comporte des guillemets doubles autour de la valeur de l'attribut src ne peuvent pas être chargées LazyLoadées par
- Balisage non pris en charge :
<img src=https:/website.com/folder/image.png> - Balisage pris en charge :
<img src="https:/website.com/folder/image.png">
- Balisage non pris en charge :
- Les images d'arrière-plan ajoutées dans les fichiers CSS ou dans les balises de style internes peuvent être chargées LazyLoadées à partir de WP Rocket 3.15 en utilisant la fonctionnalité LazyLoad pour les images d'arrière-plan CSS.
Cependant, si vous utilisez WP Rocket dans une version antérieure à la 3.15, cette fonctionnalité LazyLoad spécifique ne sera pas disponible, et ces images d'arrière-plan ne seront pas lazyloaded.
Un cas courant est celui des images d'arrière-plan d'Elementor qui sont chargées dans des fichiers CSS séparés au lieu d'être intégrées directement dans le HTML. Dans ce cas, vous pouvez essayer ce plugin (sans affiliation avec WP Rocket) : Lazy Load Elementor Background Images.
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.