Lazy Loading
Wie Lazy Loading Bilder erst beim Scrollen lädt, was das spart und warum es beim Titelbild schadet.
Lazy Loading heißt: Bilder und eingebettete Inhalte werden erst geladen, wenn sie in die Nähe des sichtbaren Bereichs kommen. Was weit unten auf der Seite steht, kostet beim ersten Aufruf nichts.
Wie Lazy Loading eingebaut wird
Im HTML reicht ein Attribut:
<img src="foto.webp" width="800" height="600" loading="lazy" alt="…">Alle aktuellen Browser verstehen das ohne zusätzliches JavaScript. WordPress setzt loading="lazy" seit Version 5.5 automatisch.
Der Fehler beim Titelbild
Auf das Titelbild gehört kein Lazy Loading. Es ist sichtbar, sobald die Seite erscheint, und bestimmt meist den LCP-Wert der Core Web Vitals. Wird es verzögert geladen, verschlechtert sich genau dieser Wert. Richtig ist hier das Gegenteil:
<img src="hero.webp" loading="eager" fetchpriority="high" …>WordPress erkennt das oberste Bild inzwischen selbst und nimmt es aus, verlässlich ist das je nach Theme aber nicht.
Zweiter Stolperstein: Bilder ohne Maße
Ohne width und height weiß der Browser nicht, wie viel Platz ein noch nicht geladenes Bild braucht. Beim Nachladen springt das Layout, und das schlägt sich im CLS-Wert nieder. Beide Angaben gehören deshalb an jedes Bild.
Zusammen mit Format, Abmessungen und Kompression ergibt das ein rundes Bild. Der Ratgeber Bilder in WordPress optimieren geht die Schritte der Reihe nach durch.