Was ist Lazy Loading?

Lazy Loading ist eine Technik, die das Laden nicht-kritischer Ressourcen verzögert, bis sie tatsächlich benötigt werden. Anstatt jedes Bild, jeden iframe und jedes Video auf einer Seite sofort beim Parsen des HTML herunterzuladen, wartet der Browser, bis diese Elemente in den sichtbaren Bereich gescrollt werden. Das bedeutet, dass der initiale Seitenaufbau schneller und leichter ist, weil der Browser seine Bandbreite auf das konzentriert, was der Besucher zuerst sieht.

Wie Lazy Loading technisch funktioniert

Es gibt zwei Hauptansätze zur Implementierung von Lazy Loading. Der erste ist der native Browser-Ansatz, der auf dem HTML-Attribut loading="lazy" basiert. Wenn der Browser ein Element mit diesem Attribut findet, verzögert er das Abrufen der Ressource, bis das Element eine berechnete Entfernung zum Viewport erreicht. Jeder Browser bestimmt diesen Schwellenwert etwas anders, aber das Ziel ist dasselbe: den Download kurz bevor der Nutzer dorthin scrollt starten, damit der Inhalt nahtlos erscheint.

Der zweite Ansatz verwendet JavaScript, typischerweise über die Intersection Observer API. Ein kleines Skript beobachtet die Seite und erkennt, wann Platzhalter-Elemente in den Viewport gelangen. Sobald das passiert, tauscht das Skript die tatsächliche Bildquelle oder iframe-URL ein und löst den Download aus. Bevor die Intersection Observer API existierte, mussten Entwickler auf Scroll-Event-Listener zurückgreifen, die weniger effizient waren und auf langsameren Geräten Ruckler verursachen konnten.

Was kann lazy geladen werden

Lazy Loading kann auf verschiedene Ressourcentypen angewendet werden:

• Bilder: Der häufigste Anwendungsfall. Jedes <img>-Tag unterhalb des sichtbaren Bereichs ist ein guter Kandidat.
• Iframes: Eingebettete YouTube-Videos, Google Maps und andere Drittanbieter-Widgets können ressourcenintensiv sein. Lazy Loading von iframes verhindert, dass sie den initialen Seitenaufbau blockieren.
• Videos: Selbst gehostete Videos mit dem <video>-Tag können preload="none" oder JavaScript-basiertes Lazy Loading verwenden.
• Hintergrundbilder: CSS-Hintergrundbilder über background-image können das native loading-Attribut nicht nutzen und erfordern JavaScript-Lösungen.

Natives Browser Lazy Loading vs JavaScript-Bibliotheken

Natives Lazy Loading ist die einfachste Option. Du fügst loading="lazy" zu deinem <img>- oder <iframe>-Tag hinzu und der Browser erledigt alles. Kein JavaScript nötig, keine zusätzliche Dateigröße, keine Konfiguration. Es funktioniert in allen modernen Browsern, einschließlich Chrome, Firefox, Safari und Edge.

<img src="foto.jpg" loading="lazy" width="800" height="600" alt="Beschreibung" />
<iframe src="https://www.youtube.com/embed/xyz" loading="lazy"></iframe>

JavaScript-Bibliotheken wie lazysizes, lozad.js oder vanilla-lazyload bieten mehr Kontrolle. Sie unterstützen Hintergrundbilder, können Einblend-Animationen hinzufügen und lassen dich den Lade-Schwellenwert anpassen. Allerdings fügen sie zusätzliches JavaScript zu deiner Seite hinzu. Für die meisten WordPress-Seiten ist natives Lazy Loading die bessere Wahl wegen seiner Einfachheit und null Performance-Overhead.

WordPress und natives Lazy Loading seit Version 5.5

WordPress fügt seit Version 5.5 (August 2020) automatisch loading="lazy" zu Bildern hinzu. Das gilt für Bilder in Beitragsinhalten, Beitragsbilder und andere Bilder, die über Core-Funktionen ausgegeben werden. WordPress fügt auch loading="lazy" zu in Inhalte eingebetteten iframes hinzu. Seit WordPress 5.9 wird das erste Bild im Inhalt (das am wahrscheinlichsten above-the-fold ist) automatisch vom Lazy Loading ausgenommen, um die LCP-Werte nicht zu verschlechtern.

Auswirkungen auf Core Web Vitals und LCP-Überlegungen

Lazy Loading hat eine direkte Beziehung zu Core Web Vitals, insbesondere zum Largest Contentful Paint (LCP). Wenn es korrekt eingesetzt wird, verbessert Lazy Loading den LCP, weil der Browser das Herunterladen des größten sichtbaren Elements priorisieren kann, ohne mit Below-the-Fold-Bildern um Bandbreite zu konkurrieren. Wenn du jedoch versehentlich das LCP-Element selbst lazy lädst (oft das Hero-Bild oder ein großes Above-the-Fold-Banner), verschlechterst du den LCP. Der Browser wartet dann mit dem Abruf dieses Bildes, bis er die Viewport-Nähe berechnet hat, was unnötige Verzögerung hinzufügt.

Für Bilder, die nicht lazy geladen werden, aber kritisch sind, füge fetchpriority="high" hinzu:

<img src="hero.jpg" fetchpriority="high" width="1200" height="600" alt="Hero-Banner" />

Wann man NICHT lazy laden sollte

Nicht jedes Bild sollte lazy geladen werden. Es gibt klare Ausnahmen:

• Hero-Bilder: Das Hauptbanner oder Beitragsbild, das sofort beim Seitenaufbau erscheint, sollte niemals lazy geladen werden.
• Logo und Site-Identity-Bilder: Diese befinden sich typischerweise im Header und sind ohne Scrollen sichtbar.
• Erstes sichtbares Inhaltsbild: Jedes Bild, das im initialen Viewport erscheint, sollte eager geladen werden.
• LCP-Kandidaten: Wenn ein Bild das größte sichtbare Element beim ersten Rendern der Seite ist, verschlechtert Lazy Loading direkt deinen LCP-Wert.

Für diese Bilder verwende loading="eager" (das Standardverhalten) oder füge explizit fetchpriority="high" hinzu.

WordPress-Plugins für Lazy Loading

Während WordPress grundlegendes Lazy Loading nativ handhabt, bieten mehrere Plugins erweiterte Funktionalität:

• WP Rocket: Beinhaltet Lazy Loading für Bilder, iframes und Videos als Teil seiner umfassenden Performance-Optimierung. Es kann auch YouTube-Video-Einbettungen durch ein leichtgewichtiges Thumbnail ersetzen, das den eigentlichen Player erst bei Klick lädt.
• Autoptimize: Primär ein CSS/JS-Optimierungs-Plugin, enthält aber Lazy Loading für Bilder über das native Attribut oder einen JavaScript-Fallback.
• a3 Lazy Load: Ein dediziertes Lazy-Loading-Plugin mit granularer Kontrolle darüber, welche Elemente lazy geladen werden, einschließlich Unterstützung für Hintergrundbilder.
• Perfmatters: Ein leichtgewichtiges Performance-Plugin mit Lazy Loading neben anderen Optimierungen wie Script-Management und Datenbankbereinigung.

Lazy Loading und SEO

Googles Crawler (Googlebot) rendert JavaScript, kann also lazy-geladene Bilder sehen, solange sie beim Rendering letztendlich geladen werden. Allerdings bedeutet JavaScript-basiertes Lazy Loading, dass Googlebot deine Skripte ausführen muss, um die Bilder zu entdecken. Natives Lazy Loading mit loading="lazy" ist SEO-sicherer, weil das tatsächliche src-Attribut von Anfang an im HTML vorhanden ist. Suchmaschinen können die Bild-URL finden, ohne JavaScript auszuführen. Stelle immer sicher, dass deine Bilder korrekte alt-Attribute haben, unabhängig von der Lazy-Loading-Methode.

Was InspectWP prüft

InspectWP analysiert die Bilder auf deiner Seite und meldet, ob das loading="lazy"-Attribut bei jedem Bild vorhanden ist. So kannst du überprüfen, ob Lazy Loading auf deiner WordPress-Seite korrekt implementiert ist, und Bilder identifizieren, denen das Attribut fehlt oder die fälschlicherweise lazy geladen werden, obwohl sie eager geladen werden sollten.