Was ist Lazy Loading?

Lazy Loading bedeutet, dass Bilder, Videos und andere Inhalte einer Website erst dann geladen werden, wenn sie tatsächlich im sichtbaren Bereich des Browsers erscheinen. Inhalte, die sich weit unten auf der Seite befinden, werden zunächst nicht geladen.

Der Gedanke dahinter ist einfach: Warum soll der Browser beim ersten Aufruf einer langen Seite sofort alle 50 Bilder laden, wenn der Nutzer zunächst nur den oberen Bereich sieht? Mit Lazy Loading lädt der Browser zuerst nur das, was der Besucher gerade sieht. Scrollt er nach unten, lädt die Seite die nächsten Inhalte nach. Das spart Bandbreite, beschleunigt den initialen Seitenaufbau und verbessert die wahrgenommene Ladegeschwindigkeit spürbar.

Wann Lazy Loading den Unterschied macht

Der Effekt ist besonders auf bildlastigen Seiten deutlich. Ein Online-Shop mit 100 Produktbildern auf einer Kategorieseite oder ein Portfolio mit vielen Fotos profitiert enorm. Statt alle Bilder auf einmal zu laden, liefert die Seite zunächst die ersten zehn sichtbaren Bilder aus und lädt den Rest beim Scrollen nach.

Moderne Browser unterstützen Lazy Loading nativ über das HTML-Attribut loading="lazy". Das bedeutet, du musst keine komplexe JavaScript-Lösung mehr implementieren. Einfach das Attribut an das Bild-Tag anhängen, und der Browser erledigt den Rest. Für ältere Browser gibt es JavaScript-Bibliotheken als Fallback.

Ein Punkt verdient besondere Beachtung: Lazy Loading sollte nicht auf Bilder im sichtbaren Bereich beim ersten Laden der Seite angewendet werden. Bilder, die der Nutzer sofort sieht, also der sogenannte Above-the-Fold-Bereich, sollten immer sofort geladen werden. Andernfalls entstehen sichtbare Lücken, die sich erst nach einer kurzen Verzögerung füllen. Das wirkt unprofessionell und schadet dem ersten Eindruck.

Für die SEO-Performance ist Lazy Loading ebenfalls relevant. Google bewertet die Core Web Vitals, darunter den Largest Contentful Paint, also wie schnell das größte sichtbare Element einer Seite geladen wird. Mit richtig umgesetztem Lazy Loading lässt sich dieser Wert oft deutlich verbessern.

Wenn du wissen willst, wo deine Website Performance-Potenzial hat und wie Lazy Loading dabei helfen kann, schau dir unsere Leistungen im Bereich Webdesign und Webentwicklung an. Beim kostenlosen Erstgespräch analysieren wir gemeinsam, wo der größte Hebel liegt.