Certaines images ne sont pas LazyLoadées
Si vous avez déjà activé les options LazyLoad et LazyLoad pour les images background CSS, que vous avez vérifié que la page est mise en cache, mais que certaines images ne sont toujours pas lazyloadées et/ou que PageSpeed répertorie certaines images sous l'audit Différer les images hors écran, il est possible que cela soit dû à l'une des raisons présentées dans cet article.
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 ne comporte pas de guillemets doubles autour de la valeur de l'attribut src ne peuvent pas être LazyLoadées :
- 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 en utilisant la fonctionnalité LazyLoad pour les images d'arrière-plan CSS.
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 via du JavaScript
WP Rocket ne peut LazyLoader 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.
En revanche, l'option LazyLoad pour les images background CSS fonctionnera sur les images associées aux nouvelles classes HTML injectées par JavaScript.