Lazy Load
Die Bezeichnung Lazy Load bezieht sich auf die Ladezeiten bestimmter Bereiche von Websites. Sie ist das Gegenstück zu Eager Load und bedeutet, dass lediglich die Inhalte dynamisch geladen werden, die vom User durch Scrollen in sein Browserfenster geholt werden. Bei Eager Load dagegen werden alle Inhalte einer Website zeitgleich und vollständig geladen.
Allgemeine Informationen zum Thema
Neu ist das Konzept Lazy Load nicht, doch im Laufe der Zeit haben sich Anpassungen und Veränderungen ergeben, die zu Verbesserungen geführt haben. So gab es früher Probleme bei der Indizierung durch Google, die aber inzwischen behoben sind. Bis zum Jahr 2015 war die Suchmaschine nicht in der Lage, schrittweise geladene Inhalte abzurufen, was problematisch war. Inzwischen wird die Sichtbarkeit von Bildern oder anderen Inhalten durch Google nicht mehr beeinträchtigt.
Weiterhin beeinträchtig vom Lazy Load ist jedoch sogenannter Primary Content. Damit sind Inhalte einer Website gemeint, die eine Aktion seitens des Users erfordern. Elemente, die erst geladen werden, nachdem der Website-Besucher etwas angeklickt oder angetippt, gescrollt oder geswiped hat, kann der Googlebot nicht crawlen und die Suchmaschine entsprechend nicht erfassen.[1] Das würde zu einer fehlerhaften oder gar keiner Indexierung führen.[2]
Um sich Lazy Load vorstellen zu können, hilft die Vorstellung eines Online-Shops, der den Inhalt einer Liste nicht komplett anzeigt. Erst wenn der Nutzer bis ans Ende der Liste scrollt, wird diese um ein weiteres Segment erweitert. Dieses Verfahren erleichtert zum einen das Stöbern innerhalb des Shops, es macht aber auch das Handling mit großen Datenmengen einfacher.[3]
Zweck von Lazy Load
Sinn und Zweck von Lazy Load ist im wesentlichen die Beschleunigung der Ladezeiten von Websites. Anders als bei Eager Loading müssen weniger Daten zur Verfügung gestellt werden, die Website kann schneller aufgebaut werden. Ist der Ladeprozess beim Eager Loading allerdings beendet, kann die sich daraus resultierende Effizienz zu beschleunigten Arbeitsabläufen führen.
Nicht immer ist das Argument der schnelleren Ladezeiten jedoch anwendbar, da unterschiedliche Untersuchungen und Studien gezeigt haben, dass Nutzer unter bestimmten Voraussetzungen gerne bereit sind, ein wenig länger zu warten, bis die Seite vollständig geladen wurde, beispielsweise bei umfassenden Web-Shops. Meist wird jedoch davon ausgegangen, dass eine Website sich nach spätestens drei Sekunden vollständig aufgebaut haben soll.
Das Hamburger Tech-Start-up Baqend will herausgefunden haben, dass eine Verzögerung der Ladezeit von lediglich 100 Millisekunden einem Unternehmen wie Amazon 1 Prozent Umsatzeinbußen bescheren würde.[4] Wenn dieser Wert stimmt, kann die Bedeutung von Ladezeiten nicht hoch genug eingeschätzt und Lazy Loading als hilfreich betrachtet werden.
Maßnahmen zur Beschleunigung der Ladezeiten
Es stehen zwar zahlreiche Tools zur Verfügung, die darüber Auskunft geben, was welchen Einfluss auf die Geschwindigkeit einer Website hat. Sie bieten meist aber nur Ausschnitte und liefern kein vollständiges Bild. Dennoch ist es ratsam und sinnvoll, die Ladezeit der eigenen Website regelmäßig mit entsprechenden Tools zu messen, am besten an unterschiedlichen Tagen und zu verschiedenen Uhrzeiten.
Ohne viel Fachwissen kann man beispielsweise durch die Verwendung eines schnellen und schlanken Themes die Ladezeiten verbessern. Zudem sollte man möglichst nur die Plugins verwenden, die auch wirklich notwendig sind, um die Datenmenge zu reduzieren. Dazu gehört auch, bei der Integration von Bildern vorsichtig zu sein.
Aufgrund der heutigen Technik ist es nicht mehr notwendig, komplett auf Bilder auf der eigenen Website zu verzichten, man sollte das Maß aber beschränken, um Daten zu sparen.[5]
Bildbehandlung mit Lazy Load
Wenn Lazy Load aktiviert ist, wird aus allen vorhandenen -Tags die Adresse im src-Attribut durch ein transparentes und kleines GIF ersetzt.[6] Vor der Anpassung mit Lazy Load sieht das so aus:
<br /><img src="mein-bild.png" alt="Mein Bild“>
Danach wie folgt:
<br /><img data-src="mein-bild.png" src="data:image/gif;base64,R0lGODdhAQABAIAAANk7awAAACH5BAEAAAEALAAAAAABAAEAAAICTAEAOw==" alt="Mein Bild“>
Wenn das Bild nun in das Sichtfeld des Browsers gerät, stellt JavaScript die ursprünglich verwendete Adresse des Bildes wieder her, das Bild wird angezeigt. Das ist auch der Moment, in dem das Bild vom Server geladen wird.
Einschränkungen bei der Bildbearbeitung mit Lazy Load
Die Vorteile, die beim Einbinden von Bildern durch Lazy Load entstehen, halten sich bei genauerer Betrachtung in überschaubaren Grenzen. Der Grund ist, dass zunächst einmal viel Script geladen werden muss, damit die nötigen Informationen an Lazy Load gelangen. So kann das Laden der Scripts länger dauern, als das der verwendeten Bilder, was den angestrebten Vorteil wieder relativiert. Lazy Load macht daher in bestimmten Fällen nur Sinn, wenn die Bilder – beispielsweise innerhalb einer Galerie – bereits mehrere Megabyte groß sind. In diesen Fällen macht sich Lazy Load positiv bemerkbar.
Bedeutung für das Development
Um die Gestaltung von Bildern auf der eigenen Website zu verbessern, kann Lazy Load unter Umständen eine geeignete Maßnahme sein, um die Ladezeiten zu verkürzen. Auch Google steht Lazy Load positiv gegenüber. Zwar lässt sich das eigene Ranking scheinbar durch den Einsatz dieser Methode nicht mittelbar verbessern, weil sich Lazy Load aber positiv auf die gesamte Page Speed auswirkt, kann es sehr wohl als indirekter Rankingfaktor eingestuft werden.[7]
Dennoch eignet sich die Methode nicht für jede Website. Zudem kann das Laden eines großen Skripts zu Problemen beim Aufbau der Website führen. Und nicht jeder Anwender kann sich mit Lazy Load anfreunden, was dazu führen kann, dass die Methode, die eigentlich die Absprungrate reduzieren sollte, zum genauen Gegenteil führt.[8]
Vorteile von Lazy Loading
- Lazy Load reduziert die Ladezeit einer Website oder Anwendung.
- Durch das bedarfsorientierte Laden verbraucht die Seite weniger Speicherplatz.
- Das verringert das Traffic-Aufkommen auf dem Host-Server.
- Unnötige SQL-Ausführungen in der Datenbank werden vermieden.
Nachteile von Lazy Loading
Der große Nachteil von Lazy Load ist, dass der Einsatz von externen Libraries und zusätzlichen Skripten notwendig werden kann, wodurch der Code komplizierter wird, wodurch sich mitunter die Ladezeiten wieder verschlechtern. Durch Plugins und Softwares kann Lazy Load jedoch ohne manuelle Code-Änderungen auf Webseiten implementiert werden.
Ob Lazy Load für die eigene Website angeraten ist, lässt sich pauschal nicht beurteilen, letztlich ist die Art der Website und das dahinterstehende Projekt entscheidend. Da viele technische Details unter der Oberfläche liegen, kann es außerdem besser sein, sich professionelle Hilfe zu holen, bevor man den Schritt in Richtung Lazy Load geht.
Einzelnachweise
- ↑ Best Practices für die Mobile First-Indexierung developers.google.com. Abgerufen am 17.03.2020.
- ↑ Lazy-Loading-Inhalte für Google sichtbar developers.google.com. Abgerufen am 17.03.2020.
- ↑ Lazy Load Definition mso-digital.de. Abgerufen am 17.03.2020.
- ↑ https://digital-magazin.de/ladezeiten-webseiten-apple-amazon-ebay/ Ladezeiten bei den Großen] digital-magazin.de. Abgerufen am 17.03.2020.
- ↑ Schnellere Website mit Lazy Loading wpwissen.com. Abgerufen am 17.03.2020.
- ↑ Lazy Load erklärt borlabs.io. Abgerufen am 17.03.2020.
- ↑ Lazy Loading - fauler Zauber oder sinnvolles Tool? netzkern.de. Abgerufen am 17.03.2020.
- ↑ Lazy Load für Bilder ohne Plugin fastwp.de. Abgerufen am 17.03.2020.