Lazy Loading

Native Lazy Loading aktivieren

Für Bilder: <img src="..." loading="lazy" alt="...">. Für Iframes: <iframe src="..." loading="lazy">. Wichtig: Above-the-fold-Bilder NICHT lazy laden — sie sollen sofort sichtbar sein. loading="eager" oder kein Attribut für Hero-Bilder. Native Lazy Loading wird in allen modernen Browsern unterstützt, mit Safari ab Version 15.4 auch im Apple-Ökosystem.

Lazy Loading und Core Web Vitals

• LCP — Above-the-fold-Bilder dürfen nicht lazy geladen werden, sonst sinkt der LCP-Score. Klassischer Anti-Pattern: loading="lazy" auf dem Hero-Bild gesetzt, LCP geht von 1,8 auf 4,2 s.
• CLS — Bilder müssen explizite width- und height-Attribute haben, sonst entsteht Layout-Shift beim verzögerten Nachladen.
• INP — eher unkritisch, da Lazy Loading nicht die Interaktivität betrifft.

Lazy Loading und SEO-Crawling

Wichtige Frage: Erkennt Googlebot lazy geladene Bilder? Ja, seit 2019. Wenn Lazy Loading native (loading="lazy") oder mit Intersection Observer realisiert ist, parsed Googlebot die Bilder korrekt. Problematisch sind nur veraltete JavaScript-Lazy-Loading-Lösungen, die Bilder nur auf User-Scroll-Event nachladen — die werden von Googlebot oft übersehen, weil der Bot nicht „scrollt". Modernes natives Lazy Loading ist deshalb der saubere Standard.