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. So werden Daten gespart, das Laden anderer Seitenteile beschleunigt und die Arbeitsspeichernutzung reduziert.

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>

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.

Auf Grundlage der Chrome-Studie zu 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.

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 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: eignet sich nicht gut für Lazy Loading. werden sofort geladen.

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 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 als Standard festgelegt werden, sind Websites viel reaktionsschneller. 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-Embeds enthalten einen Markup-Block und ein Script, das einen Iframe in Ihre Seite einfügt. 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 das Lazy-Loading von Spotify-Eingebetteten Inhalten können beim ersten Laden 514 KB gespart werden.

<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-Media-Plug-ins von Facebook können Entwickler Facebook-Inhalte in ihr Webseiten. Das beliebteste davon ist das Mag ich-Plug-in, eine Schaltfläche, die angibt, wie viele Nutzer der Seite „Mag ich“ gegeben haben. 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 oft am Ende eines Artikels oder in der Nähe des Endes einer Seite angezeigt. Daher kann es suboptimal sein, es vorzeitig zu laden, wenn es nicht auf dem Bildschirm sichtbar ist.

Dank Ingenieur Stoyan Stefanov sind jetzt alle Facebook-Plug-ins unterstützen standardisierte iFrames. Lazy Loading. Entwickler, die das 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 die Nähe scrollt. 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 Produktion.

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 müssen oder mehr Kontrolle über Lazy-Loading-Schwellenwerte haben möchten, können Sie eine Bibliothek eines Drittanbieters verwenden, um Lazy-Loading iFrames auf Ihrer Website auszuführen. Die JavaScript-Bibliothek lazysizes ist eine solche Bibliothek, die bei Bedarf zusätzliche Optionen bietet.

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

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 Lazy-Loading wurde verhindert und die Ressourcen wurden immer geladen, um Funktionsstörungen zu vermeiden.

Beim loading-Attribut werden diese Heuristiken nicht angewendet. Der Entwickler kann also immer selbst festlegen, was per Lazy Loading geladen werden soll. Das loading-Attribut sollte immer berücksichtigt werden, vorbehaltlich Abstandsbeschränkungen und anderer Browsereinstellungen (z. B. Drucken).

Ressourcen

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

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