Lazy Load Bilder 2026: Schnellere Seiten ohne LCP-Schäden

Zuletzt aktualisiert: June 28, 2026

Lazy loading hilft, seitenintensive Seiten schneller erscheinen zu lassen, da der Browser bei der ersten Darstellung die Anfragen für Bilder unterhalb des sichtbaren Bereichs überspringen kann. Wird es unbedacht eingesetzt, kann es auch das Laden eines Bildes verzögern, das Benutzer sofort benötigen: das Hero-Bild, das Hauptproduktbild oder das Artikelcover, das zum Largest Contentful Paint Element wird.

Dieser Leitfaden zeigt, wo man natives loading="lazy" verwenden sollte, wann Bilder "eager" (sofort) geladen bleiben sollten und wie man lazy-geladene Bilder veröffentlicht, ohne Core Web Vitals, SEO oder die CDN-Bereitstellung zu beeinträchtigen.

Kurzantwort: Wie sollten Sie Bilder lazy laden?

Verwenden Sie Lazy Loading nur für Bilder, die außerhalb des ersten Viewports beginnen. Lassen Sie das wahrscheinliche LCP-Bild sofort laden (eager), reservieren Sie Breite und Höhe für jedes Bild und stellen Sie responsive WebP- oder AVIF-Dateien über eine cachefähige CDN URL bereit.

Für reines HTML ist die einfachste Implementierung loading="lazy" auf below-fold <img> Elementen. Fügen Sie es keinem Hero-Bild, einem Hauptproduktbild, dem ersten sichtbaren Artikelbild oder irgendeinem Bild hinzu, das vor dem Scrollen des Benutzers erscheinen muss.

Im Zweifelsfall testen Sie die Seite in Lighthouse oder Chrome DevTools. Wenn ein lazy geladenes Bild als LCP Element gemeldet wird, entfernen Sie das Lazy Loading von diesem Bild und ziehen Sie fetchpriority="high" in Betracht.

Was ändert Lazy Loading eigentlich?

Lazy Loading ändert den Zeitpunkt der Anfragen. Der Browser kann warten, um ein Bild herunterzuladen, bis der Benutzer nah genug ist, um es zu sehen. Das spart Bandbreite auf langen Seiten, reduziert den anfänglichen Anfragendruck und gibt CSS, Schriftarten, Skripte und dem sichtbaren Bild eine bessere Chance, zuerst fertig zu werden.

Es macht überdimensionierte Bilder nicht klein. Ein 2400 px JPEG ist auch nach dem Laden immer noch verschwenderisch. Kombinieren Sie Lazy Loading von Anfang an mit Größenanpassung (Resizing), Komprimierung und responsivem Markup. Der Image Compression Deep Dive behandelt die Byte-Reduzierung, während der Mobile Image Optimization Guide srcset und mobile Anzeigegrößen abdeckt.

Die native Browserfunktion wird von MDN als die loading-Eigenschaft auf Bildern und iframes in HTMLImageElement.loading dokumentiert. Für moderne Seiten ist es vor der Hinzufügung einer JavaScript Lazy-Loading Bibliothek besser, diese Browserfunktion zu bevorzugen.

Welche Bilder sollten nicht lazy geladen werden?

Lazy laden Sie keine Bilder, die den ersten Eindruck der Seite definieren. Der häufige Fehler ist, loading="lazy" auf jedes Bild in einem CMS Template anzuwenden, weil es wie ein universelles Performance-Fix aussieht.

Behalten Sie diese Bilder sofort ladend (eager):

1. Das Haupt-Hero-Bild.
2. Das Produktbild über dem Kauf-Button.
3. Das erste Bild in einem Artikel, wenn es auf mobilen Geräten nahe am oberen Rand erscheint.
4. Ein Logo oder ein Interface-Screenshot, das vor der Interaktion sichtbar sein muss.
5. Jedes Bild, das Chrome als LCP Element meldet.

Die Richtlinien von Google zu Core Web Vitals behandeln LCP als die Renderzeit des größten sichtbaren Inhaltselements im Viewport; siehe Largest Contentful Paint. Wenn dieses Element ein Bild ist, ist die Verzögerung seiner Anfrage eine der schnellsten Möglichkeiten, die Metrik zu verschlechtern.

Verwenden Sie diese Regel für Templates: Der erste Bildslot sollte standardmäßig eager sein, und spätere wiederholbare Bildblöcke sollten standardmäßig lazy sein. Überschreiben Sie dies dann je nach Seitentyp, wenn mobile Screenshots einen anderen ersten Viewport zeigen.

Wie implementiere ich Lazy Loading in HTML?

Verwenden Sie zuerst natives Markup:

<img
  src="/images/gallery-chair.webp"
  alt="Walnusshocker fotografiert von vorne für eine Produktgalerie"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async"
>

Die Attribute width und height sind genauso wichtig wie loading. Sie lassen dem Browser Platz reservieren, bevor die Datei eintrifft. Ohne reservierten Platz kann ein verzögertes Bild den Text nach unten drücken und einen Cumulative Layout Shift verursachen.

Für responsive Bilder behalten Sie das Lazy Loading beim Fallback <img> bei:

<picture>
  <source type="image/avif" srcset="/images/gallery-chair-800.avif 800w, /images/gallery-chair-1200.avif 1200w">
  <source type="image/webp" srcset="/images/gallery-chair-800.webp 800w, /images/gallery-chair-1200.webp 1200w">
  <img
    src="/images/gallery-chair-1200.webp"
    alt="Walnusshocker fotografiert von vorne für eine Produktgalerie"
    width="1200"
    height="800"
    sizes="(max-width: 700px) 92vw, 680px"
    loading="lazy"
  >
</picture>

Für das wahrscheinliche LCP-Bild verwenden Sie das Gegenteilmuster:

<img
  src="/images/product-hero.webp"
  alt="Walnusslounge-Sessel mit grünem Kissen auf weißem Studiohintergrund"
  width="1600"
  height="1000"
  fetchpriority="high"
>

Google's Artikel zu browser-level image lazy loading empfiehlt natives Lazy Loading und warnt davor, dass Bilder im ersten sichtbaren Viewport normal geladen werden sollten. Dieser Rat ist immer noch die sauberste Basis für Veröffentlichungen 2026.

Wie wirkt sich Lazy Loading auf SEO aus?

Lazy Loading ist SEO-sicher, wenn wichtige Inhalte in der gerenderten Seite weiterhin auffindbar sind. Google kann modernen JavaScript verarbeiten, aber das Image SEO wird schwächer, wenn die endgültige Bild-URL hinter Interaktion, einem Scroll-only Skript, Cookies oder einem fehlerhaften Platzhalter verborgen ist.

Verwenden Sie normales <img> oder <picture> Markup für Inhaltsbilder. Behalten Sie beschreibenden alt Text, crawlbare CDN URLs und umgebende Texte bei, die das Bild erklären. Der Image SEO Guide 2026 behandelt den breiteren Crawl- und Alt-Text-Workflow.

Google Search Central's JavaScript SEO Leitfaden für Lazy Loading besagt, dass Inhalte sichtbar im Viewport geladen werden sollten und nicht von Benutzeraktionen wie Klicken oder Tippen abhängen; siehe Fix lazy-loaded content. Das ist eine nützliche Richtlinie für Bildergalerien, Tabs und Infinite Scroll Seiten.

Wie viel Performance kann Lazy Loading sparen?

Die Einsparungen hängen davon ab, wie viele Bilder unterhalb des ersten Viewports liegen und wie groß diese Dateien sind. Bei einem langen Artikel kann ein Browser vermeiden, die meisten Body-Bilder beim anfänglichen Laden herunterzuladen. Bei einer kurzen Produktseite mit einem sichtbaren Foto kann Lazy Loading fast nichts sparen.

Ich habe die vier Grafiken in diesem Artikel als lokale WebP-Dateien in der Veröffentlichungsgröße kodiert. Die endgültigen Assets betragen jeweils 25 KB bis 36 KB, daher verbirgt Lazy Loading hier kein riesiges Byte-Problem. Der größere Gewinn kommt aus dem Anfragetiming: Das Cover ist sofort verfügbar und die späteren Diagramme können warten, bis der Leser scrollt.

Verwenden Sie diese Reihenfolge, bevor Sie Lazy Loading beschuldigen:

1. Passen Sie das Quellbild auf die größte tatsächliche Anzeigefläche an.
2. Konvertieren Sie Fotos und gemischte Grafiken zu WebP oder AVIF.
3. Fügen Sie srcset und sizes für mobile Layouts hinzu.
4. Reservieren Sie Bilddimensionen oder das Seitenverhältnis.
5. Lassen Sie das LCP-Bild sofort laden (eager).
6. Laden Sie nur below-fold Bilder lazy.
7. Veröffentlichen Sie über eine CDN mit langfristigem Caching.
8. Testen Sie die Seite auf einem schmalen mobilen Viewport.

Wenn Sie eine umfassendere Abfolge benötigen, ist die Complete Image Optimization Checklist ein guter letzte Durchgang vor der Veröffentlichung. Für CDN-Regeln und Cache-Header verwenden Sie den Image CDN Guide.

Was sollten Sie vor der Veröffentlichung testen?

Testen Sie die gerenderte Seite, nicht nur den Code. Browser-Schwellenwerte für natives Lazy Loading sind Implementierungsdetails, und eine Seite, die auf dem Desktop funktioniert, kann immer noch das falsche Bild auf einem 390 px mobilen Viewport verzögern.

Führen Sie diese Veröffentlichungsprüfung durch:

• Das Cover oder Hero-Bild lädt eager.
• Das wahrscheinliche LCP-Bild ist nicht mit loading="lazy" markiert.
• Jedes Bild hat width und height oder einen stabilen Seitenverhältnis-Container.
• Below-fold Bilder verwenden loading="lazy".
• Responsive Bilder enthalten realistische sizes-Werte.
• CDN Image URLs geben HTTP 200 zurück.
• Dateinamen beschreiben das sichtbare Bild.
• Alt Text ist spezifisch und nicht mit Keywords überladen.
• Lighthouse oder PageSpeed Insights kennzeichnen das lazy geladene Bild nicht als LCP.
• Ein mobiler Screenshot zeigt keine großen leeren Lücken oder Layoutsprünge.

Für Entwicklungsteams fügen Sie eine Template-Regel hinzu: Nur wiederkehrende Body-Image Komponenten sollten standardmäßig lazy laden. Hero-Komponenten, Hauptproduktmedien und above-the-fold redaktionelle Bilder erfordern eine explizite Entscheidung.

Lazy-Loading Checklist für 2026

Lazy Loading funktioniert am besten als kleiner Teil der Image Pipeline. Es sollte nach Format-, Dimensions-, Prioritäts-, Barrierefreiheits- und CDN-Prüfungen erfolgen.

Bevor Sie veröffentlichen, inspizieren Sie den ersten Viewport und stellen Sie sich eine praktische Frage: Würde die Seite noch Sinn ergeben, wenn jedes below-fold Bild auf das Scrollen warten würde? Wenn ja, hilft Lazy Loading wahrscheinlich. Beginnt die Seite mit einem leeren Hero-Slot, beheben Sie zuerst die Priorität, bevor Sie an irgendetwas anderes rühren.