Lazy Loading: Bilder und Videos verzögert laden für schnellere Seiten

Deine Webseite lädt zu langsam? Dann werden wahrscheinlich Bilder und Videos geladen, die der Nutzer noch gar nicht sieht. Lazy Loading löst genau dieses Problem: Medieninhalte werden erst geladen, wenn sie in den sichtbaren Bereich scrollen. Das spart Ladezeit, Bandbreite und verbessert deine Core Web Vitals. In diesem Artikel erfährst du, wie Lazy Loading funktioniert und wie du es richtig einrichtest.

Was ist Lazy Loading?

Lazy Loading bedeutet „verzögertes Laden". Statt alle Bilder und Videos einer Seite sofort beim Aufrufen zu laden, werden nur die Inhalte im sichtbaren Bereich geladen. Alles, was weiter unten auf der Seite liegt, wird erst geladen, wenn der Nutzer dorthin scrollt.

Ohne Lazy Loading muss der Browser beim Seitenaufruf alle Bilder herunterladen — auch die, die ganz unten auf einer langen Seite liegen und möglicherweise nie gesehen werden. Bei einer Seite mit 20 Bildern kann das mehrere Megabyte an Daten bedeuten, die den Seitenaufbau unnötig verlangsamen.

Mit Lazy Loading lädt der Browser zunächst nur die Bilder im sichtbaren Bereich (Above the Fold). Erst wenn der Nutzer scrollt, werden die nächsten Bilder nachgeladen. Das beschleunigt den initialen Seitenaufbau erheblich.

Warum ist Lazy Loading wichtig für SEO?

Lazy Loading hat direkte Auswirkungen auf mehrere SEO-relevante Faktoren.

Schnellere Ladezeiten

Die Ladezeit deiner Webseite ist ein offizieller Rankingfaktor. Je schneller deine Seite lädt, desto besser bewertet Google sie. Lazy Loading reduziert die initiale Ladezeit, weil weniger Daten beim ersten Seitenaufruf übertragen werden müssen.

Bessere Core Web Vitals

Lazy Loading verbessert gleich mehrere Core Web Vitals. Der Largest Contentful Paint (LCP) profitiert, weil weniger Ressourcen um Bandbreite konkurrieren. Der Cumulative Layout Shift (CLS) kann verbessert werden, wenn Platzhalter korrekt implementiert sind. Die Interaction to Next Paint (INP) profitiert von einem schnelleren initialen Seitenaufbau.

Weniger Bandbreite

Nutzer mit langsamen Internetverbindungen — vor allem auf mobilen Geräten — profitieren besonders. Weniger Datenübertragung bedeutet schnellere Ladezeiten und weniger Datenverbrauch. Das verbessert die Nutzererfahrung, was sich indirekt positiv auf deine Rankings auswirkt.

Native Lazy Loading mit loading="lazy"

Die einfachste und empfohlene Methode für Lazy Loading ist das native HTML-Attribut loading="lazy". Es wird von allen modernen Browsern unterstützt und erfordert kein JavaScript.

Für Bilder

<img src="bild.jpg" alt="Beschreibung" loading="lazy" width="800" height="600">

Das Attribut loading="lazy" sagt dem Browser, dass dieses Bild erst geladen werden soll, wenn es in den sichtbaren Bereich kommt. Der Browser entscheidet selbst, wie weit im Voraus er das Bild lädt — typischerweise einige Hundert Pixel bevor es sichtbar wird.

Für iFrames

<iframe src="https://www.youtube.com/embed/video-id" loading="lazy"></iframe>

Auch eingebettete Videos und andere iFrames können mit loading="lazy" versehen werden. Das ist besonders bei YouTube-Embeds sinnvoll, da diese viele zusätzliche Ressourcen laden.

Wichtig: Breite und Höhe angeben

Gib bei Lazy-Loading-Bildern immer width und height an. Ohne diese Angaben weiß der Browser nicht, wie viel Platz er für das Bild reservieren soll. Beim Nachladen verschiebt sich dann der Seiteninhalt — das verursacht Layout Shifts und verschlechtert deinen CLS-Wert.

Wann du Lazy Loading NICHT verwenden solltest

Lazy Loading ist nicht für alle Bilder auf deiner Seite geeignet. Es gibt wichtige Ausnahmen.

Above-the-Fold-Bilder

Bilder, die beim Seitenaufruf sofort sichtbar sind (Above the Fold), sollten NICHT lazy geladen werden. Wenn du das Hero-Image deiner Seite lazy lädst, wird es erst mit Verzögerung angezeigt — das verschlechtert die Nutzererfahrung und den LCP-Wert.

LCP-Bilder

Der Largest Contentful Paint (LCP) misst, wann das größte sichtbare Element der Seite geladen ist. Wenn dieses Element ein Bild ist und du es lazy lädst, verschlechterst du deinen LCP-Wert direkt. Identifiziere dein LCP-Element und stelle sicher, dass es ohne Lazy Loading geladen wird.

Für LCP-Bilder ist sogar das Gegenteil empfehlenswert — lade sie mit hoher Priorität:

<img src="hero.jpg" alt="Hero" fetchpriority="high" width="1200" height="600">

Logo und Navigation

Bilder in der Navigation, dein Logo und andere Elemente, die sofort sichtbar sein müssen, sollten ohne Lazy Loading geladen werden.

Lazy Loading für Videos

Videos sind oft die größten Ressourcen auf einer Seite. Ein eingebettetes YouTube-Video lädt dutzende zusätzliche Scripts und Stylesheets — selbst wenn der Nutzer das Video nie abspielt.

Thumbnail + Click-to-Load

Die effektivste Methode für Videos: Zeige zunächst nur ein Vorschaubild (Thumbnail) mit einem Play-Button. Erst wenn der Nutzer auf den Play-Button klickt, wird das eigentliche Video geladen. Diese Methode spart enorme Mengen an Bandbreite und beschleunigt den Seitenaufbau drastisch.

Für YouTube-Videos kannst du das Thumbnail direkt von YouTube laden:

<img src="https://img.youtube.com/vi/VIDEO-ID/maxresdefault.jpg" alt="Video-Titel">

Bei Klick ersetzt du das Bild durch den tatsächlichen YouTube-iFrame. Es gibt fertige Bibliotheken wie lite-youtube-embed, die das automatisch erledigen.

iFrame Lazy Loading

Wenn du das Thumbnail-Verfahren nicht implementieren möchtest, nutze zumindest loading="lazy" auf dem iFrame. Das verhindert, dass das Video geladen wird, bevor es in den sichtbaren Bereich kommt.

Lazy Loading in WordPress

WordPress unterstützt natives Lazy Loading seit Version 5.5. Alle Bilder, die über den Editor eingefügt werden, erhalten automatisch das Attribut loading="lazy". Du musst in den meisten Fällen nichts manuell konfigurieren.

Seit WordPress 5.9 wird das erste Bild im Content automatisch vom Lazy Loading ausgenommen — eine sinnvolle Verbesserung für den LCP-Wert. Prüfe trotzdem, ob dein Theme das korrekt umsetzt.

Für zusätzliche Optimierungen gibt es Plugins wie WP Rocket oder Perfmatters, die auch iFrames und Hintergrundbilder lazy laden können. In den meisten Fällen reicht aber die native WordPress-Funktion aus.

Lazy Loading testen

Nach der Implementierung solltest du prüfen, ob Lazy Loading korrekt funktioniert.

Google Lighthouse

Lighthouse prüft, ob Offscreen-Bilder lazy geladen werden. Starte einen Lighthouse-Audit in den Chrome DevTools und achte auf die Empfehlung „Offscreen-Bilder zurückstellen". Wenn diese Empfehlung nicht mehr erscheint, funktioniert dein Lazy Loading.

Chrome DevTools

Öffne die Chrome DevTools, wechsle zum Tab „Netzwerk" und filtere nach „Img". Lade die Seite neu und scrolle langsam nach unten. Du solltest sehen, dass Bilder erst beim Scrollen nachgeladen werden.

Optimierte Bilder kombinieren

Lazy Loading funktioniert am besten in Kombination mit optimierten Bildern. Komprimiere deine Bilder, verwende moderne Formate wie WebP und liefere verschiedene Größen für verschiedene Bildschirmgrößen. Lazy Loading und Bildoptimierung zusammen ergeben den größten Performance-Gewinn.

Fazit

Lazy Loading ist eine der einfachsten und wirkungsvollsten Maßnahmen zur Verbesserung deiner Seitengeschwindigkeit. Mit dem nativen loading="lazy"-Attribut brauchst du nur ein einziges Attribut zu deinen Bildern hinzuzufügen. Achte darauf, Above-the-Fold-Bilder und LCP-Bilder vom Lazy Loading auszunehmen und gib immer Breite und Höhe an, um Layout Shifts zu vermeiden. Für Videos ist das Thumbnail-plus-Click-Verfahren die beste Lösung. Teste deine Implementierung mit Lighthouse und den Chrome DevTools. Ein kostenloser SEO-Check zeigt dir, wie gut deine Seite bei Ladezeit und Core Web Vitals abschneidet.