Lazy Load im Chrome Browser – Wie eure Website damit schneller lädt

Lazy Load beschreibt die Technik, Inhalte mit Verzögerung nachzuladen. Statt also alle Bilder einer Website sofort zu laden, werden erst einmal nur die geladen, die für den Nutzer gerade sichtbar sind. Scrollt er weiter nach unten, werden nach und nach die anderen Grafiken geladen, sobald sie sichtbar werden. Eigentlich ganz clever, nicht wahr?

Eine Sache, die ich aber nie so richtig verstanden habe, war, warum Lazy Load auf der eigenen Website umgesetzt werden musste. Zum einen ist es durchaus aufwändig, ein funktionierendes und dennoch performantes Script zu schreiben, welches übergreifend und schlau funktioniert. Zum anderen müssen die Bilder bzw. die Art, wie sie eingefügt werden, natürlich auch entsprechend angepasst werden. Viel Aufwand also, den bei WordPress zum Glück Plugins übernommen haben.

Allgemein gab es daher in den letzten Jahren viele unterschiedliche Techniken. Mal wurde das Nachladen animiert, mal waren es Platzhalter, die dann via Script gegen die richtigen Bilder ausgetatuscht wurden. Das sorgte dafür, dass Lazy Load hier richtig gut funktionierte, dort aber Probleme im Browser verursachte.

Kurzum: Es war von Anfang an problematisch, so etwas nicht als Standard direkt in den Browser zu integrieren. Genau das ist nun endlich geschehen, denn der Google Chrome kann ab Version 76 endlich Lazy Load. Halleluja!

Lazy Load in Google Chrome

Mit Version 76 ist Lazy Load also endlich im Chrome Browser angekommen und ist somit direkt integriert. Doch wie genau funktioniert Lazy Load im Chrome und wie könnt ihr die Technik für eure Website nutzen? Eigentlich ist das ganz einfach.

Für WordPress wird es früher oder später ein entsprechendes Plugin geben, da bin ich mir sicher. Alternativ werden Bilder einfach per Hand angepasst. Das ist nicht schwer, es erfordert im Grunde nur ein weiteres Attribut innerhalb des Image-Tags. Drei mögliche Werte sind es, die Google dafür zu Verfügung stellt.

• lazy – Lädt Bilder erst bei Bedarf
• eager – Lädt Bilder direkt beim Seitenaufruf
• auto – Der Browser entscheidet über Lazy Load

Das Lazy Load gilt dabei nicht nur für Bilder, auch iFrames (also Videos) können so verzögert geladen werden. Bei Videos, die sich innerhalb einer Website befinden, scheint das auch fast noch wichtiger zu sein. So sieht der Code dann aus.

#Lazy Load für Bilder
<img alt="" loading="lazy" src="bild.jpg">

#Lazy Load für iFrames
<iframe loading="lazy" src="video.mp4"></iframe>

Wann und wie nutzen?

Im Grunde würde ich euch immer empfehlen, für das Loading-Attribut den Wert »Lazy« zu wählen. So ist sichergestellt, dass auf eurem Server möglichst wenig Last erzeugt wird und bei Besuchern nicht unnötig viele Grafiken heruntergeladen werden müssen, die sie vielleicht niemals sehen werden. Das verbessert die Ladezeit enorm.

»Eager« ist ebenfalls praktisch und kann für besonders wichtige Bilder zum Einsatz kommen. Logos wären hier ein passendes Beispiel, die natürlich immer direkt und nicht verzögert geladen werden sollten. Mit »Eager« wäre das sichergestellt. Gleiches gilt auch für wichtige Tracking-Pixel, wie sie beispielsweise die VG Wort verwendet. Würden diese nicht korrekt geladen, wäre das ein großes Problem. Mit »Eager« wird daher sichergestellt, dass der Browser hier nicht selbständig wählt, sondern die Grafiken immer direkt lädt.

Über kurz oder lang wird »Auto« dann der Standardwert sein. Hier entscheidet Chrome selbst, vermutlich anhand der Verbindung. So könnte Mobil, wo Datenvolumen und Geschwindigkeit häufig noch ein Problem sind, grundsätzlich Lazy Load zum Einsatz kommen, wohingegen am Desktop alles direkt geladen wird.

Demo und Browser-Support

Wer sich eine kleine Demo anschauen möchte, kann dies unter folgendem Link tun. Wie immer im Internet, werden natürlich niedliche Katzenbilder geladen. Wirklich überraschend ist die Demo dann jedoch nicht, Lazy Load ist per se ja nichts Neues mehr, die Funktion ist demnach soweit bekannt.

Funktionsfähig ist die Demo aktuell außerdem nur im Chrome Browser, denn dieser ist der einzige, der das Loading-Attribut unterstützt. Das ist schade, aber es ist damit zu rechnen, dass auch die anderen Browserhersteller entsprechendes umsetzen und integrieren werden. Davon gehe ich jedenfalls aus.

Wobei ich auch vor Jahren schon gesagt habe, dass es Zeit wird, dass Browser solche Sachen selbständig implementieren. Trotzdem hat es bekanntlich lange gedauert und ist nun auch einzig und allein im Chrome verfügbar. Also mal schauen, wann Lazy Load wirklich überall vertreten ist.

Sollte Lazy Load im Browser schon aktiviert werden?

Tja und jetzt stellt sich die nächste Frage, nämlich ob ich mit meiner Website überhaupt dafür sorgen sollte, Lazy Load im Browser zu unterstützen. Wenn nur der Chrome Browser von Google aktuell dazu fähig ist, scheint der Support immerhin doch ziemlich begrenzt auszufallen.

Auf der anderen Seite ist der Chrome Browser bekanntlich weit verbreitet, ihr erreicht also auch dort schon eine Menge Besucher, die sich über das Lazy Load freuen werden. Eigene Scripte ersetzt es derzeit aber noch nicht, da muss man tatsächlich darauf hoffen, dass bald alle Browser das Loading-Attribut unterstützen.

Wer bislang noch kein Lazy Load eingesetzt hat, kann jetzt damit anfangen, dass neue Attribut bereits zu implementieren. Wer derzeit ein eigenes Script einsetzt, sollte lieber noch ein Weilchen dabei bleiben, bis der Support über alle großen Browser abgedeckt ist.

Ich selbst werde nach und nach eigene Scripte ersetzen und gegen das Native Lazy Loading im Chrome tauschen. Weil ich denke, dass es dafür Zeit ist und weil ich es leid bin, derartige Standards für jede Website einzeln einzurichten. Lazy Load gehört in den Browser. Das habe ich früher gesagt, sage es heute und endlich scheint es auch soweit zu sein. Da bin ich dabei. Ihr auch?