
Lazy Loading – Fauler Zauber oder sinnvolles Tool?
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:
Und so mit Lazyload-Plugin aktiviert:
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?