Lazy loading— En bref
Le Lazy loading chargement différé consiste à attendre qu’une ressource soit nécessaire avant de la télécharger ou de l’exécuter.
Lazy loading dans le contexte du Web
Sur un site, il est surtout utile pour les images et composants situés plus bas dans la page. Les articles l’associent à un site plus léger et plus rapide, mais rappellent qu’une ressource utile dès l’ouverture ne doit pas être retardée sans raison.
Lazy loading pour les développeurs
Dans Gutenberg, le bloc Image génère généralement une structure <figure class="wp-block-image"> contenant un élément <img>. Lors du rendu de la page, WordPress peut compléter cette image avec des attributs comme width, height, srcset, sizes, decoding et loading="lazy".
Depuis WordPress 5.5, le lazy loading est intégré nativement. L’attribut loading="lazy" demande au navigateur de différer le chargement d’une image située hors écran, mais le navigateur décide du moment exact du chargement.
Il faut éviter ce chargement différé sur l’image principale ou l’image susceptible de constituer le LCP, et toujours réserver ses dimensions pour éviter les décalages de mise en page. Le HTML final doit être vérifié sur la page publique, car le thème, WordPress ou WP Rocket peuvent modifier le balisage généré.
LCP signifie Largest Contentful Paint. C’est la mesure du temps nécessaire pour afficher le plus grand élément visible lors de l’ouverture d’une page : souvent une grande image, un titre ou un bloc de texte. Dans notre cas, il faut éviter d’appliquer loading="lazy" à cette image principale, car cela pourrait retarder le LCP et ralentir le chargement perçu par l’utilisateur.
IntersectionObserver reste utile uniquement lorsqu’un comportement personnalisé est nécessaire. Pour un bloc Image classique, le mécanisme natif de WordPress et du navigateur est généralement suffisant.