Cette page a été traduite par l'API Cloud Translation.

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

Addy Osmani

Barry Pollard

Navigateurs pris en charge

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

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 réduit 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 un iFrame de manière différée.

<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 utiliser des iFrames à chargement différé ?

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. Souvent, ce contenu n'est pas immédiatement visible la fenêtre d'affichage de l'utilisateur, mais les frais de téléchargement des données du code JavaScript pour chaque image, même s'ils ne font pas défiler la page jusqu'à celle-ci.

Économies de données grâce au chargement différé des cadres iFrame Dans cet exemple, le chargement hétérogène récupère 3 Mo, tandis que le chargement différé n'extrait ce code qu'une fois que l'utilisateur fait défiler l'écran et se rapproche de l'iFrame. — Le chargement rapide d'iFrames hors écran permet aux utilisateurs gaspillent des données en téléchargeant des éléments qu'ils n'auraient peut-être jamais vus.

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 iFrames hors écran et jusqu'à ce que les utilisateurs fassent défiler la page à proximité. 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.

Voici comment utiliser l'attribut loading sur des iFrames:

<!-- 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 qu'un chargement hâtif explicite 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 des intégrations iFrame populaires à chargement différé 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 grâce aux 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 de gagner 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>

Chrome.com a réduit de 10 secondes le délai avant interactivité grâce au chargement différé d'iFrames hors écran pour l'intégration de ses vidéos YouTube. — Chrome.com a réduit son TTI de 10 secondes de le chargement différé des intégrations YouTube hors écran.

Instagram

Les intégrations Instagram fournissent un bloc de balisage et un script qui injecte une dans votre page. Le chargement différé de cet iFrame évite d'avoir à charger toutes les et permet d'économiser environ 100 Ko pour le chargement initial. En effet, sont souvent affichées sous 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 intégrations Spotify permet d'é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 Facebook sont désormais accepter les cadres iFrame standardisés le chargement différé. 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é. Ainsi, l'intégration continue de fonctionner pour les utilisateurs qui en ont besoin, tandis que d'économiser des données pour les utilisateurs qui ne font pas défiler toute la page. 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.

Chargement différé des cadres iFrame multi-navigateurs

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 avez besoin d'utiliser davantage de navigateurs ou si vous souhaitez mieux contrôler les seuils de chargement différé, vous pouvez utiliser une bibliothèque tierce pour charger des cadres iFrame de manière différée sur votre site.

Vous pouvez également effectuer un chargement différé des cadres iFrame hors écran à l'aide de la classe lazysizes. Bibliothèque JavaScript:

<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 schéma suivant pour détecter le chargement différé et extraire les tailles différées lorsqu'elle 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 exceptions au chargement différé iFrame hors écran ?

Test préliminaire des iFrames à chargement différé automatique pour l'économiseur de données les utilisateurs de Chrome avaient une exception pour les iFrames cachés, souvent utilisés pour les communications ou les analyses. 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 est honoré, soumis aux limites de distance et à d'autres choix du 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 Basque, Joe Medley et Stoyan. Stefanov pour leurs avis.