Lazy Loading
Was ist Lazy Loading?
Lazy Loading bezeichnet das verzögerte Laden von Bildern, Videos, Iframes oder anderen Ressourcen. Der Browser ruft ein Element erst ab, wenn es sich dem sichtbaren Bereich nähert. Dadurch sinken die anfänglich übertragene Datenmenge und die Zahl früher Netzwerkanfragen, was den Seitenaufbau besonders bei umfangreichen Webseiten beschleunigen kann.
Lazy Loading, auf Deutsch verzögertes Laden, priorisiert die Inhalte, die ein Nutzer beim Seitenaufruf tatsächlich benötigt. Ressourcen weiter unten auf der Seite werden zurückgestellt, bis der Nutzer in ihre Nähe scrollt. Das Verfahren eignet sich besonders für lange Ratgeber, Bildergalerien, Kategorieseiten und Onlineshops mit vielen Produktbildern.
Wie funktioniert Lazy Loading?
Beim klassischen Laden fordert der Browser grundsätzlich alle im HTML referenzierten Ressourcen an, auch wenn viele davon zunächst außerhalb des sichtbaren Bereichs liegen. Lazy Loading verändert diese Reihenfolge: Sichtbare Inhalte werden früh geladen, weiter entfernte Bilder oder Iframes folgen bedarfsgerecht. Der Browser kann dadurch Bandbreite, Rechenleistung und Netzwerkverbindungen zunächst für den Seitenanfang verwenden.
Für Bilder und Iframes lässt sich natives Lazy Loading direkt über das HTML-Attribut loading="lazy" aktivieren. Ein Bild kann beispielsweise so eingebunden werden:
<img src="produktbild.webp" loading="lazy" width="800" height="600" alt="Produktansicht"> weist den Browser an, das Bild verzögert zu laden. Die Attribute width und height reservieren zugleich den benötigten Platz und verringern Layoutverschiebungen während des Ladens. Der Browser entscheidet selbst, wie weit ein Element vom sichtbaren Bereich entfernt sein darf, bevor der Download beginnt. Das Bild wird deshalb meist bereits kurz vor dem Hineinscrollen angefordert. Der genaue Abstand hängt unter anderem vom Browser, der Verbindung und dem Gerät ab. Lazy Loading bedeutet daher nicht, dass eine Ressource erst geladen wird, nachdem sie sichtbar geworden ist.
Lazy Loading und PageSpeed 2026
Lazy Loading verbessert den PageSpeed vor allem dann, wenn eine Seite zahlreiche große Bilder oder eingebettete Inhalte unterhalb des ersten Bildschirmbereichs enthält. Werden beispielsweise 20 Produktbilder erst beim Scrollen abgerufen, muss der Browser beim Einstieg weniger Dateien verarbeiten. Die tatsächliche Wirkung hängt jedoch von Dateigröße, Bildformat, Serverantwortzeit, Caching und der übrigen Seitentechnik ab.
Lazy Loading allein macht eine Website nicht schnell. Ein Bild mit mehr als 1 MB bleibt auch bei verzögertem Abruf eine große Datei und verursacht Datenverkehr, sobald der Nutzer den betreffenden Bereich erreicht. Bildkompression, passende Abmessungen, moderne Formate und responsive Bildvarianten gehören deshalb weiterhin zur technischen Optimierung. Der OSG Technik-Crawler behandelt Bilder über 1 MB als eigenen Prüfpunkt und empfiehlt Lazy Loading ergänzend zu Kompression und responsiven Bildern.
Messbar ist Lazy Loading zum Beispiel so: Vergleiche in den Entwicklertools des Browsers die Netzwerkanfragen direkt nach dem Seitenaufruf mit den Anfragen nach dem Scrollen. Ergänzend zeigt der kostenlose Ladezeiten-Check die Ladezeit in Sekunden, die PageSpeed-Auswertung und konkrete technische Handlungsempfehlungen.
Prüfe die Ladezeit deiner Seite direkt im Artikel:
Auswirkungen auf die Core Web Vitals
Lazy Loading kann den Largest Contentful Paint, kurz LCP, verbessern oder verschlechtern. LCP misst, wann das größte sichtbare Inhaltselement im ersten Bildschirmbereich dargestellt wird. Befindet sich dort ein großes Titelbild, darf dieses Bild in der Regel nicht verzögert geladen werden. Ein Lazy-Loading-Attribut am LCP-Bild kann den wichtigsten sichtbaren Inhalt unnötig zurückstellen.
Beim Cumulative Layout Shift, kurz CLS, zählt die visuelle Stabilität. Fehlen bei verzögert geladenen Bildern feste Breiten und Höhen, kennt der Browser den benötigten Platz zunächst nicht. Nach dem Download verschieben sich Texte, Buttons oder Produktinformationen. Trage deshalb bei jedem Bild width und height ein oder reserviere das Seitenverhältnis per CSS.
Lazy Loading, Eager Loading und Preload
Der Unterschied zwischen Lazy Loading, Eager Loading und Preload liegt in der Ladepriorität. Lazy Loading verschiebt den Abruf, Eager Loading fordert eine Ressource früh an und Preload weist den Browser ausdrücklich auf eine besonders wichtige Datei hin. Die drei Verfahren erfüllen unterschiedliche Aufgaben und sollten nach der Position sowie der Bedeutung einer Ressource ausgewählt werden.
| Verfahren | Funktionsweise | Typischer Einsatz |
|---|---|---|
| Lazy Loading | Ressource wird erst in der Nähe des sichtbaren Bereichs geladen. | Bilder, Videos und Iframes weiter unten auf der Seite |
| Eager Loading | Ressource wird früh und ohne Verzögerung angefordert. | Logo, Titelbild und sichtbare Produktbilder |
| Preload | Der Browser erhält einen ausdrücklichen Hinweis auf eine priorisierte Ressource. | Wichtige Schriftart oder zentrales LCP-Bild |
Preload ist kein Ersatz für Lazy Loading. Ein Preload für jedes Bild erhöht die Zahl früher Anfragen und nimmt weniger wichtigen Dateien ihre Priorität. Verwende Preload nur für wenige Ressourcen, die für den sichtbaren Seitenanfang tatsächlich benötigt werden.
SEO-Relevanz von Lazy Loading
Lazy Loading beeinflusst SEO über Ladezeit, Seitennutzung und technische Zugänglichkeit. Suchmaschinen müssen verzögert geladene Bilder und Inhalte beim Rendering erkennen können. Native HTML-Attribute sind dafür meist einfacher als individuelle JavaScript-Lösungen, weil die Bildquelle weiterhin regulär im src-Attribut steht.
Problematisch wird Lazy Loading, wenn die eigentliche Bildquelle ausschließlich in einem JavaScript-Attribut wie data-src liegt und erst durch ein fehleranfälliges Skript eingesetzt wird. Fällt das Skript aus oder wird eine Nutzerinteraktion vorausgesetzt, können Browser und Crawler den Inhalt übersehen. Kontrolliere deshalb den gerenderten HTML-Code und teste wichtige URLs im Rahmen eines technischen SEO-Audits.
Für GEO, also Generative Engine Optimization, wirkt Lazy Loading vor allem indirekt. Schnelle, stabil dargestellte und technisch zugängliche Seiten erleichtern Suchmaschinen und KI-Systemen die Verarbeitung der Inhalte. Textliche Kernaussagen sollten jedoch nie erst durch Scrollen oder eine Interaktion in den HTML-Code eingefügt werden. Lazy Loading eignet sich vorrangig für schwere Medien, nicht für zentrale Antworten und Produktinformationen.
Lazy Loading richtig umsetzen
Eine saubere Umsetzung beginnt mit einer Einteilung nach Position und Funktion. Inhalte im ersten Bildschirmbereich werden priorisiert, während Medien weiter unten verzögert laden dürfen. Die folgende Prüfliste deckt die häufigsten technischen Anforderungen ab:
Bei der Onpage-Optimierung sollte Lazy Loading nie isoliert bewertet werden. Erst das Zusammenspiel aus Dateigröße, Ladepriorität, HTML-Struktur, Serverleistung und visueller Stabilität zeigt, ob die Implementierung den PageSpeed tatsächlich verbessert.
Häufige Fragen zu Lazy Loading
Sollte jedes Bild mit Lazy Loading geladen werden?
Nein. Bilder im ersten sichtbaren Bereich sollten gewöhnlich direkt geladen werden. Lazy Loading eignet sich vor allem für Bilder, Videos und Iframes, die erst nach dem Scrollen benötigt werden.
Kann Lazy Loading den PageSpeed verschlechtern?
Ja. Wird das größte sichtbare Bild verzögert geladen, kann sich der Largest Contentful Paint verschlechtern. Prüfe deshalb, welches Element beim Seitenaufruf als größter sichtbarer Inhalt erscheint.
Funktioniert Lazy Loading auch ohne JavaScript?
Natives Lazy Loading für Bilder und Iframes funktioniert über das HTML-Attribut loading='lazy' und benötigt kein eigenes JavaScript. Individuelle Funktionen wie endloses Scrollen oder komplexe Bildergalerien können weiterhin JavaScript erfordern.
Ist Lazy Loading für mobile Websites sinnvoll?
Lazy Loading ist auf Mobilgeräten besonders hilfreich, weil Displayfläche, Bandbreite und Rechenleistung begrenzt sein können. Die verzögerten Inhalte müssen dennoch rechtzeitig laden, bevor der Nutzer den betreffenden Bereich erreicht.
Kann Google Lazy-Loading-Bilder indexieren?
Google kann verzögert geladene Bilder grundsätzlich verarbeiten, wenn die Bildquelle technisch zugänglich ist und keine Nutzerinteraktion vorausgesetzt wird. Native HTML-Attribute sind meist robuster als eine vollständig individuelle JavaScript-Implementierung.
Welche Inhalte eignen sich nicht für Lazy Loading?
Logos, Titelbilder, sichtbare Produktbilder und zentrale Inhalte im ersten Bildschirmbereich sollten meist früh geladen werden. Auch wichtige Texte sollten bereits im HTML vorhanden sein und nicht erst beim Scrollen eingefügt werden.
Wenn du die Ladeprioritäten und technischen Ursachen deiner Website prüfen lassen möchtest, kannst du einen unverbindlichen Potenzialcheck anfragen.
Sie haben noch Fragen?
