Was versteht man unter Lazy Load?
Bei Lazy Load (zu Deutsch: “faules Laden”) handelt es sich um ein Script, das vor allem im Rahmen der PageSpeed Optimierung eingesetzt wird. Das Lazy Load Script sorgt dafür, dass Bilder einer Webseite erst dann geladen werden, wenn sie sich im Blickfeld des Nutzers befinden. Das spart das Laden von unnötigen Ressourcen, sodass vor allem bei bildlastigen Webseiten eine signifkante Performance-Verbesserung erzielt werden kann.
Funktionsweise Lazy Load
Je mehr Bilder auf einer Webseite geladen werden müssen, desto höher ist das Datenaufkommen für den User und desto länger dauert es, bis die Seite vollständig geladen ist. Vor allem bei bildlastigen Webseiten kann die Ladezeit somit stark beeinträchtigt werden. Viele Nutzer reagieren ungeduldig und verlassen die Seite daher vorzeitig wieder. Zudem verbraucht das Laden vieler Bilddateien das Datenvolumen der User, was vor allem für diejenigen ärgerlich ist, die eine bildlastige Seite über ihr Smartphone aufrufen.
Beim Aufruf einer Webseite lädt der Browser in der Regel bereits alle auf ihr enthaltenen Ressourcen im Voraus. Diese Art des Ladens wird auch als Eager Load bezeichnet. Es werden also auch Bilder im Voraus geladen, die sich womöglich ganz am Ende der Webseite befinden. Ein Großteil der Internetnutzer scrollt allerdings gar nicht bis zum Ende einer Webseite, sodass Inhalte an dieser Stelle ohnehin seltener wahrgenommen werden. So wird die Ladezeit also durch Ressourcen negativ beeinflusst, die noch gar nicht benötigt werden.
Das Lazy Load Script sorgt dafür, dass Bilder erst dann geladen werden, wenn sie sich im tatsächlichen Viewport des Besuchers befinden. Scrollt dieser nicht ans Ende der Seite, werden Ressourcen geschont, indem die unteren Bilder gar nicht erst geladen werden.
Das Nachladen der Bilder über Lazy Load erfolgt meist über einen dezenten Fade-In-Effekt, sodass der Nutzer das Gefühl hat, es handle sich hierbei um einen beabsichtigten Effekt zur optischen Aufwertung der Seite. Dadurch kann Lazy Load durchaus auch dazu beitragen, dass eine Webseite dynamischer wirkt.
Die Funktionsweise des Lazy Load Scripts ist dabei recht simpel. Für gewöhnlich werden Bilder und Grafiken mit einem src-Attribut in das HTML Dokument eingebunden. Das src-Attribut enthält dabei die Quelle des jeweiligen Bildes:
<img src=“bild.jpg“ alt=“Ein Bild“>
Beim Einsatz von Lazy Load wird das src-Attribut stattdessen durch ein Data-Attribut ergänzt. Das ursprüngliche Bild wird dadurch durch ein transparentes und kleines GIF ersetzt, bevor das Bild letztendlich in das Sichtfeld des Nutzers gelangt:
<img data-src=”bild.jpg” src=”data:image/gif;base64,R0lGODdhAQABAIAAANk7awAAACH5BAEAAAEALAAAAAABAAEAAAICTAEAOw==” alt=”Ein Bild”>
Beim Laden des Bildes wird durch JavaScript die ursprünglich verwendete Adresse des Bildes wiederhergestellt, sodass dieses angezeigt werden kann.
Bedeutung von Lazy Load für SEO
Bis zum Jahr 2015 war Google nicht in der Lage, Inhalte zu erkennen, die durch Lazy Load schrittweise geladen wurden. Heute stellt der Einsatz von Lazy Load hinsichtlich der Suchmaschinenoptimierung allerdings keinerlei Probleme mehr dar.
Zwar beeinflusst Lazy Load das Ranking bei Google nicht direkt. Dadurch, dass die Performance der Webseite mit dem Script verbessert wird, kann das Ranking allerdings indirekt positiv beeinflusst werden. Dadurch steigt nämlich die Nutzerfreundlichkeit der Webseite, was sowohl von Usern, als auch von Google gerne gesehen wird.
Lazy Load in eine (WordPress) Webseite einbinden
Für Seiteninhaber, die ihre Webseite auf einem Content Management System wie WordPress betreiben, gibt es einige kostenlose Plugins, mit denen sich Lazy Load einfach implementieren lässt. Wir empfehlen hierfür das Plugin Crazy Lazy oder a3 Lazy Load.
Alternativ können erfahrene Seitenbetreiber das Script für den Lazy Load natürlich auch manuell in das HTML Dokument ihrer Webseite einbinden. Im Internet gibt es hierfür zahlreiche Möglichkeiten und Anleitungen. Falls du Hilfe beim Einbinden von Lazy Load in deine Website benötigst, stehe ich dir mit meinem umfangreichen WordPress Support zur Seite.
