Lazy Loading ist eine Technik, bei der nicht sofort benötigte Inhalte verzögert geladen werden. Besonders Bilder und iFrames außerhalb des sichtbaren Bereichs können dadurch erst dann abgerufen werden, wenn sie voraussichtlich bald gebraucht werden.
Wie funktioniert Lazy Loading?
Ohne Lazy Loading kann ein Browser zahlreiche Bilder bereits beim ersten Seitenaufruf herunterladen, obwohl sich viele davon weit unterhalb des sichtbaren Bereichs befinden.
Mit Lazy Loading wartet der Browser bei geeigneten Ressourcen. Erst wenn Du Dich dem entsprechenden Bereich durch Scrollen näherst, wird der Download gestartet. Dadurch sinkt vor allem zu Beginn die übertragene Datenmenge.
Natives Lazy Loading mit HTML
Moderne Browser unterstützen Lazy Loading direkt für Bilder und iFrames. Bei Bildern genügt beispielsweise das Attribut loading="lazy" am <img>-Element. Für iFrames funktioniert dasselbe Prinzip.
Der Wert eager bedeutet dagegen, dass die Ressource ohne diese Verzögerung geladen werden soll.
Für viele Standardfälle brauchst Du deshalb keine eigene JavaScript-Bibliothek mehr.
Welche Vorteile hat Lazy Loading?
Die Website muss beim ersten Aufruf weniger Dateien übertragen. Dadurch werden Netzwerk und Browser entlastet.
Besonders lange Seiten mit vielen Bildern profitieren davon. Wenn eine Person die Seite nur teilweise liest, werden manche weit unten liegenden Ressourcen möglicherweise überhaupt nicht benötigt.
Lazy Loading kann damit sowohl Ladezeit als auch übertragenes Datenvolumen reduzieren.
Wann ist Lazy Loading problematisch?
Nicht jedes Bild sollte verzögert geladen werden. Ein großes Titelbild, das sofort im sichtbaren Bereich erscheint und als Largest Contentful Paint dient, sollte normalerweise früh geladen werden.
Wird ein solches Element künstlich zurückgestellt, kann sich der LCP verschlechtern. Lazy Loading ist deshalb hauptsächlich für Inhalte gedacht, die beim ersten Aufruf außerhalb des Viewports liegen.
Auch feste Breiten- und Höhenangaben für Bilder sind sinnvoll. Sie helfen dem Browser, bereits vor dem Download Platz einzuplanen und unerwartete Layoutverschiebungen zu vermeiden.
Lazy Loading mit JavaScript
Bevor Browser natives Lazy Loading breit unterstützten, wurde die Funktion meist mit JavaScript umgesetzt. Dafür kann beispielsweise die Intersection Observer API feststellen, wann sich ein Element dem sichtbaren Bereich nähert.
Eigene JavaScript-Lösungen sind weiterhin sinnvoll, wenn Du komplexere Ladebedingungen benötigst. Für normale Bilder oder iFrames reicht die native Browserfunktion jedoch oft aus.
Bedeutung für SEO und Performance
Richtig eingesetztes Lazy Loading kann Performance verbessern, ohne wichtige Inhalte zu verstecken. Entscheidende Seiteninhalte sollten trotzdem zuverlässig erreichbar und nicht von unnötig komplizierten Benutzeraktionen abhängig sein.
Besonders wichtig ist die richtige Priorisierung: Inhalte im sichtbaren Bereich früh laden, weiter unten liegende Ressourcen bei Bedarf nachholen.
Häufige Fragen
Was ist Lazy Loading?
Lazy Loading bedeutet, dass nicht sofort benötigte Inhalte erst später geladen werden, wenn sie sich dem sichtbaren Bereich nähern oder tatsächlich benötigt werden.
Wie aktiviert man Lazy Loading bei Bildern?
Bei modernen Browsern kannst Du einem Bild das HTML-Attribut loading=’lazy‘ geben. Der Browser entscheidet dann, wann er die Ressource nachlädt.
Sollte jedes Bild Lazy Loading verwenden?
Nein. Wichtige Bilder im direkt sichtbaren Bereich sollten normalerweise früh geladen werden, besonders wenn sie das LCP-Element der Seite sind.
