Zurück zum Glossar

Begriff

Lazy Loading

Lazy Loading ist eine Technik, bei der Bilder, iframes oder JavaScript-Module erst geladen werden, wenn sie tatsächlich benötigt werden — meist beim Scrollen in den Viewport.

Lazy Loading — ausführlicher erklärt

Statt alle Bilder einer langen Seite beim ersten Request zu laden, lädt Lazy Loading nur das, was im sichtbaren Bereich (Above the Fold) tatsächlich gebraucht wird. Alles weiter unten wird erst nachgeladen, sobald der Nutzer hinscrollt. Das spart anfängliche Bandbreite, beschleunigt LCP und verkleinert das Datenvolumen für Nutzer, die gar nicht bis zum Seitenende scrollen.

In HTML reicht heute das Attribut loading="lazy" an <img>- und <iframe>-Tags — alle modernen Browser unterstützen das nativ. Für JavaScript-Module übernimmt dynamisches import() dieselbe Rolle.

Beispiel / Praxisbezug

Eine Blog-Seite mit 30 Inline-Bildern lädt mit loading="lazy" initial nur die obersten 2–3 — der Rest folgt beim Scrollen. LCP profitiert deutlich, ohne dass man Build-Tools anfassen muss.

Abgrenzung zu ähnlichen Begriffen

Lazy Loading verzögert das Laden, Preload zieht es vor — beides hilft Performance, aber an unterschiedlichen Enden. Wichtig: das LCP-Element selbst niemals lazy laden, sonst verzögert sich die Hauptmetrik.

Entdecke mehr