Was ist Lazy-Loading?
Lazy-Loading ist eine Technik, bei der Bilder, Videos oder andere Ressourcen auf einer Webseite erst dann vom Browser geladen werden, wenn sie tatsächlich in den sichtbaren Bereich des Nutzers scrollen. Ohne Lazy-Loading lädt der Browser beim Seitenaufruf alle Medieninhalte sofort, unabhängig davon, ob der Nutzer jemals bis zu diesen Inhalten scrollt. Das HTML-Attribut „loading=lazy“ ist seit 2019 Teil des Web-Standards und wird von allen modernen Browsern unterstützt.
Was bedeutet das für Ihre Website?
Auf einer typischen WordPress-Seite mit Blog-Übersicht oder WooCommerce-Produktliste können Dutzende von Bildern vorhanden sein. Ohne Lazy-Loading werden alle diese Bilder beim Laden der Seite sofort angefordert, auch wenn der Besucher nur die ersten drei sieht. Das verlangsamt den initialen Seitenaufbau, erhöht den Datenverbrauch und verschlechtert die Core-Web-Vitals-Werte. Mit Lazy-Loading priorisiert der Browser die sichtbaren Inhalte und lädt den Rest nach Bedarf nach. Das ist besonders auf mobilen Geräten mit schmaleren Datenleitungen spürbar. Seit WordPress 5.5 setzt der Core das „loading=lazy“-Attribut automatisch auf alle Bilder, die nicht im initialen Viewport sind. Für ältere Bilder oder Page-Builder-Elemente kann das Attribut fehlen und sollte manuell geprüft werden.
Warnung
Das Hauptbild einer Seite, das sofort sichtbar ist (z. B. das Hero-Bild im oberen Seitenbereich), darf nicht mit „loading=lazy“ markiert werden. Das würde den Largest Contentful Paint verschlechtern, da der Browser das wichtigste Bild erst verzögert lädt. Setzen Sie bei Hauptbildern stattdessen „loading=eager“ oder das Attribut „fetchpriority=high“.
Verwandte Begriffe
LCP / Largest Contentful Paint — Mediathek — CDN / Content Delivery Network — JavaScript