Lazy Loading: So optimierst Du die Performance Deiner Website

Nicht nur der Inhalt selbst macht eine Website interessant. Auch seine Ladegeschwindigkeit ist von wichtiger Bedeutung, um ein positives Nutzererlebnis hervorzurufen. Denn welcher Besucher wartet schon gerne länger, bis die Seite endlich vollständig geladen wurde? Lazy Loading ist eine hervorragende Methode, wenn Websites viele Objekte wie beispielsweise Bilder beinhalten. Denn das sorgt für ein hohes Datenaufkommen, was längere Ladezeiten zur Folge hat.

Beim Lazy Loading werden erst dann Inhalte geladen, wenn sie gebraucht werden. Sprich: Bevor ein Nutzer noch nicht nach unten gescrollt hat, wird der entsprechende Inhalt „Below the fold – im nicht sichtbaren Bereich“ noch nicht geladen.

Was ist Lazy Loading und wie funktioniert es?

Wird im Internetbrowser eine Adresse aufgerufen, lädt er alle erforderlichen Inhalte, um die Internetseite vollständig darzustellen. Dabei werden absolut alle Inhalte geladen. Auch welche, die sich nicht im sichtbaren Bereich befinden. Der nicht sichtbare Bereich ist auch unter dem Begriff „Below the fold“ bekannt.

Derartige Inhalte und Objekte außerhalb des Sichtbereiches zu laden, sorgt für unnötige Ladezeiten und einen höheren Datenverbrauch. Und genau an dieser Stelle setzt Lazy Loading an.

Es handelt sich hierbei um ein Script, was direkt im Quellcode der Website eingebunden wird. Es sorgt dafür, dass Inhalte wie Bilder und andere entsprechende Objekte erst dann geladen werden, wenn sie auch wirklich erforderlich sind. Beispiel: Der Websitebesucher scrollt nach unten oder vergrößert den Browser.

Beispiel: Bild-Dateien

• Um Lazy Loading zu verwenden, wird das Markup vom img-Tag angepasst
• Anstatt innerhalb vom img-Tag direkt ein src-Attribut zu verwenden, wird an dieser Stelle ein data-Attribut gesetzt. Innerhalb von dem data-Attribut befindet sich gleichzeitig die Quellangabe.
• Scrollt der Websitebesucher nach unten oder vergrößert den Browser, sorgt das Lazy Loading Script dafür, dass innerhalb vom data-Attribut das src-Attribut eingefügt wird.
• Nun wird das Bild geladen und steht zur Verfügung

Wie wird Lazy Loading umgesetzt?

Um Lazy Loading umzusetzen und in einer Website hinzuzufügen, gibt es verschiedene Möglichkeiten. Diese werden im Folgenden näher erläutert:

JavaScript

• Im Netz sind verschiedene JavaScript-Vorlagen erhältlich, mit denen Lazy Loading möglich ist
• So steht beispielsweise das bekannte Script „LazyLoad“ für verschiedene Objekte wie iFrames, Videos oder Bilder zur Verfügung. Zusätzlich können diverse Einstellungen vorgenommen werden.
• Auch das Script „Lazy Load Remastered“ arbeitet mit JavaScript und ist zuverlässig.

Intersection-Observer-API

• Bei einem herkömmlichen Lazy Load mit JavaScript fragt der Internetbrowser ab, an welcher Position sich alle einzelnen Objekte aktuell befinden. Das kann zu einer höheren Serverauslastung führen, zudem kann die Website ruckeln.
• Mithilfe einer Intersection-Observer-API werden die einzelnen Elemente genau beobachtet. Kommt es anschließend zu Veränderungen wie beispielsweise Abstandsänderungen zwischen Elementen, zeigt der Intersection Observer die entsprechenden Elemente an dieser Stelle an.

WordPress PlugIns

• Auch für WordPress Nutzer gibt es entsprechende Hilfen in Form von Lazy Loading PlugIns
• Dabei stehen beispielsweise PlugIns wie „a3 Lazy Load“ zur Auswahl
• Das PlugIn ist einfach zu installieren, einzurichten und schon geht es los

Natives Lazy Loading

• Das native Lazy Loading ist eine der einfachsten Methoden, um Lazy Loading auf der eigenen Website einzubinden. Hierfür muss einfach nur ein Attribut in den Quellcode eingetragen werden.
• Mittlerweile wird das native Lazy Loading von verschiedenen Internetbrowsern wie Google Chrome, Firefox und Edge unterstützt. Aber auch Opera kann mittlerweile damit umgehen.

So sieht der Code vom nativen Lazy Loading aus:

<img src=“beispielbild.png“ loading=“lazy“ alt=“…“>
<iframe src=“https://beispieldomain.de“ loading=“lazy“ alt=“…“></iframe>

Ein Blick auf den Code-Schnipsel zeigt, dass er die beiden Werte „loading=“lazy“ enthält. Anstelle von „lazy“ können auch andere Werte verwendet werden:

• auto: Hierbei entscheidet der Browser selbst, ob das Objekt sofort oder mit Verzögerung geladen werden soll.
• eager: Das Objekt wird sofort vom Browser geladen, sobald die Seite geöffnet wird.

Vor- und Nachteile von Lazy Loading

Im Folgenden sind die Vor- und Nachteile von Lazy Loading aufgeführt:

Vorteile

• Die Performance einer Website wird deutlich verbessert. Zudem wird beim Nutzer ein positives Surf-Erlebnis hervorgerufen.
• Beim Host wird weniger Traffic erzeugt, was sich langfristig positiv auswirkt
• Öffnet ein Besucher die Website, kann ein Nachlade-Effekt hinzugefügt werden. Dadurch wirkt die Seite insgesamt dynamischer.

Nachteile

• Um Lazy Loading zu nutzen, ist eine extra Einbindung von einem Script erforderlich
• Unter Umständen ist es je nach Situation notwendig, externe Libraries einzubinden. So zum Beispiel auch jQuery.
• Unter Umständen ist es erforderlich, im img-Tag alle Bildgrößen anzugeben
• Es kann eventuell zu einer negativen User Experience kommen. So beispielsweise beim Backtracking.

Lazy Loading WordPress PlugIns

Auch Websites die mit WordPress arbeiten, können aufatmen und erhalten einfache PlugIn Lösungen. Sie sind schnell und einfach eingerichtet und anschließend sofort einsatzbereit.

Dabei stehen verschiedene PlugIns zur Auswahl. Ein Blick im WordPress-Dashboard im Untermenü der PlugIns bietet eine genaue Übersicht, wenn Du einmal „Lazy Loading“ in das Suchfeld eingeben. Direkt im Anschluss ist einfach auf den „Installieren“-Button zu klicken, zu guter Letzt muss das PlugIn nur noch aktiviert werden. Ein Plugin möchten wir Dir einmal vorstellen:

Kurz vorgesellt: a3 Lazy Load

Ein bekanntes und beliebtes Plugin für WordPress ist „a3 Lazy Load“. Es ist unter anderem dazu in der Lage, Bilder und Videos verzögert zu laden, sobald die entsprechenden Objekte im sichtbaren Bereich erscheinen. Aber auch andere eingebettete Inhalte lassen sich hiermit verzögert laden.

Auch wenn das PlugIn nichts ins Deutsche übersetzt ist, verstehen sich die Funktionen fast von selbst. Zudem reicht es häufig aus, das PlugIn einfach zu installieren und zu aktivieren. Anschließend ist es sofort einsatzbereit und verrichtet seinen Dienst.

Im Untermenü von a3 Lazy Load befinden sich noch einige zusätzliche Einstellungen, mit denen sich einfach Änderungen vornehmen lassen.

Fazit

Mittlerweile ist es kein Geheimnis mehr, dass die Ladegeschwindigkeit einer Website ein wichtiger Rankingfaktor ist. Dementsprechend sollten sich Webmaster darum bemühen, die Ladezeit zu messen und ggf. zu verbessern. Denn nicht nur Google stuft eine langsame Website negativ ein. Auch das Nutzererlebnis wird negativ beeinflusst, sodass es seitens der Websitebesucher Punktabzug gibt.

Lazy Loading stellt eine hervorragende Möglichkeit dar, um die Ladezeit einer Internetseite deutlich zu senken. Hierfür wird ein JavaScript-Code in den Quellcode eingebunden. Wer mit WordPress arbeitet, kann sich darüber hinaus für ein PlugIn entscheiden. Soll Lazy Loading bei der Reduzierung der Ladezeit unterstützen, ist zunächst eine Analyse der Website durchzuführen. Welche Objekte sind besonders groß und könnten die Ladezeit unnötig nach oben ziehen? Und wo muss angesetzt werden, um die Ladezeit zu minimieren? Nun so kann zur Lösung übergegangen werden.