Lazy Loading

Wer Webseiten mit vielen Bildern oder eingebetteten Medien betreibt, kennt das Problem: Lange Ladezeiten frustrieren Nutzer und schaden dem Ranking. Lazy Loading löst dieses Problem, indem Inhalte erst auf Abruf geladen werden – nicht alle auf einmal beim ersten Seitenaufruf.

Für SEO ist diese Technik längst kein optionaler Komfort mehr, sondern ein messbarer Rankingfaktor, der direkt in die Core Web Vitals einzahlt. HEEY erklärt, wie Lazy Loading funktioniert, worauf es bei der Implementierung ankommt und welche Fehler Sie unbedingt vermeiden sollten.

Funktionsweise: Wie Lazy Loading technisch arbeitet

Ohne Lazy Loading lädt ein Browser beim Seitenaufruf sämtliche Ressourcen – also alle Bilder, Videos und iFrames – gleichzeitig, unabhängig davon, ob sie im sichtbaren Viewport liegen oder erst nach langem Scrollen erscheinen. Lazy Loading unterbricht dieses Verhalten gezielt: Ressourcen außerhalb des Viewports erhalten zunächst nur einen Platzhalter. Erst wenn der Nutzer scrollt und das Element in den sichtbaren Bereich gelangt, wird die eigentliche Ressource geladen.

Technisch lässt sich Lazy Loading auf zwei Wegen umsetzen. Die moderne, native Methode nutzt das HTML-Attribut loading="lazy", das seit 2019 in allen gängigen Browsern unterstützt wird und keinerlei JavaScript erfordert. Die ältere Methode basiert auf JavaScript-Bibliotheken wie Intersection Observer API, die präzisere Steuerung und Fallbacks für ältere Browser ermöglichen. Beide Ansätze können kombiniert werden, um maximale Browserkompatibilität sicherzustellen.

Für Videos und iFrames – etwa eingebettete YouTube-Videos – empfiehlt sich zusätzlich die Facade-Technik: Statt des vollständigen iFrames wird zunächst nur ein statisches Vorschaubild geladen. Das eigentliche Video-Element wird erst nach einem Klick des Nutzers initialisiert. Dies reduziert die Anzahl der HTTP-Requests und die übertragene Datenmenge erheblich.

Lazy Loading und Core Web Vitals: Der direkte SEO-Zusammenhang

Google bewertet seit dem Page Experience Update die Ladeperformance einer Seite anhand der Core Web Vitals. Lazy Loading beeinflusst dabei vor allem zwei Metriken direkt: den Largest Contentful Paint (LCP) und den Total Blocking Time (TBT). Wenn große Bilder oder Videos nicht mehr beim ersten Laden übertragen werden müssen, sinkt der LCP-Wert – also die Zeit bis zum Rendern des größten sichtbaren Inhaltselements.

Allerdings gilt eine wichtige Einschränkung: Das Hero-Image oder das größte Element im Above-the-Fold-Bereich darf niemals mit Lazy Loading versehen werden. Wer das LCP-Element mit loading="lazy" markiert, verschlechtert den LCP-Wert aktiv, weil der Browser dieses Bild bewusst verzögert lädt. Für alle sichtbaren Elemente im initialen Viewport sollte stattdessen loading="eager" oder kein Loading-Attribut gesetzt werden.

Korrekt eingesetzt verbessert Lazy Loading außerdem den Cumulative Layout Shift (CLS), sofern Platzhalter mit definierten Dimensionen (width und height) verwendet werden. Ohne diese Dimensionsangaben springen Layoutelemente beim Nachladen, was den CLS-Wert verschlechtert und Nutzer irritiert.

Relevanz für lokale Unternehmen im Rhein-Main-Gebiet

Für Unternehmen in Wiesbaden, Frankfurt, Mainz oder Darmstadt ist Lazy Loading besonders relevant, weil ein Großteil der lokalen Suchanfragen mobil erfolgt. Mobile Nutzer sind häufiger in Netzen mit schwankender Verbindungsqualität unterwegs – LTE-Ausfälle in der Innenstadt oder schwaches WLAN in Gewerbeparks sind Alltag. Eine schlecht optimierte Unternehmenswebseite verliert hier Besucher, noch bevor diese das Angebot gesehen haben.

Lokale Landingpages, die für Stadtteile oder Regionen im Rhein-Main-Gebiet erstellt werden, enthalten oft viele Bilder – Teamfotos, Ladenansichten, Referenzprojekte. Ohne Lazy Loading summieren sich diese Ressourcen zu langen Ladezeiten, die direkt die Bounce Rate erhöhen und das lokale Ranking in Google Maps und der organischen Suche beeinträchtigen. HEEY empfiehlt daher, Lazy Loading als festen Bestandteil jeder lokalen OnPage-Optimierung zu behandeln.

Ein weiterer Aspekt: Google Business Profile verlinken direkt auf die Unternehmenswebseite. Wenn ein potenzieller Kunde aus dem Local Pack auf die Webseite klickt und diese langsam lädt, ist der erste Eindruck negativ – ein Effekt, der sich in niedrigen Conversion Rates niederschlägt. Schnelle Seiten durch Lazy Loading sind damit auch ein lokales Wettbewerbsvorteil.

Abgrenzung: Lazy Loading vs. verwandte Techniken

Lazy Loading wird häufig mit anderen Performance-Techniken verwechselt oder gleichgesetzt. Eine klare Abgrenzung hilft, die richtige Maßnahme für den jeweiligen Anwendungsfall zu wählen.

• Lazy Loading vs. Preloading: Preloading weist den Browser an, bestimmte Ressourcen mit hoher Priorität vorab zu laden – also das genaue Gegenteil. Preloading eignet sich für kritische Ressourcen wie Schriften oder das LCP-Bild; Lazy Loading für alles außerhalb des initialen Viewports.
• Lazy Loading vs. Caching: Caching speichert bereits geladene Ressourcen lokal, um Folgeaufrufe zu beschleunigen. Lazy Loading reduziert hingegen, was beim ersten Aufruf überhaupt geladen wird. Beide Techniken ergänzen sich.
• Lazy Loading vs. Render Blocking: Render-blockierende Ressourcen (CSS, JavaScript) verhindern das Rendern der Seite, bis sie vollständig geladen sind. Lazy Loading betrifft primär Medienressourcen, nicht den kritischen Rendering-Pfad.
• Lazy Loading vs. Infinite Scroll: Infinite Scroll ist ein UX-Muster, das neue Inhalte beim Scrollen nachlädt. Es nutzt technisch ähnliche Mechanismen wie Lazy Loading, verfolgt aber ein anderes Ziel – nämlich die Erweiterung des Inhalts statt die Reduzierung initialer Ladezeiten.
• Lazy Loading vs. Komprimierung: Bildkomprimierung (WebP, AVIF) reduziert die Dateigröße einer Ressource. Lazy Loading steuert den Ladezeitpunkt. Beide Maßnahmen sind unabhängig voneinander und sollten kombiniert werden.

Implementierung: Konkrete Maßnahmen und Vorgehen

Die einfachste Implementierung für Bilder erfolgt durch das native HTML-Attribut: <img src="bild.jpg" loading="lazy" width="800" height="600" alt="Beschreibung">. Die Angaben zu width und height sind dabei nicht optional – sie verhindern Layout-Verschiebungen und schützen den CLS-Wert. Das Alt-Attribut bleibt aus SEO-Sicht ohnehin Pflicht.

Für WordPress-Seiten ist natives Lazy Loading seit Version 5.5 standardmäßig aktiviert. Dennoch lohnt ein Blick in die tatsächliche Ausgabe des HTML-Codes, da einige Themes oder Page Builder das Attribut überschreiben oder inkonsistent setzen. Tools wie Google PageSpeed Insights oder die Chrome DevTools (Netzwerk-Tab) zeigen, welche Ressourcen beim Seitenaufruf tatsächlich geladen werden und welche verzögert nachgeladen werden.

Für komplexere Anwendungsfälle – etwa JavaScript-basierte Single Page Applications oder Inhalte, die dynamisch per API nachgeladen werden – empfiehlt HEEY die Verwendung der Intersection Observer API. Diese ermöglicht eine granulare Steuerung, ab welchem Abstand zum Viewport das Laden ausgelöst wird (sogenannter Rootmargin-Parameter), sodass Bilder bereits kurz vor dem Einblenden geladen werden und kein weißes Flackern entsteht.

Typische Fehler und Best Practices

In der Praxis begegnet HEEY immer wieder denselben Implementierungsfehlern, die den SEO-Nutzen von Lazy Loading zunichtemachen oder sogar negative Effekte erzeugen.

• Lazy Loading auf das LCP-Element anwenden: Das größte sichtbare Element im Viewport darf nicht verzögert geladen werden. Stattdessen sollte es mit fetchpriority="high" priorisiert werden.
• Fehlende Dimensionsangaben: Bilder ohne width- und height-Attribut verursachen Layout-Verschiebungen beim Nachladen und verschlechtern den CLS-Wert.
• JavaScript-basiertes Lazy Loading ohne Fallback: Wenn JavaScript deaktiviert ist oder langsam lädt, bleiben Bilder unsichtbar. Ein natives loading="lazy" als Fallback ist daher empfehlenswert.
• Lazy Loading auf alle Bilder anwenden: Above-the-Fold-Bilder sollten niemals lazy geladen werden. Eine differenzierte Implementierung ist zwingend erforderlich.
• Googlebot und Crawlbarkeit vernachlässigen: Der Googlebot rendert JavaScript, kann aber nicht scrollen. Inhalte, die ausschließlich per JavaScript-Lazy-Loading sichtbar werden und kein natives Attribut nutzen, riskieren, nicht indexiert zu werden.
• Keine Erfolgsmessung: Lazy Loading sollte vor und nach der Implementierung mit PageSpeed Insights und der Google Search Console gemessen werden, um den tatsächlichen Effekt auf LCP, CLS und Pagespeed-Score zu dokumentieren.

Best Practice ist eine kombinierte Strategie: natives loading="lazy" für alle Bilder unterhalb des Folds, fetchpriority="high" für das LCP-Bild, korrekte Dimensionsangaben für alle Medienelemente und regelmäßige Überprüfung der Core Web Vitals in der Google Search Console.

Lazy Loading im Kontext moderner SEO-Strategien

Lazy Loading ist kein isoliertes technisches Detail, sondern Teil einer umfassenden Technical-SEO-Strategie. Es wirkt zusammen mit Maßnahmen wie Bildkomprimierung, Server Response Time-Optimierung, Browser-Caching und der Reduzierung render-blockierender Ressourcen. Wer nur eine dieser Stellschrauben dreht, wird die Core Web Vitals selten auf ein grünes Niveau heben – es braucht das Zusammenspiel aller Faktoren.

Mit dem zunehmenden Anteil von KI-generierten Suchergebnissen (AI Overviews, SGE) gewinnt die technische Qualität einer Seite weiter an Bedeutung: Langsame Seiten werden seltener als Quellen herangezogen. Lazy Loading ist damit auch ein indirekter Faktor für die Sichtbarkeit in generativen Suchumgebungen. HEEY integriert Lazy-Loading-Analysen daher standardmäßig in jeden technischen SEO-Audit.