Lazy Loading für Bilder und <iframe>-Elemente

Bilder und <iframe>-Elemente benötigen oft mehr Bandbreite als andere Arten von Ressourcen. Bei <iframe>-Elementen kann das Laden und Rendern der darin enthaltenen Seiten viel zusätzliche Verarbeitungszeit in Anspruch nehmen.

Beim Lazy Loading von Bildern kann es hilfreich sein, das Laden von Bildern, die sich außerhalb des ursprünglichen Darstellungsbereichs befinden, aufzuschieben, um die Bandbreitenkonkurrenz für wichtigere Ressourcen im ursprünglichen Darstellungsbereich zu verringern. Das kann in einigen Fällen, in denen die Netzwerkverbindungen schlecht sind, den LCP-Wert (Largest Contentful Paint) einer Seite verbessern. Die neu zugewiesene Bandbreite kann dazu beitragen, dass LCP-Kandidaten schneller geladen und gerendert werden.

Bei <iframe>-Elementen kann die Interaction to Next Paint (INP) einer Seite beim Start durch Lazy Loading verbessert werden. Das liegt daran, dass ein <iframe> ein völlig separates HTML-Dokument mit eigenen untergeordneten Ressourcen ist. <iframe>-Elemente können zwar in einem separaten Prozess ausgeführt werden, es ist jedoch nicht ungewöhnlich, dass sie einen Prozess mit anderen Threads gemeinsam nutzen. Dies kann dazu führen, dass Seiten weniger auf Nutzereingaben reagieren.

Das verzögerte Laden von Bildern und <iframe>-Elementen, die nicht auf dem Bildschirm angezeigt werden, ist daher eine lohnende Technik, die mit relativ geringem Aufwand umgesetzt werden kann und eine angemessene Leistungssteigerung ermöglicht. In diesem Modul wird erläutert, wie Sie diese beiden Arten von Elementen verzögert laden, um die Nutzerfreundlichkeit während der kritischen Startphase der Seite zu verbessern.

Lazy Loading von Bildern mit dem Attribut loading

Das loading-Attribut kann <img>-Elementen hinzugefügt werden, um Browsern mitzuteilen, wie sie geladen werden sollen:

  • "eager" informiert den Browser, dass das Bild sofort geladen werden soll, auch wenn es sich außerhalb des ursprünglichen Viewports befindet. Dies ist auch der Standardwert für das Attribut loading.
  • Mit "lazy" wird das Laden eines Bildes verzögert, bis es sich in einem bestimmten Abstand zum sichtbaren Darstellungsbereich befindet. Diese Entfernung variiert je nach Browser, ist aber oft so groß, dass das Bild geladen wird, bevor der Nutzer dorthin scrollt.

Wenn Sie das <picture>-Element verwenden, sollte das Attribut loading weiterhin auf das untergeordnete <img>-Element angewendet werden, nicht auf das <picture>-Element selbst. Das liegt daran, dass das <picture>-Element ein Container ist, der zusätzliche <source>-Elemente enthält, die auf verschiedene Bildkandidaten verweisen. Der vom Browser ausgewählte Kandidat wird direkt auf das untergeordnete <img>-Element angewendet.

Kein Lazy Loading für Bilder im ersten Darstellungsbereich

Sie sollten das loading="lazy"-Attribut nur <img>-Elementen hinzufügen, die sich außerhalb des ursprünglichen Darstellungsbereichs befinden. Es kann jedoch schwierig sein, die genaue Position eines Elements im Viewport zu ermitteln, bevor die Seite gerendert wird. Es müssen unterschiedliche Darstellungsbereiche, Seitenverhältnisse und Geräte berücksichtigt werden.

Ein Desktop-Darstellungsbereich kann sich beispielsweise erheblich von einem Darstellungsbereich auf einem Smartphone unterscheiden, da er mehr vertikalen Platz bietet. Bilder, die im ursprünglichen Darstellungsbereich eines Desktop-Geräts angezeigt werden, sind möglicherweise nicht im ursprünglichen Darstellungsbereich eines physisch kleineren Geräts zu sehen. Auf Tablets im Hochformat ist auch viel vertikaler Platz verfügbar, möglicherweise sogar mehr als auf einigen Desktopgeräten.

Es gibt jedoch einige Fälle, in denen es ziemlich klar ist, dass Sie loading="lazy" nicht anwenden sollten. Das Attribut loading="lazy" sollte beispielsweise bei <img>-Elementen für Hero-Bilder oder andere Anwendungsfälle für Bilder, bei denen <img>-Elemente wahrscheinlich auf allen Geräten über dem Falz oder oben im Layout erscheinen, weggelassen werden. Das ist noch wichtiger für Bilder, die wahrscheinlich LCP-Kandidaten sind.

Bilder, die verzögert geladen werden, müssen warten, bis der Browser das Layout fertiggestellt hat, um festzustellen, ob sich die endgültige Position des Bildes im Viewport befindet. Das bedeutet, dass ein <img>-Element im sichtbaren Bereich mit einem loading="lazy"-Attribut erst nachdem das gesamte CSS heruntergeladen, geparst und auf die Seite angewendet wurde, angefordert wird. Es wird also nicht abgerufen, sobald es vom Preload-Scanner im Roh-Markup erkannt wird.

Da das loading-Attribut für das <img>-Element in allen wichtigen Browsern unterstützt wird, ist kein JavaScript erforderlich, um Bilder verzögert zu laden. Wenn Sie einer Seite zusätzliches JavaScript hinzufügen, um Funktionen bereitzustellen, die der Browser bereits bietet, wirkt sich das auf andere Aspekte der Seitenleistung aus, z. B. auf INP.

Demo für Lazy Loading von Bildern

Lazy Loading von <iframe>-Elementen

Durch das Lazy Loading von <iframe>-Elementen, bis sie im Viewport sichtbar sind, können Sie erhebliche Datenmengen einsparen und das Laden wichtiger Ressourcen verbessern, die für das Laden der Seite der obersten Ebene erforderlich sind. Da <iframe>-Elemente im Grunde vollständige HTML-Dokumente sind, die in ein Dokument der obersten Ebene geladen werden, können sie eine erhebliche Anzahl von untergeordneten Ressourcen enthalten, insbesondere JavaScript. Dies kann sich erheblich auf den INP einer Seite auswirken, wenn die Aufgaben in diesen Frames eine erhebliche Verarbeitungszeit erfordern.

Einbettungen von Drittanbietern sind ein häufiger Anwendungsfall für <iframe>-Elemente. Beispielsweise werden für eingebettete Videoplayer oder Social-Media-Beiträge häufig <iframe>-Elemente verwendet. Diese erfordern oft eine erhebliche Anzahl von untergeordneten Ressourcen, was auch zu Bandbreitenkonflikten für die Ressourcen der Seite der obersten Ebene führen kann. Wenn Sie beispielsweise das Einbetten eines YouTube-Videos verzögert laden, werden beim ersten Laden der Seite mehr als 500 KiB eingespart. Wenn Sie das Facebook-Plugin „Gefällt mir“-Schaltfläche“ verzögert laden, werden mehr als 200 KiB eingespart, die größtenteils aus JavaScript bestehen.

In jedem Fall sollten Sie das Lazy Loading für ein <iframe> unter dem Falz auf einer Seite in Betracht ziehen, wenn es nicht unbedingt sofort geladen werden muss. So lässt sich die Nutzerfreundlichkeit erheblich verbessern.

Das loading-Attribut für <iframe>-Elemente

Das loading-Attribut für <iframe>-Elemente wird auch in allen gängigen Browsern unterstützt. Die Werte für das Attribut loading und ihr Verhalten sind dieselben wie bei <img>-Elementen, die das Attribut loading verwenden:

  • "eager" ist der Standardwert. Der Browser wird dadurch angewiesen, das HTML des <iframe>-Elements und seine Unterressourcen sofort zu laden.
  • Mit "lazy" wird das Laden des HTML-Codes des <iframe>-Elements und seiner untergeordneten Ressourcen aufgeschoben, bis es sich in einem vordefinierten Abstand zum Darstellungsbereich befindet.

Demo für Lazy Loading von iFrames

Fassaden

Anstatt ein eingebettetes Element sofort beim Laden der Seite zu laden, können Sie es bei Bedarf als Reaktion auf eine Nutzerinteraktion laden. Dies kann durch die Anzeige eines Bildes oder eines anderen geeigneten HTML-Elements erfolgen, bis der Nutzer damit interagiert. Sobald der Nutzer mit dem Element interagiert, können Sie es durch die Einbettung des Drittanbieters ersetzen. Diese Technik wird als Fassade bezeichnet.

Ein häufiger Anwendungsfall für Fassaden sind Videoeinbettungen von Drittanbieterdiensten, bei denen neben den Videoinhalten selbst viele zusätzliche und potenziell teure untergeordnete Ressourcen wie JavaScript geladen werden müssen. In diesem Fall müssen Nutzer mit eingebetteten Videos interagieren, bevor die Wiedergabe durch Klicken auf die Wiedergabeschaltfläche gestartet wird – es sei denn, es gibt einen legitimen Grund für die automatische Wiedergabe eines Videos.

Das ist eine gute Gelegenheit, ein statisches Bild zu präsentieren, das dem Video-Embed visuell ähnelt, und dabei viel Bandbreite zu sparen. Sobald der Nutzer auf das Bild klickt, wird es durch das tatsächliche <iframe>-Einbettungselement ersetzt. Dadurch werden das HTML-Element und die untergeordneten Ressourcen des Drittanbieter-<iframe>-Elements heruntergeladen.

Neben der Verbesserung des ersten Seitenaufrufs ist ein weiterer wichtiger Vorteil, dass die für die Bereitstellung des Videos erforderlichen Ressourcen nie heruntergeladen werden, wenn der Nutzer das Video nicht abspielt. Dies ist ein gutes Muster, da der Nutzer nur das herunterlädt, was er wirklich möchte, ohne dass möglicherweise fehlerhafte Annahmen über die Bedürfnisse des Nutzers getroffen werden.

Chat-Widgets sind ein weiteres hervorragendes Beispiel für die Fassadentechnik. Die meisten Chat-Widgets laden große Mengen an JavaScript herunter, was sich negativ auf das Laden der Seite und die Reaktionsfähigkeit auf Nutzereingaben auswirken kann. Wie beim Vorabladen von Inhalten fallen die Kosten beim Laden an. Bei einem Chat-Widget ist es jedoch nicht so, dass jeder Nutzer damit interagieren möchte.

Mit einer Fassade ist es dagegen möglich, die „Chat starten“-Schaltfläche eines Drittanbieters durch eine gefälschte Schaltfläche zu ersetzen. Sobald der Nutzer sinnvoll damit interagiert, z. B. indem er den Mauszeiger für einen angemessenen Zeitraum darauf hält oder darauf klickt, wird das tatsächliche, funktionale Chat-Widget an der entsprechenden Stelle eingefügt.

Es ist zwar möglich, eigene Fassaden zu erstellen, aber für beliebte Drittanbieter wie lite-youtube-embed für YouTube-Videos, lite-vimeo-embed für Vimeo-Videos und React Live Chat Loader für Chat-Widgets sind Open-Source-Optionen verfügbar.

JavaScript-Bibliotheken für Lazy Loading

Wenn Sie <video>-Elemente, <video>-Elementbilder poster, Bilder, die über die CSS-Eigenschaft background-image geladen werden, oder andere nicht unterstützte Elemente verzögert laden müssen, können Sie dies mit einer JavaScript-basierten Lösung für verzögertes Laden wie lazysizes oder yall.js tun, da das verzögerte Laden dieser Arten von Ressourcen keine Browserfunktion ist.

Insbesondere das automatische Abspielen und Wiederholen von <video>-Elementen ohne Audiotrack ist eine viel effizientere Alternative zu animierten GIFs, die oft um ein Vielfaches größer sind als eine Videoressource mit gleichwertiger visueller Qualität. Trotzdem können diese Videos in Bezug auf die Bandbreite erheblich sein. Das Lazy Loading ist also eine zusätzliche Optimierung, die dazu beitragen kann, die verschwendete Bandbreite zu reduzieren.

Die meisten dieser Bibliotheken verwenden die Intersection Observer API und zusätzlich die Mutation Observer API, wenn sich das HTML einer Seite nach dem ersten Laden ändert, um zu erkennen, wann ein Element in den sichtbaren Bereich des Nutzers gelangt. Wenn das Bild sichtbar ist oder sich dem Viewport nähert, ersetzt die JavaScript-Bibliothek das nicht standardmäßige Attribut (oft data-src oder ein ähnliches Attribut) durch das richtige Attribut, z. B. src.

Angenommen, Sie haben ein Video, das ein animiertes GIF ersetzt, möchten es aber mit einer JavaScript-Lösung lazy laden. Mit yall.js ist das möglich. Verwenden Sie dazu das folgende Markup-Muster:

<!-- The autoplay, loop, muted, and playsinline attributes are to
     ensure the video can autoplay without user intervention. -->
<video class="lazy" autoplay loop muted playsinline width="320" height="480">
  <source data-src="video.webm" type="video/webm">
  <source data-src="video.mp4" type="video/mp4">
</video>

Standardmäßig werden mit yall.js alle infrage kommenden HTML-Elemente mit der Klasse "lazy" beobachtet. Sobald yall.js auf der Seite geladen und ausgeführt wurde, wird das Video erst geladen, wenn der Nutzer es in den Darstellungsbereich scrollt. An diesem Punkt werden die data-src-Attribute der untergeordneten <source>-Elemente des <video>-Elements durch src-Attribute ersetzt. Dadurch wird eine Anfrage zum Herunterladen des Videos gesendet und die Wiedergabe beginnt automatisch.

Wissen testen

Welcher Standardwert wird für das Attribut loading für die Elemente <img> und <iframe> verwendet?

"eager"
"lazy"

Wann ist es sinnvoll, JavaScript-basierte Lösungen für Lazy Loading zu verwenden?

Für Ressourcen, in denen das Attribut loading nicht unterstützt wird, z. B. bei automatisch wiedergegebenen Videos, die animierte Bilder ersetzen sollen, oder um das Posterbild eines <video>-Elements verzögert zu laden.
Für jede Ressource, die lazy geladen werden kann.

Wann ist eine Fassade eine nützliche Technik?

Für alle Einbettungen von Drittanbietern, bei denen die zum Laden erforderlichen Ressourcen nicht nur erheblich sind, sondern auch eine gute Wahrscheinlichkeit besteht, dass nicht alle Nutzer mit ihnen interagieren.
Für alle Einbettungen von Drittanbietern, die unabhängig von den Bedürfnissen des Nutzers erhebliche Datenmengen verbrauchen.

Als Nächstes: Prefetching und Pre-Rendering

Nachdem Sie sich mit dem Lazy Loading von Bildern und <iframe>-Elementen vertraut gemacht haben, können Sie dafür sorgen, dass Seiten schneller geladen werden, ohne die Bedürfnisse Ihrer Nutzer zu vernachlässigen. Es gibt jedoch Fälle, in denen das spekulative Laden von Ressourcen wünschenswert sein kann. Im nächsten Modul erfahren Sie mehr über das Vorabrufen und Vorabrendern und wie diese Techniken, wenn sie sorgfältig eingesetzt werden, die Navigation zu nachfolgenden Seiten erheblich beschleunigen können, indem sie vorab geladen werden.