Sie sind hier: Startseite · Artikel · Lazy Load

Lazy Load – oder: Nur die Daten übertragen, die auch benötigt werden

Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.

Nur die Daten ans Endgerät schicken, die auch wirklich benötigt werden. Das dient nicht nur dem schnellen Seitenaufbau, sondern es schont auch das Budget des Mobilfunkvertrags.

Bilder machen häufig einen großen Teil des Datenvolumens von Webseiten aus. Und bieten damit das größte Optimierungspotienzial. Optimierte, d. h. minimale Dateigröße, und Responsive Images, d. h. für das jeweilige Anzeigegerät angepasste Bildgröße sollten selbstverständlich sein.

Noch einen Schritt weiter geht Lazy Loading: Bilder werden erst dann vom Server geladen, wenn sie durch Scrollen in den Viewport gelangen. Vor allem auf Smartphones kann diese Technik massiv zum Datensparen beitragen.

Ein Blick in die Zukunft lässt erwarten, dass Browser das einmal ohne weiteres Zutun bewerkstelligen werden: Lazy Loading in Google Chrome to Improve Browsing Experience.

Nachtrag 12.08.2019: Addy Osmani, Engineering Manager at Google working on Chrome, über natives Lazy-Loading im Chrome-Browser

Aber noch ist es nicht so weit. B. a. w. muss JavaScript helfen. Nicht ganz trivial ist dabei Lazy Loading in Verbindung mit Responsive Images. Andrea Verlicchi liefert die dazu erforderliche Bibliothek unter dem Titel [englisch] Lazy load responsive images in 2019.

Anmerkung: iOS unterstützt die eingesetzte Technik erst ab der aktuellen Version 12.2. Das hält mich aus zwei Gründen nicht vom Einsatz ab:

1. iPhones werden sehr schnell auf die aktuellen iOS-Versionen upgedatet. Ein Blick in die Nutzungsstatistik meiner Site zeigt: 75 % der Geräte laufen, nur 10 Tage nach Veröffentlichung, bereits mit der aktuellen Version 12.2.
2. Fallback: Alte Browser, die Lazy Load nicht unterstützen (Internet Explorer), laden einfach alle Bilder normal, als ob es kein Lazy Load gäbe.

Demo:

Die folgenden Bilder sind zusammen ca. 1,4 MB schwer (auf dem Server, je nach Größe des benutzten Monitors werden sie bereits vor der Auslieferung von adaptive images verkleinert).
Beim Aufruf der Seite werden aber nur ca. 150 kB geladen, der Rest erst Zug um Zug, wie die Bilder mit fortschreitendem Scrollen in den Viewport, den Anzeigebereich kommen. Live verfolgen lässt sich dieses Verhalten mit den [englisch] Browser Developer Tools.

Fotos: unsplash Creative Commons CC0

Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.