Lazy Loading
Eine Technik, bei der Bilder und Inhalte außerhalb des sichtbaren Bereichs erst geladen werden, wenn Nutzer in ihre Nähe scrollen, wodurch die anfängliche Ladezeit sinkt.
Lazy Loading verbessert die Performance, indem beim ersten Seitenaufruf nur die Inhalte geladen werden, die im Viewport sichtbar sind. Bilder unterhalb des sichtbaren Bereichs bleiben leichte Platzhalter, bis Nutzer in ihre Nähe scrollen und damit den eigentlichen Bild-Download auslösen. Native Lazy Loading über das HTML-Attribut loading='lazy' wird von modernen Browsern unterstützt und benötigt kein JavaScript. Die Intersection Observer API bietet mehr Kontrolle für individuelle Implementierungen. Für Hero-Bilder oberhalb des sichtbaren Bereichs sollte Lazy Loading deaktiviert werden, da diese Bilder sofort geladen werden müssen, um den Largest Contentful Paint zu optimieren. Zu aggressives Lazy Loading, das sichtbare Inhalte verzögert, verschlechtert die wahrgenommene Performance. Der richtige Ausgleich lautet: sichtbare Inhalte sofort laden, alles Weitere verzögert laden.