Lazy Loading ist eine Technik, die das Laden nicht-kritischer Ressourcen (hauptsächlich Bilder und iframes) verzögert, bis sie im Viewport (dem sichtbaren Bereich der Seite) erscheinen. Bilder unterhalb des sichtbaren Bereichs werden erst beim Herunterscrollen heruntergeladen.
Vorteile
- Schnellerer initialer Seitenaufbau — Der Browser lädt nur das sofort Sichtbare.
- Weniger Bandbreite — Nutzer, die nicht nach unten scrollen, laden diese Bilder nicht.
- Bessere Core Web Vitals — Verbessert den Largest Contentful Paint (LCP).
Natives Browser Lazy Loading
<img src="foto.jpg" loading="lazy" alt="Beschreibung" />
<iframe src="video.html" loading="lazy"></iframe>WordPress fügt seit Version 5.5 automatisch natives Lazy Loading zu Bildern hinzu.
Wichtig: Above-the-Fold-Bilder nicht lazy laden
Dein Hero-Bild, Logo und andere sofort sichtbare Bilder sollten nicht lazy geladen werden. Sie sollten loading="eager" oder fetchpriority="high" verwenden.
Was InspectWP prüft
InspectWP analysiert die Bilder auf deiner Seite, einschließlich des loading="lazy"-Attributs.