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'attributloading."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
Quelle est la valeur par défaut de l'attribut loading pour
les éléments <img> et <iframe> ?
"eager""lazy"Dans quels cas est-il judicieux d'utiliser des solutions de chargement différé basées sur JavaScript ?
loading n'est pas
comme dans le cas de vidéos en lecture automatique destinées à remplacer
des images animées ou le chargement différé d'un élément <video>
image poster.
Dans quels cas une façade est-elle une technique utile ?
À 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.