Lazy Loading – Fauler Zauber oder sinnvolles Tool?

Geschrieben von Frederik Kohleick veröffentlich am in der Kategorie UX, Design
Oft genug haben wir an dieser Stelle über Website-Performance geschrieben. An dieser Stelle möchten wir eine Methode zur Optimierung vorstellen: Lazy loading. Es handelt sich dabei um eine beliebte Technik für bildlastige Webseiten.
Je mehr Bilder in einer Website, desto höher das Datenaufkommen für den User und mehr Traffic für den Hoster bzw. Betreiber. Bilder die beim initialen Aufruf below-the-fold liegen (das heißt: im nicht sichtbaren Bereich der Website), müssen auch nicht beim Aufruf geladen werden.

Ein Browser lädt aber alle Ressourcen bereits voraus, vor allem wenn diese das Layout beeinflussen. Selbst wenn ein User gar nicht bis zum Footer einer Website scrollt, ruft der Browser trotzdem alle Bilder bis dahin ab.

Was macht ein Lazy Load?

Lazy Load Scripts sorgen dafür, dass Bilder erst dann geladen werden, wenn sie im Viewport auftauchen, z. B. durch Scrollen oder Vergrößerung des Browserfensters. Dafür muss meist das Markup verändert werden: Bilder haben statt des src-Attribute ein Data-Attribut mit der Quelle.

Sobald das Script merkt, dass ein Bild im Viewport ist, wird das src-Attribut angefügt und das Bild geladen. Teilweise geschieht dies mit einem schönen Fade-In-Effekt.

 

So lädt Chrome die Seite ohne ein Lazyload-Plugin:

Serveranfragen ohne Lazy Loading 

 

Und so mit Lazyload-Plugin aktiviert:

Serveranfragen mit Lazy Loading 

 

Vorteile von Lazy Loading

  • Performance-Verbesserung
  • Weniger Traffic für den Host
  • Websites wirken dynamisch durch Nachlade-Effekt (optional)

 

Nachteile von Lazy Loading

  • Extra-Skript notwendig
  • Zum Teil externe Libraries wie jQuery notwendig
  • Lazyloading-Effekt kann für die User Experience unerwünscht sein
  • Angabe von Bildgrößen mitunter notwendig im Img-Tag

Plugins für Lazy Loading

Ein paar Möglichkeiten, lazy loading in sein Projekt einzubinden möchten wir gerne vorstellen:


David Walsh' Lösung

https://davidwalsh.name/lazyload-image-fade

Blogger und Developer David Walsh hat eine low-end Lösung erstellt, die nur ein paar Zeilen Code belegt. Sicher eher ein interessantes Beispiel denn eine Lösung für den Produktiveinsatz.


LazyLoad (Vanilla JS)

http://www.andreaverlicchi.eu/lazyload/

Schlanke Lösung, die vor allem Puristen begeistern wird, denn sie braucht kein jQuery, bietet dafür aber einen hohen Funktionsumfang.


jQuery Unveil

1 kB Script welches auf jQuery oder Zepto aufsetzt und einige Optionen und Callbacks bietet.

http://luis-almeida.github.io/unveil/


Lazyload von Appelsinii

Erweitertes Script, welches ebenfalls auf jQuery aufsetzt und ein paar schöne Effekte mitliefert.

https://appelsiini.net/projects/lazyload/

 

 

Wer in seinen Websites Galerien oder generell viele Grafiken einsetzt, kann mit der Lazyload Methode wertvolle Kilo- oder sogar Megabytes sparen. Das dankt Google einem dann auch mit einem besseren Ranking in Pagespeed Insights.

Was denken Sie über Lazy Loading. Setzen Sie es in Ihren Projekten ein? Wenn ja welche Methode und wenn nein – warum?