Lazy Loading nur für Inhalte außerhalb des sichtbaren Bereichs

Cookbook: Ziel und Ergebnis

Nur Bilder und Iframes außerhalb des anfänglichen Viewports werden verzögert. Logo, Hero und wahrscheinliches LCP bleiben früh verfügbar.

Rezept: Schritt für Schritt

1. Für Mobil und Desktop markieren, welche Medien im ersten Viewport sichtbar sind.
2. Above-the-fold-Bilder auf eager/normal belassen; nachfolgende Medien mit nativem loading="lazy" laden.
3. Keine JavaScript-Lazy-Load-Bibliothek zusätzlich einsetzen, wenn natives Laden und WordPress genügen.
4. Lange Seiten scrollend testen; Platzreservierung, Galerie, Slider, Druckansicht und deaktiviertes JavaScript berücksichtigen.

Rechenweg oder Entscheidungsregel

Entscheidungsregel: Liegt die Oberkante des Elements innerhalb ungefähr eines bis zwei Viewports nach Start, kann zu aggressives Lazy Loading sichtbare Verzögerung erzeugen. Browser-Heuristiken variieren – Wasserfall messen.

Praxisbeispiel

Artikel mit 20 Bildern: Hero und erstes Inhaltsbild eager, weitere 18 lazy. Bei durchschnittlich 180 kB pro Bild werden im Erstaufruf bis zu 3,2 MB aufgeschoben. Ein Logo von 12 kB zu verzögern bringt wenig und kann Flackern erzeugen.

Prüfen, ob es funktioniert

• Kein LCP-Element trägt loading="lazy".
• Beim normalen Scrollen erscheinen Bilder rechtzeitig und ohne Layoutsprung.
• Initiale Requests/Bytes sinken, während LCP und INP nicht schlechter werden.

Rollback

Zuletzt geänderte loading-Attribute oder Pluginoption zurücksetzen und Caches leeren. Bei verschwundenen Bildern zuerst JavaScript-Lazy-Loader deaktivieren, natives Markup wiederherstellen.

Geeignete Kandidaten

Bilder und Iframes deutlich unterhalb des initial sichtbaren Bereichs können mit loading="lazy" später geladen werden. WordPress ergänzt das Attribut kontextabhängig und lässt frühe Bilder zunehmend gezielt aus.

Nicht lazy laden

LCP-/Hero-Bilder, Logos im sichtbaren Kopfbereich und für die erste Interaktion nötige Inhalte sollten sofort auffindbar sein. Pauschale JavaScript-Lazyloader, die echte src-Attribute verstecken, behindern den Browser-Preload-Scanner.

Layout stabil halten

Auch lazy geladene Medien brauchen width/height oder ein CSS-Seitenverhältnis, damit Platz reserviert bleibt. Sonst sinkt zwar der Transfer, aber CLS steigt.

Erfolgskontrolle

Prüfe Netzwerk-Wasserfall und Scrollverhalten auf langsamem Mobilnetz. Bilder dürfen beim Annähern ohne sichtbares Nachladen erscheinen; das LCP-Bild muss weiterhin früh starten.

Quellen und Prüfstand

• WordPress 6.4: Ladeoptimierung
• Google: LCP optimieren

Inhalt fachlich geprüft am 17. August 2026. Konkrete Werte sind Ausgangspunkte, keine Universaldosierung.