Bilder verzögert laden (Lazy Loading)

Wenn PageSpeed Insights oder Lighthouse „Offscreen-Bilder zurückstellen" verlangt (die genaue Formulierung kann je nach Lighthouse-Version abweichen), wurden Bilder gefunden, die sofort laden, obwohl sie unterhalb der Falz liegen und erst beim Scrollen sichtbar werden. Sie vorab zu laden konkurriert um Bandbreite mit dem, was der Besucher tatsächlich sieht. Sie zurückzustellen, meist per Lazy Loading, lässt den Browser jedes Bild erst holen, wenn es kurz davor ist, in den Blick zu geraten. Dieser Leitfaden erklärt, wie Sie Bilder verzögert laden und die Warnung beheben, mit dem einen Fehler, den es dabei zu vermeiden gilt.

Was die Empfehlung bedeutet

Standardmäßig lädt ein Browser jedes im HTML referenzierte Bild, sobald er es entdeckt, unabhängig davon, ob es sichtbar ist. Auf einer langen Seite mit Galerie, Kommentaren oder einem Footer voller Vorschaubilder bedeutet das, dutzende Bilder zu laden, zu denen der Besucher vielleicht nie scrollt. Lighthouse erkennt die Offscreen-Bilder und meldet die Bytes, die ein Zurückstellen sparen würde.

Zurückstellen entfernt die Bilder nicht, es ändert nur den Zeitpunkt. Beim Lazy Loading hält der Browser ein Offscreen-Bild zurück und fordert es an, sobald der Besucher nahe genug heranscrollt, dass es bald in den sichtbaren Bereich kommt.

Warum es für Ladezeit und Core Web Vitals zählt

Die beim ersten Aufbau geladenen Ressourcen teilen sich eine begrenzte Bandbreite. Jedes vorab geladene Offscreen-Bild konkurriert mit dem sichtbaren Inhalt, auch mit dem Largest-Contentful-Paint-Element, deshalb lässt Zurückstellen den wichtigen Inhalt zuerst eintreffen. Es spart außerdem Daten, die sonst für nie gesehene Bilder ausgegeben würden, was besonders auf mobilen Verbindungen zählt. Weil die Core Web Vitals ein Google-Ranking-Signal sind, nützt das Zurückstellen von Offscreen-Bildern Nutzererfahrung und Sichtbarkeit zugleich. Es ergänzt sich mit dem richtigen Dimensionieren und dem Bereitstellen in modernen Formaten zum Kern der Bildoptimierung.

Bilder verzögert laden

1. Natives Browser-Lazy-Loading nutzen

Die einfachste und zuverlässigste Methode ist das eingebaute loading-Attribut des Browsers, überall unterstützt und ohne JavaScript:

<img src="galerie-foto.jpg" loading="lazy"
     width="800" height="600" alt="Galeriefoto">

Der Browser stellt dieses Bild nun zurück, bis der Besucher sich nähert. Behalten Sie width und height, damit der Platz reserviert ist und beim Laden nichts springt.

2. Niemals das Bild oberhalb der Falz verzögern

Das ist der häufigste und schädlichste Fehler bei dieser Empfehlung. loading="lazy" auf das Hero-Bild oder das Largest-Contentful-Paint-Element zu setzen verzögert genau den Inhalt, den Lighthouse zuerst gezeigt haben will, und verschlechtert damit den LCP. Lazy Loading ist nur für Offscreen-Bilder gedacht. Bilder oberhalb der Falz normal laden und loading="lazy" dem vorbehalten, was unterhalb der Falz liegt.

3. Hintergrund- und CSS-Bilder zurückstellen

Das loading-Attribut gilt nur für <img>- und <iframe>-Elemente. Per CSS gesetzte Hintergrundbilder mit einem IntersectionObserver zurückstellen, der den Hintergrund erst setzt, wenn das Element in die Nähe des Sichtbereichs kommt, oder über eine Klasse, die beim Scrollen umgeschaltet wird.

4. Auch iframes und Videos verzögern

Offscreen-Einbettungen wie Karten, Videoplayer und Social-Widgets sind oft schwerer als jedes Bild. iframes mit loading="lazy" versehen und für Videos eine leichte Fassade nutzen, die den echten Player erst beim Klick einblendet.

5. In WordPress ohne Code

WordPress fügt Inhaltsbildern automatisch loading="lazy" hinzu, aber Page-Builder und ältere Themes überschreiben das mitunter, und Hero-Slider werden häufig versehentlich lazy geladen. Bestätigen, dass Bilder unterhalb der Falz zurückgestellt sind und das Hauptbild oberhalb der Falz nicht. Ein Performance-Plugin kann das steuern, einschließlich Lazy Loading für Hintergrundbilder.

6. Nicht zu aggressiv zurückstellen

Lazy Loading auf wirklich Offscreen-Bilder begrenzen. Wird auch alles knapp oberhalb oder direkt an der Falz verzögert, sieht der Besucher beim Scrollen ein sichtbares Nachladen, das Pop-in wirkt, und der Vorteil kehrt sich in eine schlechtere wahrgenommene Geschwindigkeit um. Ein kleiner Vorlade-Abstand, bevor ein Bild in den Blick kommt, hält den Übergang unauffällig.

Den Fix prüfen

PageSpeed Insights erneut ausführen und bestätigen, dass die Einsparungen für Offscreen-Bilder verschwunden sind. Im Netzwerk-Panel der DevTools neu laden und beobachten, dass Bilder unterhalb der Falz erst beim Scrollen angefordert werden, während das Bild oberhalb der Falz weiterhin sofort lädt. Prüfen, dass beim Eintreffen zurückgestellter Bilder keine Layout-Verschiebung auftritt, was bestätigt, dass die Abmessungen gesetzt sind. Laborwerte reagieren sofort, die Felddaten im Chrome UX Report folgen über ein nachlaufendes 28-Tage-Fenster.

Häufige Fragen

Was bedeutet „Offscreen-Bilder zurückstellen"?

Das Laden von Bildern unterhalb der Falz verzögern, bis der Besucher nahe heranscrollt, statt sie mit der initialen Seite zu laden. Das geschieht üblicherweise per Lazy Loading.

Wie lade ich Bilder per Lazy Loading?

Das Attribut loading="lazy" an die <img>-Tags hängen. Der Browser stellt dann jedes Bild zurück, bis der Besucher sich nähert, ganz ohne JavaScript.

Sollte ich jedes Bild lazy laden?

Nein. Niemals das Bild oberhalb der Falz oder das Largest-Contentful-Paint-Element verzögern, weil das den LCP verschlechtert. Lazy Loading nur auf Bilder anwenden, die offscreen beginnen.

Verbessert das Zurückstellen von Offscreen-Bildern die Core Web Vitals?

Ja. Es gibt Bandbreite für den sichtbaren Inhalt frei, was dem Largest Contentful Paint hilft, und spart Daten für ungesehene Bilder. Da die Core Web Vitals ein Ranking-Signal sind, nützt der Gewinn Nutzern und Sichtbarkeit zugleich.

Wie stelle ich Offscreen-Bilder in WordPress zurück?

WordPress lädt Inhaltsbilder standardmäßig verzögert. Prüfen, dass Theme oder Page-Builder das nicht deaktiviert oder das Hero-Bild lazy geladen hat, und ein Performance-Plugin nutzen, um Hintergrundbilder und iframes abzudecken.

Kann Lazy Loading die Ladezeit verschlechtern?

Ja, wenn es zu aggressiv eingesetzt wird. Das LCP- oder Hero-Bild zu verzögern verschlechtert den LCP, und das Zurückstellen von Bildern direkt an der Falz erzeugt sichtbares Pop-in. Richtig eingesetzt, also nur für klar offscreen liegende Bilder, verbessert es die Ladezeit.