Zum Inhalt springen
checkfrei
Menü

Lazy Loading für Bilder: richtig einbauen, ohne den LCP zu bremsen

Stand: 3. Oktober 2026 · CAZ Labs

Kurz gesagt

Lazy Loading heißt: Bilder weiter unten lädt der Browser erst, wenn jemand in ihre Nähe scrollt. Dafür reicht das Attribut `loading="lazy"` am `<img>`. Das Hauptbild im ersten sichtbaren Bereich bekommt es ausdrücklich nicht, sonst wird die Seite langsamer statt schneller.

Warum das wichtig ist

Ohne Lazy Loading lädt der Browser beim Öffnen alle Bilder der Seite, auch die Referenzgalerie ganz unten, die vielleicht nie jemand sieht. Diese Bilder teilen sich die Leitung mit dem, was oben gerade gebraucht wird. Auf dem Handy im Mobilfunknetz kostet das Zeit und Datenvolumen.

Mit loading="lazy" holt der Browser solche Bilder erst kurz bevor sie ins Bild scrollen. Das funktioniert in allen gängigen Browsern, ganz ohne JavaScript-Bibliothek.

Wichtig: Das Hauptbild oben darf nicht lazy laden. Ein Bild mit loading="lazy" fordert der Browser erst an, wenn das Layout steht und klar ist, dass es sichtbar ist. Beim großen Titelbild verliert er dadurch wertvolle Zeit, und genau dieses Bild bestimmt meist den Largest Contentful Paint. Lazy Loading am falschen Bild macht die Seite also messbar langsamer. Das Hauptbild bekommt stattdessen fetchpriority="high".

So prüfst du es selbst

checkfrei schaut bei jedem kostenlosen Check nach: Hat die Seite mehr als fünf Bilder, erwarten wir an mindestens einem Teil davon loading="lazy". Fehlt es überall, gibt es eine Warnung. Bei fünf oder weniger Bildern gibt es keine.

Wir suchen gezielt nach dem Attribut. Lädt deine Seite Bilder per JavaScript nach (erkennbar an Attributen wie data-src statt src), funktioniert das zwar, der Check erkennt es aber nicht. Ein Grund mehr, auf die eingebaute Variante umzusteigen.

  1. Quelltext öffnen (Strg+U) und nach loading="lazy" suchen.
  2. Prüfen, dass das erste große Bild der Seite das Attribut nicht hat.
  3. Im Tab Netzwerk der Entwicklertools den Filter Img wählen und die Seite neu laden. Bilder weiter unten sollten erst beim Scrollen in der Liste auftauchen.

So behebst du es

HTML

Gib jedem Bild width und height mit. Sonst weiß der Browser nicht, wie viel Platz er freihalten soll, und der Inhalt springt beim Nachladen. Das misst Google als Layout-Verschiebung. loading="lazy" funktioniert übrigens auch bei <iframe>, etwa für eine Anfahrtskarte weiter unten.

html
<!-- Hauptbild oben: sofort und mit Vorrang laden -->
<img src="/bilder/titel.webp" alt="Werkstatt von außen" width="1600" height="900" fetchpriority="high">

<!-- alle Bilder weiter unten -->
<img src="/bilder/referenz-1.webp" alt="Neues Bad in Traunstein" width="800" height="600" loading="lazy">

WordPress

WordPress setzt loading="lazy" seit Version 5.5 selbst an Bilder im Inhalt. Seit 6.3 versucht es außerdem, das erste große Bild auszunehmen und mit fetchpriority="high" zu markieren. Bei Page-Buildern, Slidern und Titelbildern aus dem Theme klappt diese Erkennung nicht immer.

  1. Im Quelltext nachsehen, ob das Titelbild oben loading="lazy" trägt. Wenn ja, ist es falsch markiert.
  2. In WP Rocket, Perfmatters und ähnlichen Plugins kannst du einzelne Bilder vom Lazy Loading ausnehmen, meist über den Dateinamen oder eine CSS-Klasse.
  3. Nutzt ein Plugin noch eine eigene JavaScript-Lösung, stell es auf das eingebaute Lazy Loading um, falls es diese Option anbietet. Zwei Lösungen gleichzeitig braucht niemand.

Shopify

In Shopify-Themes setzt du das Attribut über den Filter image_tag. Viele aktuelle Themes machen das schon. Prüf es trotzdem im Quelltext, besonders bei gekauften Themes und Galerie-Apps. Fürs Titelbild schreibst du loading: 'eager'.

liquid
{{ section.settings.bild | image_url: width: 800 | image_tag: loading: 'lazy' }}

Next.js

next/image lädt Bilder standardmäßig lazy. Fürs Hauptbild oben schaltest du das ab, mit loading="eager" und fetchPriority="high" oder, je nach Version, mit der Eigenschaft priority.

Typische Fehler

  • Alles lazy, auch das Titelbild. Bringt im Check ein Häkchen und kostet beim LCP Zeit.
  • Logo und Bilder im Kopfbereich lazy laden. Alles, was ohne Scrollen sichtbar ist, lädt normal.
  • Bilder ohne Breite und Höhe. Lazy geladene Bilder ohne feste Maße lassen den Text beim Scrollen springen.
  • Hintergrundbilder vergessen. Bilder aus dem CSS (background-image) kennen kein loading-Attribut. Gibt es dort viele große, ist ein echtes <img> oft die bessere Lösung.

So prüft checkfrei

Bei mehr als fünf Bildern erwarten wir loading="lazy" an mindestens einem Teil davon. Sonst gibt es eine Warnung.

Gewicht 1 von 3 im Bereich Ladezeit.

Häufige Fragen

Schadet Lazy Loading der SEO?

Mit dem eingebauten loading="lazy" nicht, Google findet die Bilder trotzdem. Probleme machen eher ältere JavaScript-Lösungen, die Bilder erst beim Scrollen einsetzen, denn der Googlebot scrollt nicht wie ein Mensch.

Welche Bilder sollten nicht lazy geladen werden?

Alle, die ohne Scrollen sichtbar sind: Titelbild, Logo, das erste Produktbild. Im Zweifel nimmst du die ersten ein bis zwei Bilder aus. Das größte davon bekommt zusätzlich fetchpriority="high".

Brauche ich für Lazy Loading ein Plugin?

Für Bilder nicht mehr. Das Attribut versteht jeder aktuelle Browser, und WordPress setzt es selbst. Ein Plugin lohnt sich nur, um einzelne Bilder gezielt auszunehmen oder Videos und Hintergründe nachzuladen.

Jetzt deine Seite prüfen

checkfrei prüft Lazy Loading und 68 weitere Punkte in einem Durchgang. Kostenlos und ohne Anmeldung.