LazyLoad pour les iframes et les vidéos

Cet article fournit des informations sur l'option LazyLoad pour les iframes et les vidéos de l'onglet Médias.

Son rôle

LazyLoad retarde le chargement des iframes sur votre site web jusqu'à ce que l'utilisateur fasse défiler la page, atteigne la section où les iframes sont placées et ait réellement besoin de voir leur contenu.

Si les visiteurs de votre site ne font pas défiler toute la page, la taille de la page est moindre et les utilisateurs n'auront pas à payer pour des données mobiles qu'ils n'ont pas consommés.

Cela aura un impact particulier sur les appareils mobiles, dont la puissance de traitement est plus limitée et qui utilisent souvent des connexions internet plus lentes.

Cette option peut vous aider à résoudre l'audit PageSpeed Réduire le temps d'exécution de JavaScript lié aux scripts des iframes dans la fenêtre de visualisation.

Remarque : WP Rocket ne peut traiter que les vidéos intégrées à l'aide d'une balise iframe. Les vidéos ajoutées à l'aide de la balise video ne seront pas traitées.

Comment ça marche ?

De manière générale, voilà le processus :

WP Rocket recherche les balises iframe dans le code source de la page.
L'attribut loading="lazy" sera ajouté à l'iframe.
Lorsque le visiteur atteint la fenêtre de visualisation, les scripts de l'iframe sont chargés et la balise data-ll-status="loaded" est ajoutée à la balise de l'iframe.

Comment vérifier si LazyLoad fonctionne ?

Modifications du balisage

Ouvrez votre navigateur et visitez la page où il y a un iframe en dessous de la fenêtre
Ouvrez les outils du développeur.
- Dans Chrome : Cliquez avec le bouton droit de la souris n'importe où sur la page. Choisissez Inspecter > Eléments .
- Dans Firefox : Cliquez avec le bouton droit de la souris n'importe où sur la page. Choisissez Examiner l'élément
- Dans Safari : Cliquez avec le bouton droit de la souris n'importe où sur la page. Choisissez Inspecter l'élément
Cliquez sur l'icône "Sélectionner un élément de la page à inspecter" et sélectionnez l'iframe :
- Les attributs data-loading="lazy", data-rocket-lazyload et data-lazy-src seront ajoutés aux iframes.
- La classe lazyloaded est également ajoutée à l'iframe.
- La balise <noscript> ajoutée après l'iframe.

Chargement des scripts iframe jusqu'à ce qu'ils soient atteints

Ouvrez votre navigateur et visitez la page où il y a un iframe en dessous de la fenêtre de visualisation.
Ouvrez les outils du développeur
Cliquer sur l'onglet Réseau .
Cliquer sur le filtre JS .
Les scripts liés à l'iframe ne se chargeront que lorsque l'utilisateur fera défiler la page jusqu'à ce que la fenêtre atteigne l'iframe, comme indiqué ci-dessous :

Remplacer l'iframe YouTube par une image d'aperçu

Cette option remplacera l'iframe de la vidéo YouTube par la vignette définie par YouTube, et vise à corriger la recommandation PageSpeed Insights : Lazy load third-party resources with facades.

Vous pouvez également choisir la résolution de l'image de prévisualisation de YouTube.

La plupart des balises sont compatibles avec cette option, y compris celle fournie directement par l'option de partage de YouTube.

Dépannage

Parfois, une iframe peut se casser lors de l'utilisation de LazyLoad pour les iframes et les vidéos qu'elles contiennent, dans ce cas, vous devez exclure l'iframe ou la page concernée à l'aide de l'une des options présentées ici.

Si l'utilisation de la fonction Remplacer l'iframe YouTube par une image de prévisualisation ajoute de l'espace blanc au-dessus ou au-dessous de l'iframe YouTube, veuillez consulter les informations suivantes.