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.
Unterstützte Browser
- 77
- 79
- 121
- 16.4
Mit dem Attribut loading geben Sie im Browser an, dass ein iFrame Lazy Loading durchführen soll. Dies funktioniert genauso wie das Lazy Loading für Bilder.
<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 ein breites Spektrum an Anwendungsfällen ab, von Videoplayern über Beiträge in sozialen Medien bis hin zu Anzeigen. Oft sind diese Inhalte nicht sofort im Darstellungsbereich des Nutzers sichtbar. sondern nur, wenn der Nutzer auf der Seite weiter nach unten scrollt. Trotzdem zahlen Nutzer für jeden Frame die Kosten für das Herunterladen von Daten und das kostspielige JavaScript, selbst wenn sie nicht bis dahin scrollen.
Basierend auf den Untersuchungen von Chrome zum automatischen Lazy Loading von Offscreen-iFrames für Nutzer des Datensparmodus können Lazy-Loading-iFrames zu einer durchschnittlichen Dateneinsparung von 2–3 %, einer Reduzierung des First Contentful Paint-Werts bei First Contentful Paint und einer Verbesserung des FID-Werts (First Input Delay) beim 95. Perzentil um 2 % führen.
Außerdem kann das Lazy Loading von iFrames außerhalb des Bildschirms Vorteile für Largest Contentful Paint (LCP) haben. LCP-Kandidaten wie Bilder oder Text, der von Webschriftarten für das Rendering abhängig ist Da iFrames häufig eine große Bandbreite benötigen, um alle ihre Unterressourcen zu laden, können Lazy Loading von außerhalb des Bildschirms befindlichen iFrames Bandbreitenkonflikte auf netzwerkbeschränkten Geräten erheblich 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: Eignet sich gut für Lazy Loading.eager: eignet sich nicht 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 Sie das Attribut überhaupt nicht angeben, hat dies die gleichen Auswirkungen wie das ausdrückliche Laden der Ressource.
Wenn Sie iFrames dynamisch über 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);
Welche Auswirkungen könnte das Lazy Loading bei beliebten iFrame-Einbettungen haben?
Wenn sich das Web so ändert, dass nicht sichtbare iFrames standardmäßig geladen werden, würde dies etwa so aussehen:
Lazy Loading von YouTube-Videoeinbettungen (ca. 500 KB beim ersten Seitenaufbau 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>
Anekdote:Als wir auf Lazy Loading von YouTube-Einbettungen für Chrome.com umgestiegen sind, haben wir 10 Sekunden eingespart, wie schnell unsere Seiten auf Mobilgeräten interaktiv sein könnten. Ich habe einen internen Fehler bei YouTube gemeldet, um zu besprechen, wie man loading=lazy zum Einbettungscode hinzufügt.
Lazy Loading von Instagram-Einbettungen (ca. 100 KB mit gzip beim ersten Laden eingespart):
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 alle für die Einbettung erforderlichen Scripts geladen werden. Da solche Einbettungen in den meisten Artikeln häufig unterhalb des Darstellungsbereichs angezeigt werden, scheint dies ein sinnvoller Kandidat für Lazy Loading des iFrames.
Spotify-Einbettungen mit Lazy Loading (erhält beim ersten Laden 514 KB):
<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
loading="lazy"
width="300"
height="380"
frameborder="0"
allowtransparency="true"
allow="encrypted-media"></iframe>
Die vorstehenden Einbettungen veranschaulichen die potenziellen Vorteile von Lazy-Loading-iFrames für Medieninhalte, es besteht jedoch das Möglichkeit, dass diese Vorteile auch für Anzeigen sichtbar sind.
Fallstudie: Lazy Loading der Social Plug-ins von Facebook
Mit den sozialen Plug-ins von Facebook können Entwickler Facebook-Inhalte in ihre Webseiten einbetten. Viele dieser Plug-ins werden angeboten, darunter eingebettete Beiträge, Fotos, Videos und Kommentare. Das beliebteste ist das Plug-in "Gefällt mir" – eine Schaltfläche, über die gezählt wird, wer die Seite mit "Gefällt mir" markiert hat. Wenn Sie das Like-Plug-in mithilfe des Facebook JSSDK in eine Webseite einbetten, werden standardmäßig etwa 215 KB an Ressourcen abgerufen, davon 197 KB JavaScript. In vielen Fällen erscheint das Plug-in am Ende eines Artikels oder gegen Ende einer Seite. Daher ist es nicht optimal, es schnell zu laden, 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 das Laden jetzt verhindern, bis der Nutzer in der Nähe scrollt. Auf diese Weise funktioniert die Einbettung für Nutzer, die sie benötigen, weiterhin voll funktionsfähig. Für diejenigen, die nicht bis ganz nach unten scrollen, profitieren Sie von Dateneinsparungen. Wir hoffen, dass dies das erste von vielen Einbettungen ist, die standardisiertes iFrame-Lazy-Loading in der Produktion ausprobieren.
Kann ich iFrames browserübergreifend per Lazy Loading laden? Ja
Das Lazy Loading von iFrames kann als progressive Verbesserung angewendet werden. In Browsern, die loading=lazy in iFrames unterstützen, wird der iFrame per Lazy Loading geladen. In Browsern, die dies noch nicht unterstützen, wird das Attribut loading sicher ignoriert.
Mithilfe der lazysizes-JavaScript-Bibliothek ist es auch möglich, nicht sichtbare iFrames zu laden. Dies kann in folgenden Fällen sinnvoll sein:
- erfordern mehr benutzerdefinierte Lazy-Loading-Schwellenwerte als das standardisierte Lazy Loading derzeit bietet.
- möchten Nutzern ein einheitliches Lazy Loading in Form von iFrames in allen Browsern bieten möchten.
<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 Fälle, in denen noch nicht sichtbare iFrames mit loading=lazy geladen werden?
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 und immer geladen werden, um zu verhindern, dass diese Funktionen beeinträchtigt werden.
Mit dem Attribut loading steht die Entscheidung wieder dem Entwickler zur Verfügung, sodass eine solche Heuristik nicht angewendet wird und das Attribut loading immer berücksichtigt werden sollte, vorbehaltlich von Entfernungsbeschränkungen und anderen Browseroptionen (z. B. Drucken).
Fazit
In der Lazy-Loading-Sammlung für Bilder und Videos von web.dev finden Sie weitere Ideen für Lazy Loading.
Dank Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley und Stoyan Stefanov für ihre Rezensionen.