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

Addy Osmani

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.

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

<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. Bien souvent, ce contenu n'est pas immédiatement visible dans la fenêtre d'affichage de l'utilisateur, mais celui-ci paie toujours le coût du téléchargement des données et le coût JavaScript coûteux pour chaque frame, même s'il n'y accède pas.

D'après les recherches menées par Chrome sur les iFrames à chargement différé automatique pour les utilisateurs de l'économiseur de données, les iFrames à chargement différé pourraient permettre d'économiser 2 à 3% en moyenne sur les données, 1 à 2 % pour la métrique First Contentful Paint à la médiane et 2 % pour le First Input Delay (FID) au 95e centile.

Le chargement différé des iFrame hors écran peut également améliorer le Largest Contentful Paint (LCP) de votre page. Étant donné que les iFrames ont souvent besoin d'une quantité importante de bande passante pour charger toutes leurs sous-ressources, les iFrames hors écran à chargement différé peuvent réduire 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 au 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: 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 a le même impact que de charger explicitement la ressource.

Si vous devez créer dynamiquement des iFrames à l'aide de 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 sur l'expérience utilisateur ?

Définir des iFrames à chargement différé par défaut rend les sites Web beaucoup plus réactifs. Les exemples suivants illustrent les améliorations du délai avant interactivité (TTI) et les économies de données pour les intégrations multimédias. Toutefois, les iFrames publicitaires avec chargement différé peuvent offrir des avantages similaires.

YouTube

Le chargement différé des intégrations de vidéos YouTube 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 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 tous les scripts nécessaires à l'intégration et permet d'économiser environ 100 Ko lors du chargement initial. Étant donné que ces représentations vectorielles continues s'affichent souvent sous la fenêtre d'affichage dans la plupart des articles, il s'agit d'un candidat raisonnable au chargement différé des iFrame.

Spotify

Les intégrations Spotify à chargement différé permettent 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 des 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. La plus populaire d'entre elles est le plug-in "J'aime", qui indique le nombre d'utilisateurs "J'aime" sur la page. Par défaut, l'intégration du plug-in "J'aime" dans une page Web à l'aide du JSSDK de Facebook récupère environ 215 Ko de ressources, dont 197 Ko en JavaScript. Le plug-in apparaît souvent à la fin d'un article ou près de la fin d'une page. Par conséquent, le charger hâtivement alors qu'il n'est pas à l'écran n'est pas toujours 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 peuvent désormais 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 enregistrant 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 cadres iFrame en production.

Chargement différé des cadres iFrame internavigateurs

Vous pouvez appliquer le chargement différé iFrame sur votre site de façon progressive. Les navigateurs qui acceptent loading=lazy dans les iFrames chargent l'iFrame de manière différée, tandis que les navigateurs qui ne sont pas compatibles avec l'attribut loading l'ignorent en toute sécurité.

Vous pouvez également effectuer un chargement différé des iFrames hors écran à l'aide de la bibliothèque JavaScript lazysizes. Cela peut être utile dans les cas suivants:

• Exiger des seuils de chargement différé personnalisés plus élevés que les offres standardisées de chargement différé
• offrir aux utilisateurs une expérience cohérente de chargement différé des cadres iFrame sur tous les 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 exceptions au chargement différé des cadres iFrame hors écran ?

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 de perturber ces fonctionnalités.

L'attribut loading n'applique pas ces méthodes heuristiques. Par conséquent, le développeur peut toujours choisir la charge différée. L'attribut loading doit toujours être respecté, en tenant compte des limites de distance et d'autres choix du navigateur (tels que l'impression).

Ressources

Pour en savoir plus, consultez la collection consacrée au chargement différé des images et des vidéos de web.dev.

Nous remercions Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley et Stoyan Stefanov pour leurs avis.