Lazy Loading verschiebt eine nicht kritische Ressource, bis sie benötigt wird. So sinkt der Aufwand beim ersten Laden, sofern aufgeschobene Inhalte weiterhin auffindbar, nutzbar und für Crawler verfügbar bleiben.
Festlegen, was warten darf
Lazy Loading eignet sich für Inhalte deutlich unterhalb des ersten sichtbaren Bereichs, etwa Bilder in der unteren Galerie, Einbettungen oder Vorschaubilder langer Listen. Als Standard ist es für ein Hero-Bild, ein Produktbild, das der Käufer sofort braucht, das LCP-Element oder eine Komponente, die für die Tastaturnavigation nötig ist, ungeeignet. Wer eine Ressource im ersten sichtbaren Bereich aufschiebt, verzögert genau den Moment, ab dem die Seite nützlich wird.
Erfassen Sie den ersten sichtbaren Bereich bei üblichen Breiten für Mobil- und Desktop-Geräte. Ermitteln Sie den wahrscheinlichen LCP-Kandidaten, bevor Sie Ladeattribute hinzufügen. Verwenden Sie explizite width- und height-Angaben oder ein gleichwertiges reserviertes Seitenverhältnis, damit Bilder beim Eintreffen den Text nicht verschieben.
Robustes Markup verwenden
Für gewöhnliche Bilder reicht oft das native loading="lazy" des Browsers. Behalten Sie bei informativen Medien einen aussagekräftigen alt-Wert bei, bei dekorativen Bildern nur einen leeren alt-Wert, und eine echte Bildquelle, die ohne Skript zum Auslösen beim Scrollen verfügbar bleibt. Für responsive Bilder geben Sie passende srcset- und sizes-Angaben an, damit der Browser standardmäßig keine übergroße Datei lädt.
Platzieren Sie wesentliche Links, Überschriften oder Produktinformationen nicht nur in einer clientseitigen Lazy-Komponente. Ein Crawler und ein Nutzer, dessen Skript nicht erfolgreich läuft, sollten die Kerninhalte der Seite trotzdem finden. Intersection Observer können für Spezial-Widgets nützlich sein, bringen aber zusätzliche Fehlerquellen mit, die natives Markup vermeidet.
Die Viewport-Grenze testen
Testen Sie mit einem gedrosselten Mobiltest und einem normalen Browser-Ladevorgang. Prüfen Sie, ob das Hauptbild zügig startet, ob Medien unterhalb des sichtbaren Bereichs aufgeschoben werden und ob beim Scrollen jede Ressource erscheint, ohne leere Platzhalter oder Layoutverschiebungen. Prüfen Sie DOM und Netzwerk-Wasserfall: Ein Bild mit lazy-Attribut, das sofort geladen wird, liegt vermutlich nahe am Viewport. Ein Bild, das zu spät kommt, wurde möglicherweise zu aggressiv aufgeschoben.
Bei einem Artikel, dessen Diagramm nach der Einleitung folgt, kann Lazy Loading sinnvoll sein, wenn das Diagramm nicht das LCP-Element ist und seine Abmessungen reserviert sind. Auf einer Produktseite ist das zentrale Produktbild in der Regel ein schlechter Kandidat, weil es für die erste Kaufentscheidung entscheidend ist.
Grenzen und Verifizierung
Eine geringere Zahl initialer Anfragen beweist für sich genommen keine schnellere oder bessere Seite. Messen Sie die Antwortzeit des Dokuments, LCP, Layoutstabilität und Interaktion getrennt. Prüfen Sie nach Template-Änderungen erneut das HTML nach dem Rendering und eine Crawler-Stichprobe, damit aufgeschobene Medien weiterhin ihren vorgesehenen alt-Text, den Kontext der kanonischen Seite und ihre internen Links haben.