Lazy Loading

Webdesign & UX

Lazy Loading bedeutet, dass Bilder, Videos und eingebettete Inhalte erst geladen werden, wenn sie in den sichtbaren Bereich rücken. Der Browser holt beim Seitenaufbau also nur, was tatsächlich zu sehen ist, statt alles auf einmal.

Der Gewinn ist bei bildlastigen Seiten erheblich. Eine Seite mit dreißig Fotos lädt anfangs vielleicht drei davon, der Rest folgt beim Scrollen. Das senkt die übertragene Datenmenge, entlastet mobile Verbindungen und verbessert die Ladezeit spürbar.

Eine Ausnahme ist wichtig: Das große Bild ganz oben, meist das Hero-Bild, darf nicht verzögert geladen werden. Es ist in der Regel das Element, an dem Google den Largest Contentful Paint misst. Wer es verzögert, verschlechtert genau den Wert, den er verbessern wollte.

Moderne Browser beherrschen Lazy Loading nativ über ein Attribut am Bild, ein Plugin ist dafür nicht nötig. Wichtig bleibt, für jedes Bild Breite und Höhe anzugeben, sonst springt das Layout beim Nachladen.

Zurück zum Glossar