Lazy Loading

Lazy Loading ist eine Webtechnik, die Ressourcen außerhalb des sichtbaren Bereichs erst dann lädt, wenn sie kurz davor sind, in den Viewport zu gelangen. Sie wird für Bilder, iframes, Videos und ganze Seitenabschnitte eingesetzt.

Browser unterstützen Lazy Loading nativ über das loading-Attribut von img- und iframe-Elementen, das auf lazy gesetzt wird und im HTML Living Standard definiert ist. Websites setzen Lazy Loading auch mit JavaScript um, meist mit der IntersectionObserver-API, die meldet, wenn sich ein Element dem sichtbaren Bereich nähert.

Bis eine Ressource geladen ist, zeigt die Seite einen Platzhalter: ein leeres Feld, eine einfarbige Fläche, eine unscharfe Vorschau oder einen Ladeindikator. Lazy Loading verringert das anfängliche Seitengewicht und beschleunigt die erste Anzeige.

So funktioniert Lazy Loading

1. Die Seite lädt mit Platzhaltern für Bilder außerhalb des sichtbaren Bereichs.
2. Der Browser oder ein Skript beobachtet die Position jedes Platzhalters.
3. Scrollt der Nutzer in die Nähe, wird die eigentliche Datei angefordert.
4. Sobald die Datei eintrifft, ersetzt das Bild den Platzhalter.

Infinite Scroll wendet dasselbe Prinzip auf Inhalte an: Neue Einträge werden abgerufen, wenn der Nutzer das Ende der Liste erreicht.

Lazy Loading und Screenshots

Eine ganzseitige Aufnahme, die die gesamte Seite auf einmal rendert, scrollt nicht. Nachgeladene Inhalte unterhalb des sichtbaren Bereichs werden daher womöglich nie angefordert. Das Ergebnis zeigt leere Felder oder unscharfe Vorschauen. Eine Viewport-Aufnahme ist weniger betroffen, weil sie nur den sichtbaren Bereich zeigt.

Nachgeladene Inhalte erkennen

• Achten Sie im unteren Teil einer ganzseitigen Aufnahme auf leere oder graue Felder.
• Scrollen Sie die Seite von Hand und beobachten Sie, ob Bilder eingeblendet werden.
• Prüfen Sie Bildelemente in den Browser-DevTools auf das loading-Attribut oder Platzhalterquellen.
• Vergleichen Sie eine schnelle Aufnahme mit einer Aufnahme nach einer Verzögerung.

Wählen Sie in Temposhot unter Website Capture für die Einstellung Wait die Option Network idle, oder fügen Sie eine Verzögerung von 0-60 Sekunden hinzu. Die Temposhot-Erweiterung Full Page Screenshot scrollt die aktive Seite während der Aufnahme und löst so scrollbasiertes Nachladen aus.

Häufige Fehler

• Beim load-Ereignis aufnehmen und annehmen, die Seite sei vollständig.
• Eine lange Verzögerung ohne Scrollen festlegen, was bei scrollausgelösten Bildern nicht hilft.
• Seiten mit Infinite Scroll als „ganze Seite“ aufnehmen, was nie sauber endet.
• Unscharfe Platzhalterbilder übersehen, die in kleiner Darstellung geladen wirken.

Immer wieder dieselben Screenshots?

Legen Sie die Wartebedingung einmal fest und verwenden Sie sie bei der Website-Screenshot-Automatisierung für jede URL.

Häufige Fragen

Hilft eine längere Verzögerung bei nachgeladenen Bildern?

Sie hilft, wenn Inhalte per Timer oder nach Netzwerkaktivität geladen werden. Scrollausgelöste Inhalte erfordern Scrollen.

Sollte ich auf meiner eigenen Website auf Lazy Loading verzichten?

Nein. Lazy Loading verbessert die Geschwindigkeit. Laden Sie Bilder im sofort sichtbaren Bereich ohne Verzögerung (eager), damit sie direkt erscheinen.

Quellen

• Lazy loading (Wikipedia)
• HTML Living Standard: URLs and fetching

Weiterführende Ressourcen

• Optionen von Website Capture: Warte- und Verzögerungseinstellungen.
• Ganzseitiger Screenshot: die gesamte Seitenhöhe aufnehmen.