Lazy Loading

Lazy Loading verschiebt das Laden von Bildern, Videos und Inhaltsbereichen, bis sie sich dem sichtbaren Viewport nähern. Das verbessert die anfängliche Ladezeit einer Seite.

Related workflow terms: Ganzseiten-Screenshot, Scroll-Screenshot.

So funktioniert Lazy Loading

Ohne Lazy Loading lädt ein Browser beim Einlesen des HTML jede Bild-, Video- und andere Ressource sofort, auch wenn sie weit unterhalb des sichtbaren Bereichs liegt und vielleicht nie betrachtet wird. Auf langen, bildreichen Seiten kostet das Bandbreite und verzögert die Interaktivität.

Lazy Loading wartet, bis sich ein Element dem Viewport nähert. Zwei Verfahren sind verbreitet:

Natives Lazy Loading nutzt loading="lazy" an <img> und <iframe>. Der Browser entscheidet selbst, wann die Ressource nah genug ist, und benötigt dafür kein JavaScript.

Die Intersection Observer API bietet programmatische Kontrolle. JavaScript beobachtet Elemente und ruft eine Funktion auf, sobald sie den Viewport erreichen. Diese setzt etwa die echte src-Adresse anstelle eines Platzhalters. Schwellenwerte und Animationen lassen sich dabei gezielt steuern.

Beide Ansätze laden zunächst nur Inhalte oberhalb der Scrollgrenze; weitere Ressourcen folgen beim Scrollen.

Lazy Loading und Screenshots

Bei einer Ganzseiten-Aufnahme rendert ein Werkzeug häufig den oberen Viewport und erfasst die gesamte Dokumenthöhe in einem Schritt. Elemente unterhalb der Scrollgrenze wurden dabei noch nicht ausgelöst und erscheinen leer, als Platzhalter oder unscharfe Vorschau.

Die Seite muss deshalb vor der Aufnahme programmatisch gescrollt werden. Ein Headless-Skript bewegt sich schrittweise von oben nach unten und wartet jeweils auf Observer und Bildabrufe. Am Ende springt es zurück nach oben und nimmt die nun vollständig geladene Seite auf.

Einige Screenshot-Tools übernehmen diesen Ablauf automatisch und erzeugen so ohne manuelles Eingreifen vollständige Bilder.

Verzögert geladene Inhalte erkennen

• loading="lazy" an Bildern oder iFrames kennzeichnet die native Browserfunktion.
• data-src oder data-lazy: Die echte Bildadresse liegt in einem Datenattribut und wird per JavaScript nach src kopiert.
• Platzhalter: Kleine, verschwommene oder einfarbige Bilder werden beim Scrollen ersetzt.
• Intersection Observer: Im JavaScript werden IntersectionObserver-Instanzen für Bild- oder Inhaltselemente verwendet.
• Framework-Komponenten: React lazy(), Next.js Image und ähnliche Hilfen können Lazy Loading standardmäßig aktivieren.

Häufige Fehler

• Vor der Aufnahme nicht scrollen. Dann fehlen Bilder unterhalb der Scrollgrenze.
• Zu spät laden. Wird erst ausgelöst, wenn das Element schon sichtbar ist, sehen Nutzer kurz eine leere Fläche. Lade etwas vor Eintritt in den Viewport.
• Inhalte oberhalb der Scrollgrenze verzögern. Das verschlechtert den ersten Eindruck und Largest Contentful Paint. Nur weiter unten liegende Ressourcen sollten warten.
• Fallbacks ohne JavaScript vergessen. Verwende <noscript> oder natives Lazy Loading, damit Inhalte auch ohne JavaScript sichtbar bleiben.