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

Addy Osmani

Barry Pollard

Beim Lazy-Loading von <iframe>-Elementen werden Iframes außerhalb des Bildschirms erst geladen, wenn der Nutzer in ihre Nähe scrollt. Dies spart Daten, beschleunigt das Laden anderer Teile der Seite und reduziert die Arbeitsspeichernutzung.

Wie beim Lazy Loading für Bilder geben Sie mit dem Attribut loading dem Browser an, dass ein iFrame per Lazy Loading geladen werden soll.

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

In dieser Demo von <iframe loading=lazy> sind eingebettete Videos mit Lazy Loading zu sehen:

Vorteile von Lazy Loading für iFrames

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

Basierend auf den Chrome-Forschungen zum automatischen Lazy-Loading von Offscreen-Iframes für Nutzer des Data Saver-Modus kann das Lazy-Loading von Iframes zu durchschnittlichen Dateneinsparungen von 2–3 %, durchschnittlichen First Contentful Paint-Verkürzungen von 1–2 % und durchschnittlichen Verbesserungen der First Input Delay (FID) von 2 % im 95. Perzentil führen.

Durch das Lazy-Loading von iFrames außerhalb des Bildschirms lässt sich auch der Wert für Largest Contentful Paint (LCP) Ihrer Seite verbessern. Da Iframes oft eine erhebliche Bandbreite benötigen, um alle untergeordneten Ressourcen zu laden, kann das Lazy-Loading von Offscreen-Iframes die Bandbreitenauslastung auf Geräten mit eingeschränkter Netzwerkkapazität reduzieren. So bleibt mehr Bandbreite für das Laden von Ressourcen übrig, 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 nicht sichtbaren Iframes und Bildern verzögern, bis Nutzer in ihre Nähe scrollen. loading unterstützt zwei Werte:

• lazy: ein guter Kandidat für Lazy Loading.
• eager: Kein guter Kandidat für Lazy Loading. Sofort laden.

So verwenden Sie das loading-Attribut in 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>

Wenn Sie das Attribut nicht angeben, hat das dieselben Auswirkungen wie das explizite, vorzeitige Laden der Ressource.

Wenn Sie iFrames dynamisch mit JavaScript erstellen müssen, wird auch die Einstellung von iframe.loading = 'lazy' für das Element 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 standardmäßig verwendet würden, wären Websites viel responsiver. In den folgenden Beispielen sind Verbesserungen der „Time to Interactive“ (TTI) und Dateneinsparungen für eingebettete Medien zu sehen. Mit Lazy-Loading-Anzeigen-Iframes lassen sich aber ähnliche Vorteile erzielen.

YouTube

Durch das Lazy-Loading von eingebetteten YouTube-Videos werden beim ersten Laden der Seite 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, das einen iFrame in deine Seite einfügt. Durch Lazy Loading dieses iFrames muss nicht das gesamte Script geladen werden, das für die Einbettung erforderlich ist. Dadurch lassen sich beim anfänglichen Ladevorgang etwa 100 KB einsparen. Da diese Einbettungen in den meisten Artikeln oft unter dem Darstellungsbereich angezeigt werden, ist dies ein geeigneter Kandidat für das Lazy-Loading von 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>

Soziale Plug-ins von Facebook

Mit den Social Plugins von Facebook können Entwickler Facebook-Inhalte in ihre Webseiten einbetten. Das beliebteste davon ist das Mag ich-Plug-in, eine Schaltfläche, die angibt, wie viele Nutzer der Seite „Mag ich“ gegeben haben. Wenn Sie das „Mag ich“-Plug-in mit dem Facebook JSSDK in eine Webseite einbetten, werden standardmäßig etwa 215 KB an Ressourcen abgerufen, davon 197 KB JavaScript. Das Plug-in wird oft am Ende eines Artikels oder nahe am Ende einer Seite angezeigt. Daher kann es nicht optimal sein, das Plug-in zu laden, wenn es außerhalb des sichtbaren Bereichs liegt.

Dank Ingenieur Stoyan Stefanov unterstützen jetzt alle Facebook-Plug-ins für soziale Netzwerke standardisiertes Lazy Loading für iFrames. 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 funktioniert das eingebettete Element für Nutzer, die es benötigen, weiter. Gleichzeitig werden Daten für Nutzer gespart, die nicht ganz nach unten scrollen. Wir hoffen, dass dies der erste von vielen Einbettungen ist, bei denen standardisiertes Lazy-Loading von iframes in der Produktion getestet wird.

Wenn Sie mehr Kontrolle über Lazy Loading für iFrames haben möchten

Das Lazy-Loading von iFrames auf Browserebene wird von allen gängigen Browsern gut unterstützt und für die meisten Anwendungsfälle empfohlen, da keine zusätzlichen Abhängigkeiten von JavaScript erforderlich sind.

Wenn Sie jedoch ältere Browser unterstützen oder mehr Kontrolle über die Lazy-Loading-Grenzwerte haben möchten, können Sie eine Bibliothek von Drittanbietern verwenden, um iFrames auf Ihrer Website per Lazy Loading zu laden. Die JavaScript-Bibliothek lazysizes ist eine solche Bibliothek, die bei Bedarf zusätzliche Optionen bietet.

Gibt es Ausnahmen für das Lazy-Laden von iFrames außerhalb des Bildschirms?

Ein früher Test mit automatischem Lazy-Loading von Iframes für Nutzer des Data Saver-Modus in Chrome enthielt eine Ausnahme für ausgeblendete Iframes, die häufig für Kommunikation oder Analysen verwendet werden. Das Laden dieser Elemente wurde verzögert verhindert und immer geladen, um zu verhindern, dass diese Funktionen beeinträchtigt werden.

Das Attribut loading wendet diese Heuristiken nicht an. Der Entwickler kann also immer auswählen, was Lazy Loading verwendet. Das Attribut loading sollte immer berücksichtigt werden, vorbehaltlich Entfernungsbeschränkungen und anderer Browseroptionen (z. B. beim Drucken).

Ressourcen

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

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