Was ist Lazy Loading?

Lazy Loading: Definition und Zweck

Eine Webseite mit vielen Bildern lädt klassisch alles auf einmal, auch das, was Besucher erst nach langem Scrollen oder nie zu sehen bekommen. Beim Lazy Loading werden diese Elemente zurückgestellt und erst abgerufen, wenn sie bald sichtbar werden. Die Seite wird schneller nutzbar, und besonders auf dem Smartphone sinkt die übertragene Datenmenge.

Der Gegensatz ist das sofortige Laden (Eager Loading). Für alles, was beim Öffnen der Seite sichtbar ist, bleibt es die richtige Wahl, denn dort zählt jede Millisekunde. Lazy Loading wirkt deshalb nur bei Inhalten außerhalb des ersten Bildschirms oder bei Inhalten, die nur bei Bedarf erscheinen, etwa in Tabs.

So funktioniert Lazy Loading

Für Bilder und iFrames genügt das HTML-Attribut loading=lazy. Alle gängigen Browser unterstützen es, ein zusätzliches Skript ist nicht nötig. Der Browser entscheidet selbst, wann er mit dem Laden beginnt, und startet etwas vor dem Sichtbarwerden, damit Besucher kaum eine Verzögerung bemerken.

Ergänzend gibt es JavaScript-Lösungen auf Basis des IntersectionObserver, die auch Karten, Videos oder ganze Komponenten nachladen. Damit nichts springt, müssen Breite und Höhe der Elemente vorab festgelegt sein, sonst verschiebt sich der Inhalt beim Nachladen und der Wert für die Layoutstabilität verschlechtert sich.

• Bilder unterhalb des sichtbaren Bereichs, etwa Galerien, Teaser, Footer
• Eingebettete Videos und Karten (iFrames)
• Lange Listen und Produktraster, die nachgeladen werden
• Nicht verzögern: Titelbild im sichtbaren Bereich und Logo

Praxis­bei­spiel: Refe­renz­seite eines Flie­senle­gers

Ein Fliesenleger zeigt auf seiner Referenzseite achtzig großformatige Fotos. Beim Aufruf lädt der Browser alle Bilder auf einmal, was im mobilen Netz dauert und Datenvolumen verbraucht. Mit Lazy Loading erscheinen zunächst nur die ersten Bilder, der Rest folgt beim Scrollen.

Zunächst war auch das große Titelbild verzögert, die Seite wirkte dadurch sogar langsamer. Erst als es sofort geladen und zusätzlich priorisiert wurde (fetchpriority=high), verbesserte sich der Wert für den Largest Contentful Paint, die Ladezeit des größten sichtbaren Elements. Die Ausnahme für das Titelbild ist also ebenso wichtig wie das Verzögern der übrigen Bilder.

Vorteile, Grenzen und typische Fehler

Lazy Loading senkt Ladezeit, Datenverbrauch und Serverlast. Es hilft aber nicht gegen zu große Dateien: Die Bilder sollten zusätzlich komprimiert und in modernen Formaten wie WebP oder AVIF ausgeliefert werden. Für Suchmaschinen müssen nachgeladene Inhalte ohne Klick sichtbar werden, was das native Attribut und der IntersectionObserver erfüllen.

• Titelbild (LCP-Element) verzögert geladen: verschlechtert die Ladezeit
• Fehlende Breiten- und Höhenangaben: Die Seite springt beim Nachladen
• Wichtige Texte erst nach einem Klick nachgeladen
• Zu spätes Nachladen: Bilder erscheinen beim Scrollen sichtbar verzögert

Umsetzung

Moderne Themes und Frameworks setzen Lazy Loading teils automatisch, die Regel gehört aber geprüft: sichtbare Bereiche sofort, alles andere verzögert. Nano Concepts setzt es im Rahmen der Pagespeed-Optimierung ein, legt Platzhaltergrößen fest und überprüft die Wirkung anhand der Core Web Vitals.