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

Addy Osmani

Beim Lazy Loading von <iframe>-Elementen werden nicht sichtbare iFrames erst dann geladen, wenn der Nutzer zu ihnen scrollt. Dadurch werden Daten eingespart, andere Teile der Seite schneller geladen und die Arbeitsspeichernutzung reduziert.

Genau wie beim Lazy Loading für Bilder teilen Sie dem Browser über das Attribut loading mit, dass Sie ein Lazy Loading für einen iFrame wünschen.

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

In dieser Demo von <iframe loading=lazy> werden Videoeinbettungen mit Lazy Loading angezeigt:

Was spricht für Lazy Loading von iFrames?

Einbettungen von Drittanbietern decken eine Vielzahl von Anwendungsfällen ab, von Videoplayern über Beiträge in sozialen Medien bis hin zu Anzeigen. Diese Inhalte sind oft nicht sofort im Darstellungsbereich des Nutzers sichtbar, Nutzer zahlen aber dennoch die Kosten für das Herunterladen von Daten und das kostspielige JavaScript für jeden Frame, auch wenn sie nicht dorthin scrollen.

Laut Chrome-Studien zum automatischen Lazy Loading von Offscreen-iFrames für Nutzer des Datensparmodus können mit Lazy-Loading-iFrames durchschnittliche Dateneinsparungen von 2–3 %, bei First Contentful Paint um 1–2 % beim Medianwert und um 2 % bei First Input Delay (FID) beim 95. Perzentil eine Verbesserung der First Input Delay (FID) erzielt werden.

Lazy Loading von iFrames außerhalb des Bildschirms kann auch den Largest Contentful Paint (LCP) Ihrer Seite verbessern. Da iFrames häufig eine große Bandbreite benötigen, um alle ihre Unterressourcen zu laden, können Lazy-Loading-Outscreen-iFrames Bandbreitenkonflikte auf netzwerkbeschränkten Geräten reduzieren, sodass mehr Bandbreite für das Laden von Ressourcen bleibt, die zum LCP einer Seite beitragen.

Wie funktioniert das integrierte Lazy Loading für iFrames?

Mit dem Attribut loading kann ein Browser das Laden von iFrames und Bildern außerhalb des Bildschirms verzögern, bis der Nutzer in der Nähe scrollt. loading unterstützt zwei Werte:

• lazy: Geeignet für Lazy Loading.
• eager ist kein geeigneter Kandidat für Lazy Loading. Sofort laden.

Die Verwendung des Attributs loading in iFrames funktioniert so:

<!-- 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 die gleichen Auswirkungen wie das ausdrückliche Laden der Ressource.

Wenn Sie iFrames dynamisch mit JavaScript erstellen müssen, wird die Einstellung iframe.loading = 'lazy' für das Element auch unterstützt:

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

Wie wirkt sich Lazy Loading bei beliebten iFrame-Einbettungen auf die Nutzererfahrung aus?

Wenn Lazy-Loading-iFrames standardmäßig verwendet werden, sind Websites deutlich reaktionsschneller. Die folgenden Beispiele zeigen Verbesserungen bei der Zeit bis Interaktivität (Time to Interactive, TTI) und Dateneinsparungen für Medieneinbettungen. Lazy Loading von Werbe-iFrames kann jedoch ähnliche Vorteile bieten.

YouTube

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

Instagram

Instagram-Einbettungen bieten einen Markup-Block und ein Skript, mit dem ein iFrame in deine Seite eingefügt wird. Durch Lazy Loading dieses iFrames wird vermieden, dass das gesamte für die Einbettung erforderliche Skript geladen werden muss. Außerdem können beim ersten Laden etwa 100 KB eingespart werden. Da diese Einbettungen in den meisten Artikeln häufig unterhalb des Darstellungsbereichs angezeigt werden, ist dies ein sinnvoller Kandidat für das Lazy Loading von iFrames.

Spotify

Spotify-Einbettungen mit Lazy Loading können beim ersten Laden 514 KB einsparen.

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

Social-Plug-ins von Facebook

Mit sozialen Plug-ins von Facebook können Entwickler Facebook-Inhalte in ihre Webseiten einbetten. Das beliebteste ist das Gefällt mir-Plug-in, eine Schaltfläche, die anzeigt, wie viele Nutzer die Seite mit "Gefällt mir" markiert haben. Wenn Sie das Like-Plug-in mithilfe des Facebook JSSDK in eine Webseite einbetten, werden standardmäßig etwa 215 KB an Ressourcen abgerufen, 197 KB davon sind JavaScript. Das Plug-in wird häufig am Ende eines Artikels oder gegen Ende einer Seite angezeigt. Es kann daher keine optimale Lösung sein, wenn es schnell geladen wird, wenn es nicht auf dem Bildschirm zu sehen ist.

Dank Entwickler Stoyan Stefanov unterstützen jetzt alle Social-Media-Plug-ins von Facebook standardisiertes iFrame-Lazy Loading. Entwickler, die Lazy Loading über die data-lazy-Konfiguration der Plug-ins aktivieren, können jetzt verhindern, dass diese Plug-ins geladen werden, bis der Nutzer in der Nähe scrollt. So kann die Einbettung für Nutzer, die sie benötigen, weiterhin funktionieren, während Daten für Nutzer gespeichert werden, die auf einer Seite nicht ganz nach unten scrollen. Wir hoffen, dass dies die erste von vielen Einbettungen ist, die das standardisierte Lazy Loading von iFrames in der Produktion ausprobieren.

Lazy Loading für browserübergreifendes iFrame

Sie können das Lazy Loading von iFrames als schrittweise Verbesserung auf Ihrer Website anwenden. Browser, die loading=lazy in iFrames unterstützen, führen das Lazy Loading des iFrames per Lazy Loading durch. In Browsern, die das Attribut loading nicht unterstützen, wird es ignoriert.

Mit der lazysizes-JavaScript-Bibliothek können Sie auch außerhalb des sichtbaren iFrames Lazy Loading von iFrames implementieren. Dies kann in folgenden Fällen sinnvoll sein:

• Sie verlangen mehr benutzerdefinierte Lazy-Loading-Schwellenwerte als bei standardisierten Lazy-Loading-Angeboten.
• Sie möchten Nutzern in allen Browsern ein einheitliches Lazy-Loading-Erlebnis mit iFrames bieten.

<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 zu erkennen und Lazysizes abzurufen, wenn diese nicht verfügbar sind:

<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 beim Lazy Loading von nicht sichtbaren iFrames?

In einem frühen Test mit automatischem Lazy Loading von iFrames für Datensparmodus-Nutzer in Chrome gab es eine Ausnahme für versteckte iFrames, die häufig für Kommunikation oder Analysen verwendet werden. Es wurde verhindert, dass sie verzögert geladen werden, und immer geladen, um zu verhindern, dass diese Features nicht mehr funktionieren.

Das Attribut loading wendet diese Heuristik nicht an, sodass der Entwickler immer auswählen kann, was Lazy Loading erhalten soll. Das Attribut loading sollte immer berücksichtigt werden, vorbehaltlich von Abstandsbeschränkungen und anderen Browseroptionen (z. B. Drucken).

Ressourcen

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

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