Chargement différé des images et des éléments <iframe>

Les images et les éléments <iframe> consomment souvent plus de bande passante que les autres types de ressources. Dans le cas des éléments <iframe>, une certaine quantité de traitement supplémentaire est nécessaire. peut être long au chargement et à l'affichage des pages qu'ils contiennent.

Dans le cas d'images à chargement différé, reporter le chargement des images en dehors de la fenêtre d'affichage initiale, ce qui permet de réduire les conflits de bande passante. des ressources plus critiques dans la fenêtre d'affichage initiale. Cela peut améliorer Largest Contentful Paint (LCP) de la page dans certains cas où les connexions réseau sont médiocres, et la réaffectation de la bande passante peut aider les candidats au LCP à charger et peindre plus rapidement.

En ce qui concerne les éléments <iframe>, l'interaction avec le tableau suivant d'une page (INP) peuvent être améliorées au démarrage en les chargeant en différé. En effet, <iframe> est un document HTML entièrement distinct avec ses propres sous-ressources. Bien que les éléments <iframe> puissent être exécutés dans un processus distinct, ce n'est pas rare. pour qu'ils partagent un processus avec d'autres threads, ce qui peut créer des conditions où les pages deviennent moins réactives aux entrées utilisateur.

Ainsi, le report du chargement des images hors écran et des éléments <iframe> constitue qui mérite d'être exploitée, et qui ne nécessite que peu d'efforts pour obtenir une en termes de performances. Ce module explique comment effectuer un chargement différé deux types d'éléments pour une expérience utilisateur plus rapide et meilleure lors des de démarrage critique.

Images de chargement différé avec l'attribut loading

L'attribut loading peut être ajouté aux éléments <img> pour indiquer aux navigateurs comment vous devez les charger:

• "eager" informe le navigateur que l'image doit être chargée immédiatement, même s'il se trouve en dehors de la fenêtre d'affichage initiale. Il s'agit également de la valeur par défaut l'attribut loading.
• "lazy" reporte le chargement d'une image jusqu'à ce qu'elle se trouve à une distance définie de dans la fenêtre d'affichage visible. Cette distance varie selon les navigateurs, mais elle est souvent définie suffisamment grande pour que l'image se charge lorsque l'utilisateur fait défiler la page.

Notez également que si vous utilisez l'élément <picture>, L'attribut loading doit toujours être appliqué à son élément <img> enfant, pas l'élément <picture> lui-même. En effet, l'élément <picture> est un élément conteneur qui contient des éléments <source> supplémentaires pointant vers différents les images candidates, et celle choisie par le navigateur est appliquée directement à son élément <img> enfant.

Ne pas charger les images dans la fenêtre d'affichage initiale

Vous ne devez ajouter l'attribut loading="lazy" qu'aux éléments <img> qui sont en dehors de la fenêtre d'affichage initiale. Toutefois, il peut être difficile de connaître la position précise d'un élément par rapport à la fenêtre d'affichage, avant que la page ne soit rendu. Les différentes tailles, formats et appareils de fenêtre d'affichage doivent être pris en compte.

Par exemple, une fenêtre d'affichage pour ordinateur peut être très différente d'une fenêtre d'affichage sur un téléphone mobile, car il affiche plus d'espace vertical et peut accueillir des images. dans la fenêtre d'affichage initiale qui n'apparaît pas dans la fenêtre d'affichage initiale un appareil physiquement plus petit. Les tablettes utilisées en mode portrait affichent également un espace vertical considérable, peut-être même plus que certains ordinateurs de bureau appareils.

Toutefois, dans certains cas, il est assez clair d'éviter application de loading="lazy". Par exemple, vous devez absolument omettre la Attribut loading="lazy" des éléments <img> dans le cas d'images héros, ou tout autre cas d'utilisation d'images où des éléments <img> sont susceptibles d'apparaître au-dessus des plier ou vers le haut de la mise en page sur n’importe quel appareil. C'est encore plus important pour les images susceptibles d'être des candidats au LCP.

Les images à chargement différé doivent attendre que le navigateur termine la mise en page dans pour savoir si la position finale de l'image se situe dans la fenêtre d'affichage. Cela signifie que si un élément <img> dans la fenêtre d'affichage visible possède un loading="lazy" , il n'est demandé qu'après que tout le code CSS a été téléchargé, analysé et appliquées à la page, au lieu d'être récupérées dès qu'elles sont découvertes par l'analyseur de préchargement dans le balisage brut.

Étant donné que l'attribut loading de l'élément <img> est compatible avec tous les principaux il n'est pas nécessaire d'utiliser JavaScript pour charger des images en différé, car l'ajout du code JavaScript supplémentaire sur une page afin de fournir les fonctionnalités déjà fournies par le navigateur ; affecte d'autres aspects des performances de la page, tels que l'INP.

Démonstration du chargement différé des images

Éléments <iframe> de chargement différé

Le chargement différé des éléments <iframe> jusqu'à ce qu'ils soient visibles dans la fenêtre d'affichage peut enregistrer de grandes quantités de données et d'améliorer le chargement des ressources critiques pour que la page de premier niveau se charge. De plus, comme les éléments <iframe> sont des documents HTML entiers chargés dans un document de premier niveau, ils peuvent incluent un nombre important de sous-ressources, en particulier JavaScript, qui peuvent peut affecter considérablement l'INP d'une page si les tâches au sein de ces frames nécessitent un temps de traitement important.

Les intégrations tierces constituent un cas d'utilisation courant pour les éléments <iframe>. Par exemple : Les lecteurs vidéo intégrés ou les posts sur les réseaux sociaux utilisent généralement des éléments <iframe>, Elles nécessitent souvent un nombre important de sous-ressources, peut entraîner des conflits de bande passante pour les ressources de la page de premier niveau. En tant que exemple, le chargement différé de l'intégration d'une vidéo YouTube permet de gagner plus de 500 Kio pendant le chargement initial de la page, et le chargement différé du plug-in Facebook bouton "J'aime" économise plus de 200 Kio, dont la plupart sont en JavaScript.

Quoi qu'il en soit, chaque fois que vous avez un <iframe> en dessous de la ligne de flottaison sur une page, vous devez nous vous conseillons vivement d'effectuer un chargement différé s'il n'est pas nécessaire cela peut considérablement améliorer l'expérience utilisateur.

Attribut loading pour les éléments <iframe>

L'attribut loading sur les éléments <iframe> est également pris en charge dans tous les principaux des navigateurs. Les valeurs de l'attribut loading et de leurs comportements sont les comme pour les éléments <img> qui utilisent l'attribut loading:

• "eager" est la valeur par défaut. Il indique au navigateur qu'il doit charger <iframe> le code HTML et ses sous-ressources.
• "lazy" reporte le chargement du code HTML de l'élément <iframe> et de ses sous-ressources jusqu'à une distance prédéfinie de la fenêtre d'affichage.

Démonstration des iFrames à chargement différé

Façades

Au lieu de charger un élément intégré immédiatement lors du chargement de la page, vous pouvez le charger sur en réponse à une interaction de l'utilisateur. Pour ce faire, affichez une image ou un autre élément HTML approprié jusqu'à ce que l'utilisateur interagisse avec lui. Une fois que lorsque l'utilisateur interagit avec l'élément, vous pouvez le remplacer par l'élément intégré tiers. Cette technique est connue sous le nom de façade.

Un cas d'utilisation courant des façades est l'intégration de vidéos à partir de services tiers l'intégration peut nécessiter le chargement de nombreuses des sous-ressources, telles que JavaScript, en plus du contenu vidéo lui-même. Dans ces (sauf si la lecture automatique d'une vidéo est vraiment nécessaire), la vidéo est intégrée exiger que l'utilisateur interagit avec eux avant la lecture en cliquant sur le bouton de lecture ; .

C'est une excellente occasion de montrer une image statique visuellement semblable à l'intégration de la vidéo et d'économiser beaucoup de bande passante. Une fois que l’utilisateur clique sur l'image, celle-ci est remplacée par l'intégration <iframe> réelle, déclenche le démarrage du code HTML et de ses sous-ressources de l'élément tiers <iframe> en cours de téléchargement.

Outre l'amélioration du chargement initial de la page, un autre avantage important est que si lorsque l'utilisateur ne lit jamais la vidéo, les ressources nécessaires pour la diffuser ne sont jamais téléchargée. Ce modèle est efficace, car il garantit que l'utilisateur ne télécharge que ce que qu'ils veulent réellement, sans faire d'hypothèses potentiellement erronées besoins de l’utilisateur.

Les widgets de chat constituent un autre excellent cas d'utilisation de la technique des façades. La plupart les widgets de chat téléchargent un volume important de JavaScript qui peut nuire affectent le chargement de la page et la réactivité aux entrées utilisateur. Comme pour tout chargement Les coûts sont facturés au moment du chargement, mais dans le cas d'un widget de chat, chaque utilisateur n'a jamais l'intention d'interagir avec elle.

En revanche, avec une façade, il est possible de remplacer Discuter" avec un faux bouton. Une fois que l’utilisateur interagit de manière significative avec (par exemple, en plaçant le pointeur de la souris dessus pendant un laps de temps raisonnable) en un clic. Le widget de chat réel et fonctionnel est inséré l’utilisateur en a besoin.

Même s'il est possible de créer ses propres façades, Options disponibles pour les tiers les plus populaires, comme lite-youtube-embed pour les vidéos YouTube, lite-vimeo-embed pour les vidéos Vimeo et le chat en direct React. Loader pour les widgets de chat

Bibliothèques JavaScript à chargement différé

Si vous avez besoin d'effectuer un chargement différé des éléments <video>, des images <video> des éléments poster, images chargées par la propriété CSS background-image ou d'autres images non compatibles vous pouvez le faire à l'aide d'une solution de chargement différé basée sur JavaScript, telle que comme lazysizes ou yall.js, car le chargement différé de ces types de ressources fonctionnalité de niveau navigateur.

En particulier, la lecture automatique et la lecture en boucle des éléments <video> sans piste audio. constituent une alternative beaucoup plus efficace que les GIF animés, qui peuvent sont souvent plusieurs fois plus volumineuses qu'une ressource vidéo qualité. Malgré tout, ces vidéos peuvent être importantes en termes de bande passante, Le chargement différé est donc une optimisation supplémentaire en réduisant le gaspillage de bande passante.

La plupart de ces bibliothèques fonctionnent à l'aide de l'API Intersection Observer, et Vous devez également utiliser l'API Mutation Observer si le code HTML d'une page est modifié après le chargement initial, pour reconnaître lorsqu'un élément entre dans la fenêtre d'affichage de l'utilisateur. Si le est visible, ou s'approche de la fenêtre d'affichage, alors la bibliothèque JavaScript remplace l'attribut non standard (souvent data-src ou un attribut similaire), avec l'attribut approprié, tel que src.

Imaginons que l'une de vos vidéos remplace un GIF animé, mais que vous souhaitiez la charger en différé. avec une solution JavaScript. Cela est possible avec yall.js avec les éléments suivants : format de balisage:

<!-- The autoplay, loop, muted, and playsinline attributes are to
     ensure the video can autoplay without user intervention. -->
<video class="lazy" autoplay loop muted playsinline width="320" height="480">
  <source data-src="video.webm" type="video/webm">
  <source data-src="video.mp4" type="video/mp4">
</video>

Par défaut, yall.js observe tous les éléments HTML éligibles avec une classe de "lazy" Une fois que yall.js est chargé et exécuté sur la page, la vidéo n'est pas jusqu'à ce que l'utilisateur la fasse défiler dans la fenêtre d'affichage. À ce stade, le data-src Les attributs des éléments <source> enfants de l'élément <video> sont échangés à src, qui envoie une requête de téléchargement de la vidéo et lance automatiquement la lecture.

Tester vos connaissances

À suivre: Préchargement et prérendu

Maintenant que vous maîtrisez les images à chargement différé et les éléments <iframe>, vous êtes bien placé pour garantir un chargement plus rapide des pages en respectant les besoins de vos utilisateurs. Toutefois, dans certains cas, le chargement spéculatif des ressources est souhaitable. Dans le module suivant, Découvrez le préchargement et le prérendu, et comment ces techniques, lorsqu'elles sont utilisées, peuvent accélérer considérablement la navigation vers les pages suivantes en chargeant à l'avance.