Lazy Loading

Was ist Lazy Loading?

Der Gedanke dahinter ist einfach, aber wirkungsvoll. Statt beim ersten Seitenaufruf alle fünfzig Bilder einer Seite zu laden, lädt der Browser zunächst nur die sichtbaren. Scrollt der Nutzer nach unten, werden weitere Bilder nachgeladen – genau dann, wenn sie benötigt werden. Das betrifft vor allem ressourcenintensive Medien wie Bilder, Videos, iframes und Hintergrundgrafiken. Das Ergebnis: eine deutlich kürzere initiale Ladezeit, weniger Datenverbrauch und eine schnellere wahrgenommene Geschwindigkeit.

Das Funktionsprinzip

Lazy Loading überwacht die Scroll-Position des Nutzers. Moderne Browser nutzen dafür die Intersection Observer API, die erkennt, wann ein Element in den sichtbaren Bereich (Viewport) eintritt. Sobald sich ein Bild dem sichtbaren Bereich nähert, wird es geladen – meist mit einem kleinen Vorlauf, sodass es bereits fertig ist, wenn der Nutzer es erreicht.

Eager vs. Lazy Loading: der Unterschied

Das Gegenstück zum Lazy Loading ist das klassische „Eager Loading“, bei dem der Browser beim Seitenaufruf alle Ressourcen sofort lädt. Bei bildlastigen Seiten bedeutet das eine hohe initiale Datenmenge – auch für Bilder, die der Nutzer vielleicht nie zu Gesicht bekommt. Lazy Loading verteilt diese Last über die Zeit und lädt nur, was wirklich gebraucht wird.

Lazy Loading umsetzen: nativ oder per JavaScript

Die native Methode: loading=“lazy“

Die mit Abstand einfachste Variante ist das native HTML-Attribut loading="lazy". Sie ergänzen es bei einem Bild oder iframe, und der Browser übernimmt das verzögerte Laden – ganz ohne zusätzliches JavaScript. Alle modernen Browser (Chrome, Firefox, Safari, Edge) unterstützen es. Die Angabe von width und height ist wichtig, um Layout-Verschiebungen zu vermeiden.

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

<iframe src="einbettung.html" loading="lazy" width="560" height="315"
        title="Eingebetteter Inhalt"></iframe>

Die JavaScript-Lösung mit Intersection Observer

Wer mehr Kontrolle über den Ladezeitpunkt braucht – etwa für CSS-Hintergrundbilder, die das native Attribut nicht erfasst –, nutzt die Intersection Observer API. Sie meldet, sobald ein beobachtetes Element in den sichtbaren Bereich rückt:

const beobachter = new IntersectionObserver((eintraege, observer) => {
  eintraege.forEach(eintrag => {
    if (eintrag.isIntersecting) {
      const img = eintrag.target;
      img.src = img.dataset.src;   // echtes Bild laden
      observer.unobserve(img);
    }
  });
}, { rootMargin: "200px" });        // 200px Vorlauf

document.querySelectorAll("img.lazy").forEach(img => beobachter.observe(img));

Der Parameter rootMargin bestimmt den Vorlauf: Bilder beginnen zu laden, bevor sie sichtbar werden, damit sie rechtzeitig fertig sind. Für Nutzer ohne JavaScript empfiehlt sich ein <noscript>-Fallback mit dem regulären Bild.

content-visibility: die moderne Ergänzung

Eine neuere CSS-Eigenschaft geht über das Laden hinaus: content-visibility: auto erlaubt dem Browser, das Rendering nicht sichtbarer Bereiche komplett zu überspringen. In Kombination mit contain-intrinsic-size (das den Platz reserviert) entlastet das vor allem sehr lange Seiten:

.abschnitt {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px; /* geschätzte Höhe reservieren */
}

Lazy Loading und die Core Web Vitals

Die Bedeutung von Lazy Loading für SEO hängt eng mit den Core Web Vitals zusammen – den drei Kennzahlen, die Google seit 2021 als Teil des Page-Experience-Signals im Ranking berücksichtigt. Lazy Loading wirkt sich vor allem positiv auf die Ladezeit aus.

Korrekt eingesetzt verbessert Lazy Loading den Largest Contentful Paint (LCP), weil die initiale Ladelast sinkt und der Browser sich auf die sichtbaren Inhalte konzentrieren kann. Über definierte Bildabmessungen schützt es zugleich den Cumulative Layout Shift (CLS). Wichtig zur Einordnung: Die dritte Kennzahl Interaction to Next Paint (INP) hat im März 2024 das frühere First Input Delay (FID) ersetzt und misst die Reaktionsfähigkeit über die gesamte Sitzung – sie ist die am häufigsten verfehlte Core Web Vital.

Der häufigste Fehler: das LCP-Bild lazy laden

Das sichtbare Hauptbild sollte stattdessen mit hoher Priorität sofort geladen werden. Dafür gibt es das Attribut fetchpriority="high", idealerweise kombiniert mit einem Preload-Hinweis im <head>:

<!-- Hero-Bild (LCP): sofort, mit hoher Priorität -->
<img src="hero.jpg" alt="Hero" width="1200" height="600" fetchpriority="high">

<!-- Bild unterhalb der Falz: verzögert -->
<img src="inhalt.jpg" alt="Inhalt" width="800" height="600" loading="lazy">

Best Practices für Lazy Loading

Above-the-Fold-Inhalte ausschließen

Der wichtigste Grundsatz: Inhalte, die sofort sichtbar sind (Above the Fold), sollten niemals lazy geladen werden. Dazu zählen Hero-Bilder, Header-Grafiken und das erste Content-Bild. Eine gute Faustregel: Alles, was in den ersten rund 600 bis 800 Pixeln der Seite erscheint, wird sofort geladen.

Bildabmessungen für ein stabiles Layout

Jedes Bild sollte explizite width– und height-Attribute besitzen. So reserviert der Browser den Platz, bevor das Bild geladen ist, und es entstehen keine Layout-Verschiebungen (CLS). Alternativ lässt sich in CSS mit aspect-ratio arbeiten:

.lazy-bild {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;   /* reserviert den Platz, verhindert Layout-Shift */
}

Responsive Bilder kombinieren

Besonders effektiv ist die Kombination von Lazy Loading mit responsive images über srcset und sizes. So wird nicht nur das Laden verzögert, sondern auch die passende Bildgröße für das jeweilige Gerät ausgeliefert – das spart auf Mobilgeräten zusätzlich Datenvolumen.

Lazy Loading für verschiedene Inhalte

Bilder und moderne Formate

Bilder sind der wichtigste Anwendungsfall, da sie oft den größten Teil der Datenmenge ausmachen. Den Effekt verstärken moderne Formate: WebP komprimiert spürbar besser als JPEG bei gleicher Qualität, AVIF geht teils noch weiter. Die Kombination aus modernem Format, responsive images und Lazy Loading senkt die Datenmenge erheblich.

Videos: die Facade-Technik

Eingebettete Videos von YouTube oder Vimeo laden oft mehrere hundert Kilobyte, selbst wenn der Nutzer sie nie abspielt. Eine wirkungsvolle Lösung ist die Facade-Technik: Statt des vollständigen Embeds zeigt die Seite zunächst nur ein leichtes Vorschaubild und lädt das eigentliche Video erst beim Klick:

<div class="video-platzhalter" data-video-id="VIDEO_ID">
  <img src="vorschau.jpg" alt="Video-Titel" loading="lazy" width="560" height="315">
  <button class="play">Video abspielen</button>
</div>
<!-- erst beim Klick wird das echte iframe-Embed nachgeladen -->

iframes und Hintergrundbilder

iframes lassen sich direkt mit dem nativen loading="lazy" verzögern. CSS-Hintergrundbilder hingegen werden vom nativen Lazy Loading nicht erfasst, da sie nicht über <img>-Tags eingebunden sind – hier ist die zuvor gezeigte Intersection-Observer-Lösung nötig. In JavaScript-Frameworks wie React lässt sich Lazy Loading zusätzlich über dynamische Importe und Suspense nutzen, um ganze Komponenten erst bei Bedarf nachzuladen.

Lazy Loading in WordPress

WordPress unterstützt Lazy Loading seit Version 5.5 (veröffentlicht im August 2020) nativ und fügt das Attribut loading="lazy" automatisch zu Bildern und iframes hinzu. Spätere Versionen haben die Heuristik verbessert, sodass die ersten Bilder einer Seite vom Lazy Loading ausgenommen werden, um den LCP nicht zu verschlechtern. Für die meisten Websites ist diese native Lösung ausreichend und benötigt kein zusätzliches Plugin.

Lazy-Loading-Plugins

Für höhere Ansprüche bieten Performance-Plugins erweiterte Funktionen. Beliebt sind WP Rocket (umfassende Performance-Suite), Perfmatters (leichtgewichtig mit präzisen Kontrollen) und Smush (kombiniert Lazy Loading mit Bildkompression). Wichtig: Installieren Sie nicht mehrere Lazy-Loading-Plugins gleichzeitig, da dies zu Konflikten führt.

Performance messen

Die Implementierung ist nur der erste Schritt – die Wirkung sollten Sie messen. Bewährte Werkzeuge:

Vor- und Nachteile von Lazy Loading

Fazit

Lazy Loading sollte auf jeder modernen Website implementiert sein. Für die meisten Seiten ist das native loading="lazy" – in WordPress automatisch aktiv – die beste Wahl: einfach, zuverlässig und von Google empfohlen. Entscheidend ist die korrekte Anwendung: Inhalte unterhalb der Falz verzögern, das sichtbare LCP-Bild dagegen sofort und mit fetchpriority="high" laden, und bei jedem Bild feste Abmessungen angeben. So profitieren Ladezeit, Core Web Vitals und letztlich Rankings und Conversions – ohne die Nutzererfahrung zu beeinträchtigen.