Lazy Loading von Bildern

Lazy Loading bedeutet, dass Bilder außerhalb des sichtbaren Bereichs nicht sofort geladen werden, sondern erst, wenn der Nutzer zu ihnen scrollt. Es genügt das Attribut loading="lazy".

Ohne Lazy Loading lädt der Browser auch Bilder ganz unten auf der Seite, die der Nutzer vielleicht nie sieht — das verzögert das erste Rendern und verschwendet Daten. Lazy Loading beschleunigt den Start und spart Übertragung.

1. 1Füge Bildern und iframes unterhalb des sichtbaren Bereichs loading="lazy" hinzu.
2. 2Verwende KEIN Lazy beim Hauptbild over the fold (LCP-Bild) — das willst du im Gegenteil so früh wie möglich (ruhig preload).
3. 3Gib immer width und height an, damit das Layout nicht springt (CLS).