Il est temps de charger les iFrames hors écran de manière différée !

Addy Osmani

Barry Pollard

Le chargement différé des éléments <iframe> diffère le chargement des iFrame hors écran jusqu'à ce que l'utilisateur soit à côté de celui-ci. 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.

Comme pour le chargement différé des images, utilisez l'attribut loading pour indiquer au navigateur que vous souhaitez charger différé un iFrame.

<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

Cette démonstration de <iframe loading=lazy> montre l'intégration de vidéos avec le chargement différé :

Pourquoi charger différé les iFrames ?

Les intégrations tierces couvrent un large éventail de cas d'utilisation, des lecteurs vidéo aux les posts sur les réseaux sociaux aux annonces. Ce contenu n'est souvent pas immédiatement visible dans le viewport de l'utilisateur, mais les utilisateurs paient toujours le coût du téléchargement de données et du code JavaScript coûteux pour chaque frame, même s'ils ne le font pas défiler.

D'après des recherches menées par Chrome sur les iFrames hors écran à chargement automatique et différé pour les utilisateurs de l'économiseur de données, les iFrames à chargement différé peuvent entraîner une économie de données médiane de 2 à 3 %, et une économie de 1 à 2% Réductions de First Contentful Paint à la médiane et de 2% Améliorations du First Input Delay (FID) au 95e centile.

Le chargement différé des cadres iFrame hors écran peut également améliorer l'affichage des pages Contentful Paint (LCP) Étant donné que les iFrames nécessitent souvent une quantité importante de bande passante pour charger toutes leurs sous-ressources, le chargement différé les cadres iFrame hors écran peuvent réduire les conflits de bande passante sur les réseaux restreints en laissant davantage de bande passante pour charger les ressources qui contribuent à l'activité LCP.

Comment fonctionne le chargement différé intégré pour les iFrames ?

L'attribut loading permet à un navigateur de différer le chargement des images et des iFrames en dehors de l'écran jusqu'à ce que les utilisateurs les approchent. loading accepte deux valeurs :

• lazy: 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 sur les iFrames 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 a le même impact que le chargement explicite et anticipé de la ressource.

Si vous devez créer dynamiquement des cadres iFrame à l'aide de JavaScript, iframe.loading = 'lazy' sur l'élément est également compatibles:

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é des iFrames populaires sur l'expérience utilisateur ?

Définir les iFrames à chargement différé par défaut rend les sites Web beaucoup plus réactifs. Les exemples suivants illustrent des améliorations du délai avant interactivité (TTI) et des données d'économies réalisées sur les intégrations de supports publicitaires. En revanche, le chargement différé des cadres iFrame avantages.

YouTube

Le chargement différé des vidéos YouTube intégrées permet d'économiser 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>

Instagram

Les implémentations Instagram fournissent un bloc de balisage et un script qui injecte un iframe dans votre page. Le chargement paresseux de cette iframe évite de charger tout le script dont l'intégration a besoin et peut économiser environ 100 ko lors du chargement initial. En effet, sont souvent affichées en dessous de la fenêtre d'affichage dans la plupart des articles. est parfaitement adaptée au chargement différé iFrame.

Spotify

Le chargement différé des éléments intégrés Spotify peut économiser 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>

Plug-ins de réseau social de Facebook

Les plug-ins de réseaux sociaux Facebook permettent aux développeurs d'intégrer du contenu Facebook dans leur pages Web. Le plus populaire est le plug-in "Like", Un bouton indiquant le nombre d'utilisateurs qui ont aimé la page. Par défaut, l'intégration le plug-in "Like" sur une page Web à l'aide du SDK Facebook JSSDK environ 215 Ko de fichiers ressources, dont JavaScript en 197 Ko. Le plug-in apparaît souvent à la fin un article ou vers la fin d'une page, afin de le charger hâtivement lorsqu'il n'est pas à l'écran. peut ne pas être optimale.

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 les plug-ins data-lazy la configuration peut empêcher le chargement de ces plug-ins tant que l'utilisateur n'a pas fait défiler la page à proximité. Cela permet à l'intégration de continuer à fonctionner pour les utilisateurs qui en ont besoin, tout en économisant des données pour les utilisateurs qui ne font pas défiler la page jusqu'en bas. Nous avons de l'espoir c'est le premier d'une longue série d'intégrations permettant d'explorer le chargement différé des cadres iFrame standardisés en production.

Pour mieux contrôler le chargement différé iFrame

Le chargement différé iFrame au niveau du navigateur est bien compatible avec tous les principaux navigateurs et est recommandé dans la plupart des cas d'utilisation, afin d'éliminer la nécessité de dépendances supplémentaires sur JavaScript.

Toutefois, si vous devez prendre en charge d'anciens navigateurs ou si vous souhaitez avoir plus de contrôle sur les seuils de chargement différé, vous pouvez utiliser une bibliothèque tierce pour charger différé les iFrames sur votre site. La bibliothèque JavaScript lazysizes en fait partie et offre des options supplémentaires si vous en avez besoin.

Existe-t-il des exceptions au chargement différé iFrame hors écran ?

Une première expérience avec le chargement différé automatique des iFrames pour les utilisateurs du mode Économiseur de données dans Chrome comportait une exception pour les iFrames masquées, souvent utilisées pour les communications ou l'analyse. Le chargement différé était évité, et toujours chargé pour éviter de perturber ces caractéristiques.

Comme l'attribut loading n'applique pas ces heuristiques, le développeur doit toujours peut choisir ce qui est à chargement différé. L'attribut loading doit toujours être respecté, sous réserve de limites de distance et d'autres choix de navigateur (comme l'impression).

Ressources

Pour découvrir d'autres idées de chargement différé, reportez-vous au collection d'images et de vidéos à chargement différé.

Merci à Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley et Stoyan Stefanov pour leurs commentaires.