Lazy Loading korrekt
Lazy Loading spart Bandbreite, darf aber nicht den Start blockieren.
Das Thema dieser Seite: Lazy Loading muss unterhalb der Falz genutzt werden, ohne wichtige Inhalte zu verzögern.
Inhalt
Inhaltsverzeichnis
Klicke auf einen Abschnitt, um direkt dorthin zu springen.
Check
Der Check bewertet, ob Bilder unterhalb der Falz mit loading="lazy" ausgeliefert werden
und ob Above-the-fold Inhalte korrekt eager geladen werden.
| Prüfpunkt | Bedeutung | Bewertung |
|---|---|---|
| Lazy Loading unterhalb der Falz | Spart Daten und Zeit | OK |
| Hero wird lazy geladen | Startinhalt spät sichtbar | Kritisch |
| Viele Bilder ohne Lazy Loading | Unnötige Requests | Warnung |
Kontext & Problemraum
Lazy Loading wird oft aktiviert, um Seiten mit vielen Medien zu beschleunigen. Fehler entstehen, wenn zu aggressiv geladen wird oder wichtige Bilder verzögert erscheinen.
| Situation | Symptom | Risiko |
|---|---|---|
| Landingpage mit Hero-Visual | Hero erscheint spät | Schlechter LCP |
| Kategorieseite mit vielen Karten | Alle Bilder laden sofort | Zu viele Requests am Start |
| Lazy Loading per JS | Bilder werden gar nicht geladen | Broken UI und Crawling-Probleme |
Entscheidungslogik
Wann Lazy Loading sinnvoll ist und wann nicht.
| Wenn | Dann | Empfehlung |
|---|---|---|
| Bild im sichtbaren Bereich | Startinhalt | loading="eager" und ggf. fetchpriority="high" |
| Bild unterhalb der Falz | Nicht sofort sichtbar | loading="lazy" nutzen |
| Slider/Carousel | Nur erstes Bild sichtbar | Erstes eager, Rest lazy |
Erklärende Details
Native Lazy Loading funktioniert im Browser ohne JavaScript. Wichtig ist die klare Trennung zwischen sichtbaren und nicht sichtbaren Bildern.
Beispiel für korrektes Lazy Loading
<img src="/img/kategorie.jpg" alt="Kategorie" width="600" height="400" loading="lazy" />Beispiel für Hero-Bild
<img src="/img/hero.jpg" alt="Hero" width="1200" height="680" loading="eager" fetchpriority="high" />Risiken, Grenzen & Einschränkungen
| Risiko | Folge | Gegenmaßnahme |
|---|---|---|
| Hero-Image lazy geladen | Schlechter LCP | Hero immer eager laden |
| JS-Lazy-Loader blockiert Bilder | Assets fehlen im Render | Native Lazy Loading bevorzugen |
| Zu viele eager Bilder | Start wird überladen | Nur sichtbare Bilder eager setzen |
Interne Vernetzung
Verwandte Checks: LCP Proxy, width/height gesetzt, Bilder nicht zu groß.