Le chargement différé des éléments <iframe> diffère le chargement des iFrames hors écran jusqu'à ce que l'utilisateur fasse défiler la page à proximité. Cela permet d'économiser des données, d'accélérer le chargement d'autres parties de la page et de réduire l'utilisation de la mémoire.
Navigateurs pris en charge
- 77
- 79
- 121
- 16.4
Vous indiquez au navigateur que vous souhaitez charger un iFrame avec l'attribut loading, de la même manière que vous indiquez un chargement différé pour les images.
<iframe src="https://example.com"
loading="lazy"
width="600"
height="400"></iframe>
Cette démonstration de <iframe loading=lazy> présente des intégrations vidéo à chargement différé:
Pourquoi effectuer le chargement différé des iFrames ?
Les intégrations tierces couvrent un large éventail de cas d'utilisation, des lecteurs vidéo aux posts sur les réseaux sociaux en passant par les annonces. Souvent, ce contenu n'est pas immédiatement visible dans la fenêtre d'affichage de l'utilisateur. Elle n'est visible que lorsque l'utilisateur fait défiler la page vers le bas. Malgré cela, les utilisateurs paient le coût du téléchargement des données et le coût du code JavaScript pour chaque frame, même s'ils n'y accèdent pas.
D'après les recherches de Chrome sur les iFrames à chargement différé automatique pour les utilisateurs de l'économiseur de données, les iFrames à chargement différé peuvent permettre d'économiser 2 à 3% sur les données, des réductions de 1 à 2% pour First Contentful Paint à la médiane et 2% pour le First Input Delay (FID) au 95e centile.
En outre, le chargement différé des iFrame hors écran présente des avantages pour le Largest Contentful Paint (LCP). Candidats LCP, tels que les images ou le texte dépendant de polices Web pour le rendu. Étant donné que les iFrames peuvent souvent nécessiter une quantité importante de bande passante pour charger toutes leurs sous-ressources, les iFrames hors écran à chargement différé peuvent réduire considérablement les conflits de bande passante sur les appareils limités au réseau, ce qui laisse plus de bande passante pour charger les ressources qui contribuent au LCP d'une page.
Comment fonctionne le chargement différé intégré pour les iFrames ?
L'attribut loading permet à un navigateur de différer le chargement des iFrames et des images hors écran jusqu'à ce que les utilisateurs fassent défiler la page à proximité. loading accepte deux valeurs:
lazy: est un bon candidat pour le chargement différé.eager: le chargement différé n'est pas adapté. Chargez immédiatement.
L'utilisation de l'attribut loading dans des cadres iFrame fonctionne comme suit:
<!-- Lazy-load the iframe -->
<iframe src="https://example.com"
loading="lazy"
width="600"
height="400"></iframe>
<!-- Eagerly load the iframe -->
<iframe src="https://example.com"
width="600"
height="400"></iframe>
Ne pas spécifier l'attribut aura le même impact que de charger explicitement la ressource.
Si vous devez créer des iFrames dynamiques via JavaScript, vous pouvez également définir la valeur iframe.loading = 'lazy' sur l'élément:
var iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
iframe.loading = 'lazy';
document.body.appendChild(iframe);
Quel est l'impact du chargement différé sur des intégrations iFrame populaires ?
Si le Web change de sorte que le chargement différé des iFrames hors écran soit défini par défaut, voici à quoi ressemble un exemple:
Intégrations de vidéos YouTube à chargement différé (vous économisez environ 500 Ko lors du chargement initial de la page):
<iframe src="https://www.youtube.com/embed/YJGCZCaIZkQ"
loading="lazy"
width="560"
height="315"
frameborder="0"
allow="accelerometer; autoplay;
encrypted-media; gyroscope;
picture-in-picture"
allowfullscreen></iframe>
Anecdote:Lorsque nous sommes passés aux intégrations YouTube à chargement différé pour Chrome.com, nous avons gagné 10 secondes par rapport au temps de chargement interactif de nos pages sur les appareils mobiles. J'ai ouvert un bug interne dans YouTube pour discuter de l'ajout de loading=lazy à son code d'intégration.
Intégrations Instagram à chargement différé (économise environ 100 Ko avec gzip lors du chargement initial):
Les intégrations Instagram fournissent un bloc de balisage et un script qui injecte un iFrame dans votre page. Le chargement différé de cet iFrame évite d'avoir à charger tout le script nécessaire à l'intégration. Étant donné que ces intégrations s'affichent souvent sous la fenêtre d'affichage dans la plupart des articles, cela semble être un bon candidat pour le chargement différé de leur iFrame.
Intégrations Spotify à chargement différé (économie de 514 Ko lors du chargement initial):
<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
loading="lazy"
width="300"
height="380"
frameborder="0"
allowtransparency="true"
allow="encrypted-media"></iframe>
Bien que les intégrations précédentes illustrent les avantages potentiels du chargement différé des iFrames pour le contenu multimédia, ils pourraient également en bénéficier pour les annonces.
Étude de cas: Le chargement différé des plugins de réseaux sociaux de Facebook
Les plug-ins de réseaux sociaux Facebook permettent aux développeurs d'intégrer du contenu Facebook dans leurs pages Web. Un certain nombre de ces plug-ins sont proposés, tels que les posts intégrés, les photos, les vidéos, les commentaires. Le plus populaire est le plug-in "J'aime". Il s'agit d'un bouton qui indique le nombre de personnes ayant aimé la page. Par défaut, l'intégration du plug-in "Like" dans une page Web (à l'aide du JSSDK de Facebook) extrait environ 215 Ko de ressources, dont 197 Ko en JavaScript. Dans de nombreux cas, le plug-in peut apparaître à la fin d'un article ou à proximité de la fin d'une page. Par conséquent, le charger hâtivement alors qu'il n'est pas à l'écran n'est pas optimal.
Grâce à l'ingénieur Stoyan Stefanov, tous les plug-ins de réseaux sociaux de Facebook sont désormais compatibles avec le chargement différé standardisé des iFrames.
Les développeurs qui activent le chargement différé via la configuration data-lazy des plug-ins pourront désormais éviter son chargement tant que l'utilisateur n'a pas fait défiler la page à proximité. Cela permet à l'intégration de fonctionner complètement pour les utilisateurs qui en ont besoin, tout en économisant des données pour ceux qui ne font pas défiler la page jusqu'en bas. Nous espérons qu'il s'agit de la première d'une longue série à explorer le chargement différé standardisé des iFrames en production.
Puis-je effectuer le chargement différé des iFrames sur plusieurs navigateurs ? Oui
Le chargement différé des cadres iFrame peut être appliqué de manière progressive. Les navigateurs qui acceptent loading=lazy dans les iFrames chargent l'iFrame de manière différée, tandis que l'attribut loading est ignoré en toute sécurité dans les navigateurs qui ne le prennent pas encore en charge.
Il est également possible de procéder au chargement différé des iFrames hors écran à l'aide de la bibliothèque JavaScript lazysizes. Cela peut être souhaitable dans les cas suivants:
- nécessitent plus de seuils personnalisés de chargement différé que ce que propose actuellement le chargement différé standardisé.
- souhaitent offrir aux utilisateurs une expérience cohérente de chargement différé des cadres iFrame dans les différents navigateurs.
<script src="lazysizes.min.js" async></script>
<iframe frameborder="0"
class="lazyload"
allowfullscreen=""
width="600"
height="400"
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>
Utilisez le modèle suivant pour détecter le chargement différé et récupérer les tailles différées lorsqu'il n'est pas disponible:
<iframe frameborder="0"
class="lazyload"
loading="lazy"
allowfullscreen=""
width="600"
height="400"
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>
<script>
if ('loading' in HTMLIFrameElement.prototype) {
const iframes = document.querySelectorAll('iframe[loading="lazy"]');
iframes.forEach(iframe => {
iframe.src = iframe.dataset.src;
});
} else {
// Dynamically import the LazySizes library
const script = document.createElement('script');
script.src =
'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
document.body.appendChild(script);
}
</script>
Existe-t-il des cas où les iFrames hors écran avec loading=lazy sont toujours chargés ?
Lors d'un premier test, les iFrames à chargement différé automatique, pour les utilisateurs de l'économiseur de données dans Chrome, comportaient une exception pour les iFrames masqués, souvent utilisés à des fins de communication ou d'analyse. Ceux-ci ont été évités de leur chargement différé et ont toujours été chargés pour éviter d'endommager ces fonctionnalités.
Avec l'attribut loading, le développeur a de nouveau le choix. Par conséquent, aucune heuristique de ce type n'est appliquée, et l'attribut loading doit toujours être respecté, sous réserve des limites de distance et d'autres choix du navigateur (par exemple, l'impression).
Conclusion
Pour découvrir d'autres idées de chargement différé, consultez la collection d'images et de vidéos sur web.dev.
Nous remercions Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley et Stoyan Stefanov pour leurs avis.