Lazy Loading: Bilder und Videos richtig nachladen

Lazy Loading ist eine Technik die Bilder und Videos richtig nachladen kann – nämlich erst wenn sie in den sichtbaren Bereich des Browsers kommen. Das reduziert die initiale Ladezeit erheblich – besonders auf Seiten mit vielen Bildern. Richtig implementiert ist Lazy Loading eine der einfachsten Performance-Optimierungen. Falsch umgesetzt kann es jedoch Indexierungsprobleme verursachen.

Was ist Lazy Loading?

Ohne Lazy Loading lädt der Browser beim Seitenaufruf alle Bilder sofort – auch die die erst nach langem Scrollen sichtbar werden. Das kostet Ladezeit und Bandbreite unnötig.

Mit Lazy Loading werden nur Bilder im initialen Viewport sofort geladen. Alle anderen Bilder bekommen einen Platzhalter und werden erst geladen wenn der Nutzer dorthin scrollt.

Ergebnis: Schnellerer initialer Seitenaufbau, besserer LCP-Wert (wenn das Hero-Bild korrekt behandelt wird), niedrigere Bandbreitennutzung.

Seiten mit 20+ Bildern ohne Lazy Loading laden im Schnitt 2–4 Sekunden länger als Seiten mit korrekt implementiertem Lazy Loading. Das ist der Unterschied zwischen „Gut” und „Verbesserungsbedarf” bei Core Web Vitals.

Native Lazy Loading (empfohlen)

Seit einigen Jahren unterstützen alle modernen Browser das native loading-Attribut:

<!-- Lazy Loading aktivieren: -->
<img src="bild.webp" alt="Beschreibung" loading="lazy" width="800" height="600">

<!-- Hero-Bild NICHT lazy laden: -->
<img src="hero.webp" alt="Hero" loading="eager" width="1200" height="600">

loading="lazy": Browser entscheidet selbst wann das Bild geladen wird – typischerweise kurz bevor es in den Viewport kommt.

loading="eager": Sofort laden (Standard wenn kein Attribut gesetzt).

Wichtig: Immer width und height Attribute setzen – das verhindert Layout-Shifts (CLS-Probleme) wenn der Platzhalter die richtige Größe hat.

Das LCP-Problem: Hero-Bild nie lazy loaden

Kritischer Fehler: Das Hero-Bild (oft das LCP-Element) mit loading="lazy" zu versehen.

Das LCP-Element ist das größte sichtbare Element bei Seitenaufruf. Wenn es lazy geladen wird, verzögert sich der LCP erheblich – genau das Gegenteil von dem was wir wollen.

Regel: Das erste Bild im Viewport (Header-Bild, Hero, Logo-Banner) nie lazy laden. Alle Bilder darunter können lazy geladen werden.

Bonus: LCP-Bild zusätzlich preloaden für maximale Geschwindigkeit:

<link rel="preload" href="/images/hero.webp" as="image" fetchpriority="high">

Lazy Loading für Videos

Für eingebettete Videos (YouTube, Vimeo) empfiehlt sich eine eigene Lazy-Loading-Strategie:

<!-- Thumbnail anzeigen, Video erst bei Klick laden: -->
<div class="video-wrapper" data-video-id="YT_VIDEO_ID">
  <img src="https://img.youtube.com/vi/YT_VIDEO_ID/maxresdefault.jpg"
       alt="Video Title" loading="lazy">
  <button class="play-btn">Play</button>
</div>

<script>
document.querySelectorAll('.video-wrapper').forEach(wrapper => {
  wrapper.querySelector('.play-btn').addEventListener('click', () => {
    const id = wrapper.dataset.videoId;
    wrapper.innerHTML = `<iframe src="https://www.youtube.com/embed/${id}?autoplay=1"
      allowfullscreen></iframe>`;
  });
});
</script>

Das verhindert das Laden des gesamten YouTube-JavaScript beim Seitenaufruf – was die Ladezeit um 200–600ms verbessern kann.

Lazy Loading in WordPress

Native Unterstützung: WordPress setzt seit Version 5.5 automatisch loading="lazy" auf alle Bilder außer das erste. Das funktioniert gut als Grundlage.

Manuelle Kontrolle: Für das Hero-Bild sicherstellen dass loading="eager" oder kein loading-Attribut gesetzt ist. In Themes manchmal nötig um WordPress-Standardverhalten zu überschreiben.

Plugins für erweiterte Kontrolle:

• WP Rocket: Vollständige Lazy-Loading-Kontrolle inkl. iFrames und Videos
• a3 Lazy Load: Kostenlose Alternative mit Konfigurationsmöglichkeiten

SEO und Lazy Loading: Googlebots Verhalten

Googlebot kann lazy-geladene Bilder indexieren – aber es braucht dafür JavaScript-Ausführung. Das bedeutet:

1. Bilder in der direkten Bildersuche können later indexiert sein
2. Alt-Texte aller Bilder sollten im HTML stehen (nicht erst per JS gesetzt werden)
3. Bilder die für SEO wichtig sind (Produkt-Hauptbilder, Infografiken mit Keyword-Inhalt) sollten nicht tief versteckt hinter vielen Lazy-Load-Ebenen sein

Googlebots Lazy-Loading-Unterstützung ist gut, aber nicht perfekt. Kritische SEO-Bilder (Hauptproduktbilder, Infografiken) sollten im Zweifelsfall nicht lazy geladen werden oder zumindest sehr nahe am initialen Viewport sein.

Mehr zu Performance-Optimierung finden Sie in unserem Artikel über Critical CSS und LCP.