Was ist Lazy Loading?

Nicht jedes Bild auf einer Seite muss gleichzeitig laden. Lazy Loading von Bildern verzögert den Download von Bildern, die im Sichtfeld des Besuchers noch nicht sichtbar sind. Der Browser konzentriert sich so auf Inhalte, die der Besucher wirklich sieht, statt die ganze Seite auf einmal zu laden. Bei Seiten mit vielen Bildern kann allein diese Änderung die anfängliche Ladezeit deutlich verkürzen und die Kennzahlen verbessern, die für Besuchererlebnis und Suchrankings wichtig sind. Dieser Artikel erklärt, was Lazy Loading ist, wie es technisch funktioniert, was du per Lazy Loading laden solltest und was nicht und wie es die Core-Web-Vitals-Werte beeinflusst.

Lädt ein Browser eine Seite ohne Lazy Loading, lädt er jedes Bild auf der Seite herunter, egal ob schon eines davon sichtbar ist. Ein Besucher, der eine Seite öffnet und sofort wieder abspringt, löst trotzdem den Download aller Bilder unterhalb des sichtbaren Bereichs aus. Das ist verschwendete Bandbreite, und es verlangsamt das Laden von allem im sichtbaren Bereich, das der Besucher wirklich sieht. Lazy Loading ändert das, sodass nur der Inhalt heruntergeladen wird, der gerade im Blick ist. Wie das ins grössere Bild der Seitenladegeschwindigkeit passt, erfährst du im Artikel wie du die Ladezeit deiner Website verkürzt.

Was ist Lazy Loading?

Lazy Loading ist eine Technik, die das Laden nicht kritischer Ressourcen aufschiebt, bis sie gebraucht werden. Bei Bildern heisst das: Ein Bild wird erst heruntergeladen, wenn der Besucher in seine Nähe scrollt. Statt beim Laden der Seite jedes Bild anzufordern, fordert der Browser nur die Bilder an, die sichtbar sind oder gleich sichtbar werden, während der Besucher mit der Seite interagiert.

Was Lazy Loading am Ladevorgang ändert

• Ohne Lazy Loading: Der Browser fordert beim ersten Laden der Seite alle Bilder an, egal ob sie im Sichtfeld sind
• Mit Lazy Loading: Der Browser fordert nur Bilder an, die im oder nahe am aktuellen Sichtfeld sind. Die übrigen werden angefordert, während der Besucher auf sie zuscrollt
• Die insgesamt übertragene Datenmenge über ein komplettes Durchscrollen der Seite ist gleich, aber das anfängliche Laden ist deutlich leichter
• Besucher, die nicht über einen bestimmten Punkt der Seite hinaus scrollen, lösen nie den Download von Bildern aus, die sie nie erreichen

Wie funktioniert Lazy Loading technisch?

Für Bilder gibt es zwei Wege, Lazy Loading umzusetzen: das native Browser-Attribut und JavaScript-basierte Lösungen.

Natives Lazy Loading

• Alle gängigen Browser unterstützen natives Lazy Loading über das Attribut loading="lazy" das direkt im Bild-Tag ergänzt wird
• Es sind weder JavaScript noch externe Bibliotheken nötig. Der Browser übernimmt das Ladeverhalten von Haus aus
• Das ist heute der Standardweg für Lazy Loading von Bildern im Web, und die Umsetzung erfordert nur wenig technisches Wissen
• Der Browser entscheidet anhand der Entfernung eines Bildes zum Sichtfeld, wann er es zu laden beginnt, ein Schwellenwert, der zwischen Browsern leicht variiert

JavaScript-basiertes Lazy Loading

• Bevor natives Lazy Loading breit unterstützt wurde, nutzten Entwickler JavaScript-Bibliotheken, die die Scroll-Position beobachteten und das Laden von Bildern auslösten, sobald diese ins Sichtfeld kamen
• Die Intersection Observer API ist der JavaScript-Standardweg. Sie erkennt, wann ein Element ins Sichtfeld kommt oder es verlässt, ohne auf Scroll-Event-Listener angewiesen zu sein
• JavaScript-basiertes Lazy Loading wird weiterhin für komplexere Szenarien genutzt, etwa für Hintergrundbilder, die in CSS gesetzt sind, oder für Videoinhalte
• Für normale Bildelemente ist natives Lazy Loading mit loading="lazy" einfacher und zuverlässiger

Was lässt sich ausser Bildern per Lazy Loading laden?

Iframes

• Das Attribut loading="lazy" funktioniert in allen gängigen Browsern auch bei Iframes
• Eingebettete Karten, Formulare und Inhalte von Drittanbietern in Iframes lassen sich verzögern, bis der Besucher sie erreicht
• Das ist besonders nützlich bei Seiten mit eingebetteten Karten oder Widgets von Drittanbietern im unteren Seitenbereich, da diese oft schwere externe Skripte laden

Video

• Videodateien sind deutlich grösser als Bilder und können die anfängliche Ladezeit stark beeinflussen, wenn sie unterhalb des sichtbaren Bereichs stehen
• Lazy Loading für Video erfordert einen JavaScript-Ansatz, da das native Attribut loading bei Video-Elementen nicht greift
• Ein üblicher Ansatz ist, zunächst nur ein Vorschaubild oder Posterbild zu laden und die Videodatei erst zu laden, wenn der Besucher damit interagiert oder zu ihr scrollt

Komponenten und Abschnitte

• In JavaScript-lastigen Anwendungen können ganze Seitenabschnitte oder Komponenten per Lazy Loading geladen werden, das heisst, ihr Code und Inhalt werden erst abgerufen, wenn der Besucher diesen Teil der Seite erreicht
• Das ist eine fortgeschrittene Technik in komplexen Webanwendungen und wird meist vom Framework übernommen, statt von Hand umgesetzt

Was solltest du nicht per Lazy Loading laden?

Lazy Loading verbessert die Leistung, wenn es richtig eingesetzt wird. An der falschen Stelle angewendet, verursacht es aber Probleme, statt sie zu lösen.

Bilder im sichtbaren Bereich

• Das Hauptbild, das Logo oder jeder auffällige visuelle Inhalt, der beim ersten Öffnen der Seite sichtbar ist, muss sofort laden
• Lazy Loading bei Bildern im sichtbaren Bereich verzögert den LCP, was die Core-Web-Vitals-Werte und das Besuchererlebnis verschlechtert
• Die Regel ist einfach: Alles, was ohne Scrollen sichtbar ist, sollte sofort laden. Alles unterhalb des sichtbaren Bereichs kann per Lazy Loading geladen werden

Bilder nahe am Rand des sichtbaren Bereichs

• Bilder direkt unter dem sichtbaren Bereich können schnell erscheinen, wenn der Besucher zu scrollen beginnt. Wird Lazy Loading zu aggressiv eingesetzt, laden diese Bilder womöglich noch, wenn der Besucher sie erreicht, und ein leerer Platzhalter ist kurz sichtbar
• Natives Lazy Loading löst das mit einem Schwellenwert: Es beginnt, Bilder zu laden, bevor sie ganz im Sichtfeld sind, statt bis zum letzten Moment zu warten

Kritische Inhalte auf schnell ladenden Seiten

• Bei Seiten mit sehr wenig Inhalt und nur wenigen Bildern ist der Ladevorgang ohnehin schnell. Lazy Loading fügt in diesen Fällen Komplexität ohne nennenswerten Nutzen hinzu
• Lazy Loading ist am wertvollsten bei Seiten mit vielen Bildern oder langen scrollbaren Inhalten

Wie beeinflusst Lazy Loading die Core Web Vitals?

Lazy Loading wirkt sich bei richtiger Anwendung direkt auf zwei Core-Web-Vitals-Kennzahlen aus und hat auf die dritte keinen Einfluss.

Largest Contentful Paint (LCP)

• Lazy Loading sollte nie auf das Element angewendet werden, das voraussichtlich der LCP-Kandidat ist, meist das Hauptbild
• Richtig angewendet verringert Lazy Loading die Zahl der Ressourcen, die beim ersten Laden um Bandbreite konkurrieren. Das kann den LCP verbessern, weil der Inhalt im sichtbaren Bereich schneller lädt
• Falsch auf Bilder im sichtbaren Bereich angewendet, verschlechtert Lazy Loading den LCP direkt, weil es das grösste sichtbare Element verzögert

Interaction to Next Paint (INP)

• Weniger anfangs geladene Bilder bedeuten weniger Netzwerkaktivität, die im kritischen Ladefenster mit der JavaScript-Ausführung konkurriert
• Das kann indirekt die Blockierung des Hauptthreads verringern und den INP bei Seiten verbessern, die vorher viele Bilder gleichzeitig geladen haben

Cumulative Layout Shift (CLS)

• Lazy Loading beeinflusst den CLS nicht direkt. Aber Bilder mit Lazy Loading und ohne festgelegte Breiten- und Höhenattribute können beim Laden Layoutverschiebungen verursachen
• Lege für Bilder mit Lazy Loading immer feste Masse fest, damit der Browser vor dem Laden des Bildes den richtigen Platz reserviert

Eine vollständige Aufschlüsselung, wie LCP, INP und CLS bewertet werden und welche Schwellenwerte gelten, findest du im Artikel was Core Web Vitals sind.

Beeinflusst Lazy Loading das SEO?

Richtig umgesetzt schadet Lazy Loading dem SEO nicht und kann durch bessere Geschwindigkeitswerte zu einer besseren Suchleistung beitragen.

Wie Suchmaschinen Inhalte mit Lazy Loading behandeln

• Suchmaschinen-Crawler rendern Seiten ähnlich wie Browser und können Inhalte indexieren, die per Lazy Loading geladen werden
• Bilder mit Lazy Loading lassen sich weiterhin crawlen und können in der Bildersuche erscheinen
• Der SEO-Vorteil entsteht vor allem durch die Geschwindigkeitsverbesserungen, die Lazy Loading ermöglicht. Seiten mit besseren Core-Web-Vitals-Werten, die Lazy Loading verbessern helfen kann, haben einen Ranking-Vorteil

Alt-Text gilt weiterhin

• Bilder mit Lazy Loading brauchen denselben Alt-Text wie jedes andere Bild. Das Alt-Attribut sollte mit einer Beschreibung des Bildes gefüllt sein, egal ob es per Lazy Loading geladen wird
• Tipps zum Schreiben von wirksamem Alt-Text findest du im Artikel wie du Bilder auf deiner Website einsetzt

Wie fügst du deiner Website Lazy Loading hinzu?

Für einzelne Bilder in HTML

• Ergänze loading="lazy" bei jedem Bild-Tag unterhalb des sichtbaren Bereichs
• Stelle sicher, dass jedes Bild mit Lazy Loading feste width und height Attribute hat, um Layoutverschiebungen beim Laden der Bilder zu vermeiden
• Füge loading="lazy" nicht beim Hauptbild oder bei Bildern hinzu, die ohne Scrollen sichtbar sind

Über deine Website-Plattform

• Viele Website-Builder wenden Lazy Loading automatisch auf Bilder unterhalb des sichtbaren Bereichs an, ohne dass du etwas manuell umsetzen musst
• Sieh in der Leistungsdokumentation deiner Plattform nach, ob das automatisch geschieht, bevor du es manuell ergänzt

Eine vollständige Anleitung zur Bildoptimierung über Lazy Loading hinaus, einschliesslich Dateiformaten, Komprimierung und responsiven Grössen, findest du im Artikel wie du Bilder für schnelleres Laden optimierst.

So geht WEMASY mit Lazy Loading um

Der Website-Builder von WEMASY wendet Lazy Loading automatisch auf Bilder unterhalb des sichtbaren Bereichs auf allen Seiten an. Bilder im sichtbaren Bereich, darunter Hauptbilder und alle Inhalte, die ohne Scrollen sichtbar sind, sind vom Lazy Loading ausgenommen, damit sie sofort gerendert werden. Bilder werden ausserdem standardmässig mit festen Massen ausgeliefert, was Layoutverschiebungen verhindert, wenn Bilder mit Lazy Loading an ihre Position laden.

Lazy Loading arbeitet in jedem WEMASY-Tarif zusammen mit Bildkomprimierung und CDN-Auslieferung. Diese drei Verbesserungen zusammen verringern sowohl das anfängliche Seitengewicht als auch die Auslieferungszeit für Bilder, was direkt zu einem schnelleren LCP und besseren Core-Web-Vitals-Werten im Analytics-Dashboard beiträgt.

Sieh dir an, was enthalten ist, beim WEMASY Website-Builder, oder wirf einen Blick auf die Tarife auf der Preisseite.

Häufig gestellte Fragen