Lazyload Natif de Chrome
Chrome 76 vient d’introduire le lazy-load natif. Cela signifie que le lazzi-load peut être effectué par le navigateur lui-même au lieu d’utiliser un plugin.
Pour l'instant, l'implémentation du Lazy-Load de Chrome est très limitée. Le but du lazy-load est de ne charger des images sur la page uniquement lorsque l’utilisateur la fait défiler et a besoin de les voir.
Cependant, l'implémentation de Chrome définit un très grand seuil, ce qui signifie que sur de nombreuses pages web, toutes ou la plupart des images seront téléchargées immédiatement et ne bénéficieront pas de Lazyloading.
Le LazyLoad de WP Rocket a un seuil bien plus petit, donc bien plus d'images seront Lazyloadées. Il donc est actuellement plus efficace pour réduire la quantité de données transférées lors du chargement initial des pages. Pour cette raison, nous n'avons pas automatiquement activé la prise en charge du Lazy-load natif.
Mais vous pouvez très bien choisir d'activer la prise en charge du lazy-load natif de Chrome si vous le souhaitez en utilisant le plugin d'aide ci-dessous :
📥 Télécharger (.zip): WP Rocket | Enable Native Lazyload
Développeurs : vous trouverez le code de ce plugin sur GitHub.
Comment le lazy-load natif fonctionne-t-il ?
Pour pouvoir en bénéficier, votre site doit utiliser certaines balises HTML sur ses images :
L'attribute loading="lazy" devrait être ajouter aux balises <img> et/ou <iframe>.
Exemple : <img src="image.png" loading="lazy" alt="cat">
Lorsque vous activez l'option LazyLoad dans WP Rocket, elle est automatiquement compatible avec l'option lazy-load de Chrome :
- WP Rocket ajoute le balisage HTML nécessaire à vos images pour profiter du lazzi-load natif.
- Les navigateurs compatibles Chrome utiliseront automatiquement le lazy-load natif.
- Tous les autres utiliseront automatiquement le LazyLoading de WP Rocket.