Lazy Loading von Haus aus im Chrome: Fauler Browser ist flotter

Die Webbrowser Chromium und Chrome sollen ab Version 75 durch Faulheit Zeit und Geld sparen helfen. Sie werden Lazy Loading von Haus aus beherrschen, womit aufwändige Umsetzungen durch die einzelnen Webseiten-Betreiber entfallen. Ein simpler Tag im HTML-Code genügt, und in bestimmten Fällen erübrigt sich sogar der. Das erklärt, warum die Ankündigung der "nativen" Unterstützung von Lazy Loading auf Googles Entwicklerkonferenz I/O Anfang Mai Jubel ausgelöst hat.

Lazy Loading (faules Laden) bezeichnet Verfahren, die Bilder und Iframes nur dann vom Server zum User schicken lassen, wenn sich der User dem Bereich der jeweiligen Webpage annähert. Was sowieso nicht zu sehen ist, soll nicht übertragen und gerendert werden müssen. Das spart Strom sowie Datenvolumen und steigert die Performance.

Die Umsetzung von Lazy Loading ist bislang aber nicht simpel. Unter anderem muss der Server laufend versuchen, herauszufinden, was gerade im Browserfenster des Users zu sehen ist. heise online beispielsweise setzt Lazy Loading von Bildern mit Custom Elements und gegebenenfalls Polyfills um.

Lazy, eager oder automatisch

Zumindest bei der Gestaltung von Webseiten für Chromium und verwandte Browser wie Googles Chrome entfällt solch Aufwand in Zukunft. Es genügt, im HTML-Code dem img-Tag das Attribut loading="lazy" hinzuzufügen, den Rest übernimmt der Webbrowser:

<img src="katze.jpg" loading="lazy" alt="In Rückenlage schlafende Katze" />

Chromium lädt dann zunächst die ersten 2 KByte des Bildes herunter, um einen Platzhalter anzulegen. Nähert sich der User dem entsprechenden Teil der Webpage an, wird der Rest vom Server angefordert.

Für Iframes sieht das ähnlich aus:

<iframe src="musicplayer.html" loading="lazy"></iframe>

Vorgesehen sind noch zwei alternative Attribute, nämlich loading="eager" und loading="auto". Eager weist den Browser an, die Bilddatei oder den Iframe jedenfalls sogleich abzurufen. Auto überlässt die Entscheidung dem Browser. Der entscheidet übrigens auch dann selbst, wenn keines der drei Attribute angegeben ist. Der Chrome-Browser für Android hat einen optionalen Datensparmodus. Ist dieser aktiviert, gilt grundsätzlich Lazy Loading, außer eager ist gesetzt.

Verschwendungsbremse

Lazy Loading ist angezeigt: Die durchschnittliche Webpage schiebt inzwischen 840 KByte Bilder durch die Leitung, wie Google auf der I/O 2019 verraten hat. Dieser Wert habe sich in nur drei Jahren verdoppelt. Die User betrachten dabei oft nur einen Teil dieser Bilder. Gleichzeitig ist bekannt, dass schon geringfügig längere Ladezeiten die User vertreiben. Bei Webshops soll eine um nur eine Sekunde längere Ladezeit auf mobilen Endgeräten zu bis zu 20 Prozent weniger abgeschlossenen Transaktionen führen.

Manche Werbevermittler entlohnen Betreiber von Webseiten schon dann, wenn Bild oder Iframe abgerufen werden, auch wenn der User sie nie zu sehen bekommt. In diesen Fällen mag es für den Webmaster finanziell von Vorteil sein, Werbeinhalte mit loading="eager" einzubinden.

Wer nicht auf Chromium oder Chrome 75 warten möchten, muss sich nicht grämen. Schon bei einigen älteren Versionen kann Lazy Loading als optionale, experimentelle Funktion aktiviert werden. Unter chrome://flags/ sind das die Einträge Enable lazy image loading respektive Enable lazy frame loading. (ds)