Lazy Loading: So optimieren Sie die Performance Ihrer Website

Wenn Sie die Performance Ihrer Website optimieren 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 verbessern.

Beim Aufruf einer Webseite lädt der Browser alle benötigten Ressourcen, um diese Seite wie gewünscht darzustellen. Dabei werden alle Objekte aufgerufen, auch wenn diese nicht im sichtbaren Bereich, sondern „below the fold“ (dt. frei: außerhalb der Sichtweite) liegen. Das kostet unter anderem auch unnötige Ladezeit. Um dem entgegenzuwirken setzen Entwickler Lazy Loading ein. Mithilfe eines Scripts wie beispielsweise LazyLoad lädt der Browser Bilder und andere Daten erst dann, wenn Sie im Viewport (sichtbaren Bereich) des Nutzers auftauchen – zum Beispiel beim Scrollen oder Vergrößern des Browserfensters.

Am besten lässt sich die Funktionsweise 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 Quellenangabe. Sobald das Bild im sichtbaren Bereich ist, fügt das jeweilige Script das src-Attribut mithilfe des data-Attributs hinzu und das Bild erscheint. Um den Ladevorgang ansprechender zu gestalten, können Sie Fade-in oder Slide-in Effekte nutzen.

Es gibt verschiedene Möglichkeiten, Lazy Loading in das eigene Webprojekt zu integrieren. Dabei hat sich die Einbindung der LazyLoad-Methode über die Jahre stetig weiterentwickelt und verbessert. Einige der beliebtesten Lösungen für die Implementierung des Verfahrens stellen wir Ihnen in den nachfolgenden Abschnitten vor.

Mittlerweile gibt es unzählige JavaScript-Vorlagen für Lazy Loading, die Sie einfach in Ihre Website einbinden können. Eine schlanke Lösung ohne jQuery bietet beispielsweise das bereits erwähnte Skript LazyLoad. Zusätzlich zu der Möglichkeit, natives Lazy Loading für Bilder, Videos und iFrames einzustellen, unterstützt das 2,4 KB (Kilobyte) große Skript unter anderem auch responsive Bilder.

Eine Alternative zu LazyLoad stellt das Skript Lazy Load Remastered von Mika Tuupola dar. Anders als LazyLoad setzt es auf jQuery und liefert einige ansprechende Effekte, wie beispielsweise die Blur-Technik.

Natives Lazy Loading ist die einfachste Möglichkeit, die Lazy-Load-Methode in Ihr Webprojekt einzubinden. Anfangs nur im Google-Browser Chrome (ab Version 75) verfügbar, funktioniert die Methode mittlerweile auch in Firefox, Edge und Opera. Um von dieser Möglichkeit Gebrauch zu machen, fügen Sie den jeweiligen 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 entscheidet, ob er das Objekt direkt oder mit Verzögerung lädt.

Der Vorteil von nativem Lazy Loading ist, dass der Browser keine zusätzliche JavaScript-Bibliothek 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 JavaScript deaktiviert hat.

Integrieren Sie Lazy Loading mit JavaScript, fragt der Browser permanent die Position der Objekte ab. Das kann unschöne Nebeneffekte wie Ruckeln erzeugen und ist zusätzlich eine Last für den Server. Mit dem Intersection-Observer-API verhält sich die Situation anders: Die Schnittstelle beobachtet die Änderungen der Elemente in Bezug auf ein bestimmtes Eltern-Element. Das Eltern-Element ist häufig der Viewport. Überschneidet sich das Objekt mit dem Eltern-Element oder verändert sich der Abstand zwischen Elementen um einen bestimmten Betrag führt der Intersection 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 integrieren – zum Beispiel mit dem Plugin a3 Lazy Load. Neben Bildern und Videos unterstützt die Erweiterung die Lazy-Load-Methode auch bei anderen eingebetteten Inhalten.

Häufig setzen Betreiber Pixel ein, um das Nutzerverhalten auf der Website zu tracken. Mitunter sind diese Tracking-Pixel erst im nicht sichtbaren Bereich eingebunden. Wenden Sie Lazy Loading auf alle Bilder an, lädt der Browser das Tracking-Pixel also ebenfalls erst, wenn es im sichtbaren Bereich ist. Das hat zur Folge, dass Ihnen wichtige Zahlen zu Klicks und Conversions verlorengehen.

Je nach eingesetzter Variante können Sie das Tracking-Pixel aber auch separat direkt mit dem Seitenaufruf laden lassen:

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