Lazy Loading

Worum gehts dabei?

Wir alle sind eigentlich faul, warum verlangen wir dann soviel von einem Browser? Scherz beiseite, beim lazy-loading geht es darum eine Ressource erst dann zu laden, wenn diese auch tatsächlich zur Anzeige gebracht wird bzw. benötigt wird.

Aber warum gibt es auf einer Webseite überhaupt Bilder, die nicht geladen werden müssen. Die Grafiker und Designer haben sich sicher viele Gedanken darüber gemacht und kann ich die jetzt einfach weglassen?

Nein, natürlich soll die Webseite weiterhin mit allen benötigten Bildern geladen werden und dem Besucher somit eine vernünftige Bedienung und Information bieten. Aber stellen Sie sich einmal vor, sie besuchen ihre Webseite mit einem Smartphone. Die Information, die beim laden der Seite angezeigt werden kann ist recht gering. Um den gesamten Inhalt zu sehen müssen Sie nach unten scrollen.

Und hier setzt lazy-loading an. Bilder werden erst und nur dann geladen, wenn diese auch für den Webseiten-Besucher sichtbar sind. Dies wird in der Regel mit Javascript umgesetzt. Die Image-Tags werden so umgeschrieben, dass sie die URL zum Bild enthalten aber nicht als src-Attribut sondern z.B. mit data-src="URL". Dadurch kann der Browser die Bilder nicht laden und das Javascript kann erst einmal prüfen, ob das Bild auch gerade sichtbar wäre bzw. in kürze wird. Wenn Du nach unten scrollst, willst Du ja nicht lange auf die Bilder warten, also werden diese kurz vorher geladen. Hierzu wird der Viewport, also die aktuell sichtbare Fläche der Webseite, künstlich verlängert. Befindet sich ein Bild in diesem nach unten erweiterten Bereich, wird das src-Attribut gesetzt und der Browser lädt das Bild.

Man kann natürlich auch Platzhalterbilder einsetzen und diese dann später durch das Original austauschen oder sogar nur laden, wenn das Bild durch einen Klick (Touch) vom Besucher angefordert wird.

Zur Technik

Zuerst die alte Methode, das manuelle überprüfen des Viewports und der gerade darin sichtbaren Bilder. Hierbei wird beim laden der Seite geprüft, welche Bilder im Viewport liegen und diese dann geladen. Außerdem wird ein Listener installiert, der auf Veränderungen des Viewports reagiert und dann jeweils prüft ob noch weitere Bilder nachgeladen werden müssen.

Diese Technik funktioniert eigentlich gut, hat aber den Nachteil, dass per Javascript geprüft werden muss und das kostet Rechenleistung, die gerade einfache Smartphones nicht im Überfluss mitbringen.

Dieses Problem löst das neue Verfahren. Die in neuen Browsern integrierten "Intersection Observer". https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Hierbei registriert man auch einen Listener per Javascript, die Überwachung der Sichtbarkeit von Elementen wird aber direkt vom Browser überwacht und an das Script übermittelt. Da der Browser beim scrollen genau weiß welche Elemente sichtbar sind bzw. werden, ist diese Überwachung sehr viel effizienter.

Besonderheiten

  1. Im Viewport aber dennoch nicht sichtbar

    Aber wie immer gibt es noch einige Besonderheiten, die es zu beachten gilt. In vielen Webseiten werden im Header der Webseite Grafiken in die Hauptnavigation eingefügt, die jedoch aus Platzgründen in der Mobilansicht ausgeblendet werden. Da diese Bilder technische gesehen im Viewport liegen, werden diese auch geladen, wenn sie nicht sichtbar sind. Man muss also darauf achten, beim prüfen der Bilder auch noch deren tatsächliche Sichtbarkeit zu prüfen.

  2. CSS Hintergrundbilder

    Ein Browser lädt eine per CSS eingebundenes Hintergrundbild immer dann, wenn es sichtbar ist. Dabei wird nicht geprüft, ob der Container auch sichtbar ist. Es kommt also vor, dass Hintergrundbilder unnötig geladen werden. Dies kann man umgehen, indem man für diese Hintergrundbilder den CSS pseudo Selector ":visible" benutzt und sie für die jeweils nicht benötigte Ansicht explizit auf display: none setzt.