Différez le chargement des images hors écran
Que signifie "Différez le chargement des images hors écran" ?
PageSpeed Insights fait la recommandation suivante :
“Envisagez de charger des images masquées ou hors écran après le chargement de toutes les ressources essentielles afin de réduire le délai avant interactivité.”
Mais qu'est-ce que cela veut dire exactement ?
Pour comprendre, il est essentiel de savoir ce que l'on entend par ligne de flottaison et lazyload.
La ligne de flottaison
“La ligne de flottaison” est la partie de l'écran au dessus de laquelle qui est immédiatement visible, sans défilement, lorsqu'un visiteur atterrit sur une page.
- “Au dessus de la ligne de flottaison” - tout ce qui est affiché à l'utilisateur/visiteur lors du chargement de la page
- “En dessous de la ligne de flottaison” - tout ce qui nécessite un défilement vers le bas pour être visualisé.
LazyLoad
Les images qui ne sont pas dans la fenêtre du navigateur ne seront pas chargées avant que le visiteur ne fasse défiler la page. De cette façon, votre site web est plus rapide, car toutes les images ne sont pas chargées lors du chargement initial de la page.
PageSpeed Insights veut que vous LazyLoadiez toutes les images qui ne sont pas visibles au-dessus de la ligne de flottaison.
Comment WP Rocket peut aider ?
Les option LazyLoad et LazyLoad pour les images background CSS vous aiderons pour ces recommandations.
Rendez vous sur Tableau de bord → WP Rocket → Réglages → Média et cochez les cases correspondantes, comme suit :
Le Lazyload est activé, mais la recommandation continue de signaler certaines images, pourquoi ?
Les raisons les plus courantes pour lesquelles cela peut se produire sont répertoriées dans ce guide : Certaines images ne sont pas LazyLoadées