Es ist an der Zeit, Lazy Loading für bildschirmunabhängige iFrames einzusetzen.

Addy Osmani

Barry Pollard

Beim Lazy Loading von <iframe>-Elementen wird das Laden von Out-Screen-iFrames verzögert bis die Nutzenden in ihre Nähe scrollen. Das spart Daten und beschleunigt das Laden andere Teile der Seite und reduziert die Speichernutzung.

Wie beim Lazy Loading für Bilder Verwenden Sie das Attribut loading, um dem Browser mitzuteilen, dass ein iFrame per Lazy Loading geladen werden soll.

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

Diese Demo von <iframe loading=lazy> zeigt Lazy-Loading-Videoeinbettungen:

Vorteile von Lazy-Loading für iFrames

Drittanbieter-Einbettungen decken eine Vielzahl von Anwendungsfällen ab, von Videoplayern Beiträge in sozialen Medien zu Anzeigen. Diese Inhalte sind oft nicht sofort in in den Darstellungsbereich des Nutzers, zahlt aber dennoch die Kosten für das Herunterladen von Daten und JavaScript-Code für jeden Frame, auch wenn nicht zu diesem Frame gescrollt wird.

</ph>

Basierend auf den Chrome-Studien zum automatisch Lazy Loading von Offscreen-iFrames für Nutzer der Datenkomprimierung, Lazy Loading für iFrames könnte zu durchschnittlichen Einsparungen von 2–3% und 1–2 % bei der Datennutzung führen. Senkung des Werts von First Contentful Paint im Medianwert und 2% Verbesserungen bei First Input Delay (FID) beim 95. Perzentil.

Lazy Loading von Off-Screen-iFrames kann die größte Contentful Paint (LCP). Da iFrames häufig eine eine beträchtliche Menge an Bandbreite benötigt, um alle ihre untergeordneten Ressourcen zu laden, Lazy Loading. können bei Netzwerkbeschränkungen Bandbreitenkonflikte reduziert werden, Geräte, sodass mehr Bandbreite für das Laden von Ressourcen zur Verfügung steht, LCP

Wie funktioniert das integrierte Lazy Loading für iFrames?

Mit dem Attribut loading kann ein Browser das Laden von Off-Screen-iFrames verzögern und bis Nutzende in der Nähe scrollen. loading unterstützt zwei Werte:

• lazy: eignet sich gut für Lazy Loading.
• eager: Kein guter Kandidat für Lazy Loading. Sofort laden.

So kann das Attribut loading in iFrames verwendet werden:

<!-- 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>

Wenn das Attribut nicht angegeben wird, hat dies denselben Einfluss wie das explizite Laden der Ressource.

Wenn Sie iFrames mit JavaScript dynamisch erstellen müssen, legen Sie iframe.loading = 'lazy' für das Element ist ebenfalls unterstützt:

var iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
iframe.loading = 'lazy';
document.body.appendChild(iframe);

Wie wirkt sich das Lazy Loading beliebter iFrame-Einbettungen auf die Nutzererfahrung aus?

Wenn Lazy-Loading-iFrames als Standard festgelegt werden, sind Websites viel reaktionsschneller. Die folgenden Beispiele zeigen Verbesserungen und Daten der Zeit bis zur Interaktivität (Time to Interactive, TTI). Einsparungen bei Medieneinbettungen. Lazy Loading Vorteile.

YouTube

Durch Lazy Loading von YouTube-Videoeinbettungen werden beim ersten Seitenaufbau etwa 500 KB eingespart:

<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>

</ph>

Instagram

Instagram-Einbettungen bieten einen Markup-Block und ein Skript, das eine iFrame in Ihre Seite einbinden. Durch Lazy Loading dieses iFrames wird verhindert, dass alle die für das Einbetten erforderlich sind, wodurch etwa 100 KB beim anfänglichen Ladevorgang eingespart werden können. Weil werden diese Einbettungen in den meisten Artikeln oft unterhalb des Darstellungsbereichs angezeigt. ein angemessener Kandidat für Lazy Loading für iFrames.

Spotify

Durch Lazy Loading von Spotify-Einbettungen können Sie beim ersten Laden 514 KB sparen.

<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
        loading="lazy"
        width="300"
        height="380"
        frameborder="0"
        allowtransparency="true"
        allow="encrypted-media"></iframe>

Facebook-Plug-ins für soziale Netzwerke

Mit den Social-Media-Plug-ins von Facebook können Entwickler Facebook-Inhalte in ihr Webseiten. Das beliebteste Plug-in ist das Like-Plug-in, Eine Schaltfläche, die anzeigt, wie viele Nutzende mit „Mag ich“ bewertet haben auf der Seite. Standardmäßig werden eingebettete das "Gefällt mir"-Plug-in auf einer Webseite, das das Facebook JSSDK verwendet, etwa 215 KB Ressourcen, davon 197 KB JavaScript. Das Plug-in wird häufig am Ende eines Artikels oder eines Seitenendes, sodass dieser eifrig geladen werden kann, wenn er suboptimal sein kann.

</ph>

Dank Ingenieur Stoyan Stefanov sind jetzt alle Facebook-Plug-ins unterstützen standardisierte iFrames. Lazy Loading. Entwickler, die Lazy Loading über die Plug-ins aktivieren, data-lazy kann die Konfiguration jetzt verhindern, dass diese Plug-ins geladen werden, bis der Nutzer scrollt. in der Nähe. So funktioniert die Einbettung weiterhin für Nutzer, die sie benötigen, Daten für Nutzende zu speichern, die auf einer Seite nicht ganz nach unten scrollen. Wir hoffen, dass wir Dies ist die erste von vielen Einbettungen, die standardisiertes Lazy Loading für iFrames für die Produktion.

Browserübergreifendes Lazy Loading für iFrames

Das Lazy Loading für iFrames auf Browserebene wird von allen gängigen Browsern unterstützt und in den meisten Anwendungsfällen empfohlen, um zusätzliche Abhängigkeiten von JavaScript zu vermeiden.

Wenn Sie jedoch mehr Browser unterstützen müssen oder mehr Kontrolle über Lazy-Loading-Schwellenwerte haben möchten, können Sie eine Drittanbieterbibliothek verwenden, um Lazy Loading für iFrames auf Ihrer Website auszuführen.

Sie können für Offscreen-iFrames auch mithilfe von Lazysizes Lazy Loading verwenden. JavaScript-Bibliothek:

<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>

Verwenden Sie das folgende Muster, um Lazy-Loading-Funktionen zu erkennen und Lazysizes abzurufen wenn er nicht verfügbar ist:

<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>

Gibt es Ausnahmen für Lazy Loading für nicht sichtbare iFrames?

Früher Test mit automatisch Lazy Loading von iFrames für die Datenkomprimierung gab es in Chrome eine Ausnahme für versteckte iFrames, die oft für Kommunikation oder Analyse. Das Laden dieser Elemente wurde verzögert verhindert. um zu verhindern, dass diese Funktionen beeinträchtigt werden.

Das Attribut loading wendet diese Heuristiken nicht an, sodass der Entwickler immer entscheidet selbst, was Lazy Loading ist. Das Attribut loading sollte immer unter Beachtung von Entfernungsbeschränkungen und anderen Browsereinstellungen (z. B. Drucken) unterliegen.

Ressourcen

Weitere Lazy-Loading-Ideen finden Sie in der Sammlung von Lazy Loading für Bilder und Videos.

Dank Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley und Stoyan Stefanov für ihre Rezensionen.