Lazy Loading
Lazy Loading verzögert das Laden von Bildern und anderen Medien, bis sie tatsächlich im sichtbaren Bereich des Browsers erscheinen. Beim Seitenaufruf werden zunächst nur die Inhalte geladen, die der Besucher sofort sieht – alles weitere folgt erst beim Scrollen. Das reduziert die initiale Ladezeit und spart Bandbreite für Inhalte, die vielleicht nie gesehen werden.
Lazy Loading in WordPress
Seit WordPress 5.5 wird Lazy Loading für Bilder automatisch aktiviert: WordPress fügt allen <img>-Tags das Attribut loading="lazy" hinzu. Browser, die dieses Attribut unterstützen (alle modernen Browser), laden das Bild erst, wenn es in die Nähe des Viewports kommt.
Wichtige Ausnahme: LCP-Bild
Das größte sichtbare Element beim Seitenaufruf – meist das Hero-Bild oder das Featured Image – sollte nicht lazy geladen werden. Es ist der LCP-Kandidat (Largest Contentful Paint) und muss so schnell wie möglich laden. WordPress setzt für das erste Bild im Inhalt seit Version 6.3 automatisch loading="eager" und fetchpriority="high". Bei manuell eingebundenen Hero-Bildern muss das geprüft werden.
Lazy Loading für iFrames und Videos
Das loading="lazy"-Attribut funktioniert seit 2022 auch für <iframe>-Elemente in Chrome und Firefox – relevant für eingebettete YouTube-Videos oder Google Maps. Viele Caching- und Performance-Plugins (WP Rocket, LiteSpeed Cache) bieten erweitertes Lazy Loading für iFrames, das auch in älteren Browsern greift.
Lazy Loading und Core Web Vitals
Richtig eingesetzt verbessert Lazy Loading den LCP-Wert, weil weniger Ressourcen initial laden und damit der Browser schneller zum LCP-Element kommt. Falsch eingesetzt – wenn das LCP-Bild selbst lazy geladen wird – verschlechtert es den LCP erheblich. Immer prüfen, welches Element der LCP-Kandidat ist.
