Angenommen, Ihre Seite hat 20 Bilder, aber ein Besucher sieht zunächst nur die ersten 2. Warum sollte der Browser dann alle 20 gleichzeitig herunterladen? Genau dieses Problem löst Lazy Loading.
Was passiert ohne Lazy Loading?
Der Browser lädt alle Bilder herunter, sobald die Seite geladen wird. Auch die Fotos ganz unten, die der Besucher vielleicht nie sieht. Das Ergebnis:
- Langsame anfängliche Ladezeit (der Besucher wartet auf alles)
- Verschwendete mobile Daten (Bilder, die nie angesehen wurden)
- Schlechter PageSpeed-Wert
Was bewirkt Lazy Loading?
Mit Lazy Loading lädt der Browser nur die Bilder, die sichtbar sind (oder gleich ins Bild kommen). Sobald der Besucher nach unten scrollt, werden die nächsten Bilder 'gerade rechtzeitig' nachgeladen.
Vorteile:
- Schnellere anfängliche Ladezeit, weil weniger heruntergeladen wird
- Weniger Datenverbrauch für mobile Besucher
- Bessere PageSpeed- und LCP-Werte
- Hört ein Besucher auf halber Strecke auf zu scrollen: noch weniger verschwendete Daten
Wann Sie NICHT lazy loaden sollten
Wichtig: Das Hero-Bild oben auf der Seite NIE lazy loaden. Es muss sofort geladen werden, denn es ist meist Ihr LCP-Element (Largest Contentful Paint, also das größte sichtbare Element beim Laden). Wenn Sie es lazy laden, verschlechtert sich Ihr LCP-Wert sogar.
Faustregel: die ersten 1-2 Bilder 'eager' (sofort), alle übrigen 'lazy'.
Wie aktivieren Sie Lazy Loading?
Seit 2020 gibt es ein natives HTML-Attribut: loading="lazy". Ihr Webdesigner fügt es dem Bild-Tag hinzu:
<img src="foto.jpg" alt="..." loading="lazy">
In WordPress: Seit Version 5.5 (2020) ist Lazy Loading standardmäßig aktiv. Neue Bilder erhalten automatisch das Attribut loading="lazy". Für Websites von vor 2020 können Sie ein Plugin wie a3 Lazy Load oder WP Rocket verwenden.
Wie prüfen Sie, ob es aktiv ist?
Klicken Sie mit der rechten Maustaste auf ein Bild auf Ihrer Seite (nicht das Hero-Bild), wählen Sie 'Untersuchen' und schauen Sie im Code, ob beim img-Tag loading="lazy" steht. Wenn ja: perfekt. Wenn nein: Wenden Sie sich an Ihren Webdesigner.