Lazy Loading bezeichnet eine Technik der Webentwicklung, bei der Inhalte wie Bilder oder Videos erst dann geladen werden, wenn sie tatsächlich in den sichtbaren Bereich des Browsers rücken. Statt beim Seitenaufruf sofort alle Ressourcen zu übertragen, lädt die Seite zunächst nur das Sichtbare. Das verkürzt die anfängliche Ladezeit spürbar und spart Datenvolumen — besonders auf mobilen Geräten.
Wie funktioniert Lazy Loading?
Beim klassischen Laden fordert der Browser alle Bilder einer Seite sofort an — auch die, die erst nach mehrmaligem Scrollen sichtbar würden. Lazy Loading dreht das um: Ein Bild wird erst angefordert, wenn der Nutzer sich seinem Bereich nähert. Moderne Browser unterstützen das nativ über das HTML-Attribut loading="lazy", das sich ohne zusätzliches JavaScript einsetzen lässt.
Für komplexere Fälle — etwa nachgeladene Inhaltsblöcke, eingebettete Karten oder Videos — kommen JavaScript-Lösungen zum Einsatz, die per Intersection Observer erkennen, wann ein Element in den sichtbaren Bereich eintritt. Content-Management-Systeme wie WordPress aktivieren Lazy Loading für Bilder inzwischen standardmäßig.
Warum ist Lazy Loading wichtig?
Die anfängliche Ladezeit entscheidet darüber, ob Besucher bleiben. Wer eine bildlastige Seite ohne Lazy Loading aufruft, wartet, bis auch unsichtbare Inhalte übertragen sind. Mit Lazy Loading steht der sichtbare Bereich deutlich früher bereit — das verbessert Kennzahlen wie den Largest Contentful Paint und damit die Core Web Vitals, die Google als Rankingsignal nutzt.
Auch wirtschaftlich lohnt sich die Technik: Weniger übertragene Daten bedeuten geringere Serverlast und schnellere Seiten für Nutzer mit schwacher Mobilfunkverbindung. Für Kanzleien, die über Google Ads Besucher auf ihre Landingpages holen, zahlt eine schnelle Seite direkt auf das Zielseiten-Erlebnis und damit auf die Anzeigenkosten ein.
Typische Fehler bei Lazy Loading
Der gravierendste Fehler ist Lazy Loading auf Bildern im sofort sichtbaren Bereich — insbesondere dem Hero-Bild. Wird das größte sichtbare Element verzögert geladen, verschlechtert sich der Largest Contentful Paint statt sich zu verbessern. Bilder „above the fold“ sollten deshalb immer sofort laden, idealerweise mit hoher Priorität.
Ein zweiter Klassiker: fehlende Platzhalter mit fester Größe. Wenn Bilder erst beim Scrollen erscheinen und der Platz dafür nicht reserviert war, springt das Layout — das erhöht den Cumulative Layout Shift. Breite und Höhe sollten daher immer im HTML hinterlegt sein, damit der Browser den Platz von Anfang an freihält.