Suchmaschinenoptimierung (SEO)

Lazy Loading

1. Was ist Lazy Loading?
2. Lazy Loading für Bilder
3. Lazy Loading für Iframes und Videos
4. JavaScript-basiertes Lazy Loading
5. Auswirkungen auf Core Web Vitals
6. Implementierungsbeispiele

Was ist Lazy Loading?

Lazy Loading (auf Deutsch: verzögertes Laden) ist eine Technik, bei der Ressourcen wie Bilder, Videos und Iframes erst dann geladen werden, wenn sie im sichtbaren Bereich des Browsers erscheinen. Ressourcen ausserhalb des sichtbaren Bereichs (unterhalb des «Fold») werden zunächst übersprungen und erst geladen, wenn der Nutzer dorthin scrollt.

Die Vorteile von Lazy Loading:

• Geringere initiale Ladezeit – Die Seite wird schneller interaktiv, da weniger Ressourcen sofort geladen werden müssen
• Geringerer Datentransfer – Nutzer, die nicht bis ans Ende der Seite scrollen, laden diese Ressourcen nie herunter
• Bessere Core Web Vitals – Insbesondere LCP und TBT können sich verbessern
• Geringere Serverbelastung – Weniger gleichzeitige Ressourcenanfragen

Lazy Loading für Bilder

Seit einigen Jahren unterstützen alle modernen Browser das native Lazy Loading für Bilder über das loading-Attribut. Dies ist die einfachste und empfohlene Methode:

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

Das loading="lazy"-Attribut weist den Browser an, das Bild erst zu laden, wenn es in die Nähe des sichtbaren Bereichs kommt.

Wichtige Hinweise:

• Immer width und height angeben – Ohne definierte Dimensionen springt die Seite beim Laden der Bilder (CLS-Problem)
• Nie für das LCP-Bild verwenden – Das Hauptbild im sichtbaren Bereich sollte nicht lazy geladen werden
• Browser-Support – Wird von allen modernen Browsern unterstützt

Lazy Loading für Iframes und Videos

Das native loading="lazy"-Attribut funktioniert auch für Iframes:

<iframe src="https://www.youtube.com/embed/VIDEO_ID" loading="lazy" width="560" height="315" title="Video-Titel"></iframe>

Für HTML5-Videos empfiehlt sich das Attribut preload="none":

<video preload="none" controls poster="vorschau.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

JavaScript-basiertes Lazy Loading

Für komplexere Anforderungen kann die Intersection Observer API verwendet werden:

const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

images.forEach(img => observer.observe(img));

Auswirkungen auf Core Web Vitals

Lazy Loading hat nicht nur positive Auswirkungen auf die Core Web Vitals – es gibt auch eine wichtige Falle:

Achtung: Die LCP-Falle! Der LCP (Largest Contentful Paint) misst, wann das grösste sichtbare Element geladen ist. Wenn das Hauptbild einer Seite mit loading="lazy" versehen wird, verzögert der Browser das Laden absichtlich – mit einem deutlich schlechteren LCP-Wert als Folge.

Regel: Bilder, die beim Seitenaufruf sofort sichtbar sind (Above the Fold), sollten niemals mit loading="lazy" versehen werden.

Implementierungsbeispiele

Vollständiges Beispiel für eine korrekte Bildeinbindung:

<!-- Bild NICHT lazy laden (sichtbar beim Seitenaufruf, potentielles LCP-Element) -->
<img src="hero-bild.webp"
     alt="Beschreibung des Hauptbildes"
     width="1200"
     height="600"
     fetchpriority="high">

<!-- Bild lazy laden (unterhalb des sichtbaren Bereichs) -->
<img src="weiteres-bild.webp"
     loading="lazy"
     alt="Beschreibung des weiteren Bildes"
     width="800"
     height="400">

Weitere Informationen zur Bildoptimierung finden Sie auf den Seiten PageSpeed Optimierung und Image SEO. Wie sich Lazy Loading auf die Core Web Vitals auswirkt, lesen Sie auf der Seite Core Web Vitals.