Lazy Loading: So op­ti­mie­ren Sie die Per­for­mance Ihrer Website

Wenn Sie die Per­for­mance Ihrer Website op­ti­mie­ren wollen, stoßen Sie früher oder später auf den Begriff Lazy Loading. Vor allem bei Webseiten mit vielen Daten wie Bildern oder Videos hilft diese beliebte Methode, die Ladezeit zu ver­bes­sern.

Beim Aufruf einer Webseite lädt der Browser alle be­nö­tig­ten Res­sour­cen, um diese Seite wie gewünscht dar­zu­stel­len. Dabei werden alle Objekte auf­ge­ru­fen, auch wenn diese nicht im sicht­ba­ren Bereich, sondern „below the fold“ (dt. frei: außerhalb der Sicht­wei­te) liegen. Das kostet unter anderem auch unnötige Ladezeit. Um dem ent­ge­gen­zu­wir­ken setzen Ent­wick­ler Lazy Loading ein. Mithilfe eines Scripts wie bei­spiels­wei­se LazyLoad lädt der Browser Bilder und andere Daten erst dann, wenn Sie im Viewport (sicht­ba­ren Bereich) des Nutzers auf­tau­chen – zum Beispiel beim Scrollen oder Ver­grö­ßern des Brow­ser­fens­ters.

Am besten lässt sich die Funk­ti­ons­wei­se der LazyLoad-Methode am Beispiel von Bild-Objekten erklären: Um Lazy Loading nutzen zu können, müssen Sie das Markup des img-Tags anpassen. Statt des src-Attributs verwendet die Methode nämlich ein data-Attribut inklusive passender Quel­len­an­ga­be. Sobald das Bild im sicht­ba­ren Bereich ist, fügt das jeweilige Script das src-Attribut mithilfe des data-Attributs hinzu und das Bild erscheint. Um den La­de­vor­gang an­spre­chen­der zu gestalten, können Sie Fade-in oder Slide-in Effekte nutzen.

Es gibt ver­schie­de­ne Mög­lich­kei­ten, Lazy Loading in das eigene Web­pro­jekt zu in­te­grie­ren. Dabei hat sich die Ein­bin­dung der LazyLoad-Methode über die Jahre stetig wei­ter­ent­wi­ckelt und ver­bes­sert. Einige der be­lieb­tes­ten Lösungen für die Im­ple­men­tie­rung des Ver­fah­rens stellen wir Ihnen in den nach­fol­gen­den Ab­schnit­ten vor.

Mitt­ler­wei­le gibt es unzählige Ja­va­Script-Vorlagen für Lazy Loading, die Sie einfach in Ihre Website einbinden können. Eine schlanke Lösung ohne jQuery bietet bei­spiels­wei­se das bereits erwähnte Skript LazyLoad. Zu­sätz­lich zu der Mög­lich­keit, natives Lazy Loading für Bilder, Videos und iFrames ein­zu­stel­len, un­ter­stützt das 2,4 KB (Kilobyte) große Skript unter anderem auch re­spon­si­ve Bilder.

Eine Al­ter­na­ti­ve zu LazyLoad stellt das Skript Lazy Load Re­mas­te­red von Mika Tuupola dar. Anders als LazyLoad setzt es auf jQuery und liefert einige an­spre­chen­de Effekte, wie bei­spiels­wei­se die Blur-Technik.

Natives Lazy Loading ist die ein­fachs­te Mög­lich­keit, die Lazy-Load-Methode in Ihr Web­pro­jekt ein­zu­bin­den. Anfangs nur im Google-Browser Chrome (ab Version 75) verfügbar, funk­tio­niert die Methode mitt­ler­wei­le auch in Firefox, Edge und Opera. Um von dieser Mög­lich­keit Gebrauch zu machen, fügen Sie den je­wei­li­gen Website-Inhalten einfach das passende Loading-Attribut hinzu:

Neben dem Wert „lazy“ für Lazy Loading stehen Ihnen folgende Werte zur Verfügung:

• eager: Der Browser lädt das Objekt direkt beim Aufruf der Seite.
• auto: Der Browser ent­schei­det, ob er das Objekt direkt oder mit Ver­zö­ge­rung lädt.

Der Vorteil von nativem Lazy Loading ist, dass der Browser keine zu­sätz­li­che Ja­va­Script-Bi­blio­thek laden muss. Das spart nicht nur extra Ladezeit, sondern stellt auch sicher, dass der Browser Bilder auch dann per Lazy Load lädt, wenn der Nutzer Ja­va­Script de­ak­ti­viert hat.

In­te­grie­ren Sie Lazy Loading mit Ja­va­Script, fragt der Browser permanent die Position der Objekte ab. Das kann unschöne Ne­ben­ef­fek­te wie Ruckeln erzeugen und ist zu­sätz­lich eine Last für den Server. Mit dem In­ter­sec­tion-Observer-API verhält sich die Situation anders: Die Schnitt­stel­le be­ob­ach­tet die Än­de­run­gen der Elemente in Bezug auf ein be­stimm­tes Eltern-Element. Das Eltern-Element ist häufig der Viewport. Über­schnei­det sich das Objekt mit dem Eltern-Element oder verändert sich der Abstand zwischen Elementen um einen be­stimm­ten Betrag führt der In­ter­sec­tion Observer eine Callback-Funktion aus und zeigt das Element an.

Haben Sie Ihre Website mit WordPress erstellt, können Sie Lazy Loading ganz einfach mit einem Plugin in­te­grie­ren – zum Beispiel mit dem Plugin a3 Lazy Load. Neben Bildern und Videos un­ter­stützt die Er­wei­te­rung die Lazy-Load-Methode auch bei anderen ein­ge­bet­te­ten Inhalten.

Häufig setzen Betreiber Pixel ein, um das Nut­zer­ver­hal­ten auf der Website zu tracken. Mitunter sind diese Tracking-Pixel erst im nicht sicht­ba­ren Bereich ein­ge­bun­den. Wenden Sie Lazy Loading auf alle Bilder an, lädt der Browser das Tracking-Pixel also ebenfalls erst, wenn es im sicht­ba­ren Bereich ist. Das hat zur Folge, dass Ihnen wichtige Zahlen zu Klicks und Con­ver­si­ons ver­lo­ren­ge­hen.

Je nach ein­ge­setz­ter Variante können Sie das Tracking-Pixel aber auch separat direkt mit dem Sei­ten­auf­ruf laden lassen:

• Natives Lazy Loading: Fügen Sie dem Tracking-Pixel das Attribut loading="eager" hinzu.
• Lazy Loading mit Ja­va­Script: Geben Sie dem Tracking-Pixel eine bestimmte Klasse, die Sie im Ja­va­Script-Code aus­schlie­ßen. Al­ter­na­tiv geben Sie allen Objekten, die der Browser per Lazy Load laden soll, eine Klasse und wenden das Script explizit auf diese an.