Lazy Loading mit HTML-Attribut „loading“

Dank eines HTML-Attributs wird das Lazy Loading von Elementen einer Webseite zum Kinderspiel.

Die Ladegeschwindigkeit ist seit langem einer der Usabilityfaktoren einer Webseite. Wer im Internet unterwegs ist, will seine Inhalte sofort angezeigt bekommen und nicht noch „ewig“ warten, bis ein Bild oder ein Video geladen ist. Und man ist inzwischen verwöhnt, denn eine Sekunde gilt in diesem Fall schon als Ewigkeit.

Was ist eigentlich Lazy Loading?

Das Prinzip des Lazy Loading kann man am besten als ein Prinzip des verzögerten Ladens beschreiben. Bilder werden dabei nicht im Zufallsprinzip geladen, so das eine Grafik am Ende der Seite zum Beispiel schon angezeigt wird, eine Grafik ganz oben aber noch nicht. Beim Lazy Loading werden vereinfacht ausgedrückt Bilder erst dann (nach-)geladen, wenn sie auch auf dem Bildschirm angezeigt werden sollen.

Lange mussten Webdesigner dabei auf mehr oder weniger gut funktionierende Scripte zurückgreifen, doch inzwischen funktioniert es viel einfacher, dank des HTML-Attributes loading. Die kann zum Beispiel bei Grafiken eingebunden werden:

<img src="bild.jpg" alt="Bildname" loading="lazy" >

Und das Beste, es funktioniert nicht nur bei Bildern, sondern auch bei externen Inhalten, die über iframe eingebunden werden:

<iframe src="https://internetadresse.de" width="300px" height="220px" loading="lazy" >

Die Sache hat natürlich dennoch einen Hacken, der Browser muss dieses Attribute unterstützen. Bei modernen Egde- und Chrome-Browsern ist das ebenso wenig ein Problem wie mit Opera. Firefox hingegen unterstützt das Attribute nur teilweise, Safari noch gar nicht. Da aber mit Chrome und Edge die große Mehrheit abgedeckt ist, lohnt sich der Einsatz natürlich auf alle Fälle.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.