Mit Lazy Loading werden manche Bilder erst nach dem Seitenaufruf geladen. Wie Lazy Loading funktioniert und wie Sie es nutzen können, erfahren Sie in unserem Ratgeber. Mehr zum Thema PageSpeed Optimierung in unserem großen Übersichtsartikel.
Was ist Lazy Loading?
Lazy Loading oder Lazy Load beschreibt eine Methode in der Web-Entwicklung, mit der nicht alle Bilder einer Website beim Seitenaufruf geladen werden. Wörtlich übersetzt bedeutet Lazy Loading “faules Laden”, treffender wäre aber “verzögertes Laden”.
Die Bilder werden nämlich erst dann geladen, wenn sie durch Scrollen in das Blickfeld des Nutzers geraten. Meist erkennt man das Lazy Loading an einfarbigen Platzhaltern, die nach und nach durch die richtigen Bilder ersetzt werden.
Lazy Loading: Zunächst werden nur Bilder im Blickfeld geladen.
Screenshot aus der Google-Bildersuche: Gut erkennbar im Wasserfalldiagramm rechts sind die verzögert geladenen Bilder.
Warum Lazy Loading anwenden?
Bilder haben einen großen Anteil am Downloadvolumen einer Website. Je mehr Bilder beim Aufruf der Website geladen werden müssen, desto langsamer lädt sie. Gerade mit mobilen Bandbreiten können Ladezeiten dadurch in die Höhe schießen.
Langsame Ladezeiten wirken sich vielfältig negativ auf den Erfolg einer Website aus: Nutzer springen wahrscheinlicher wieder ab oder werden in ihrer Kauflaune gebremst. Außerdem straft Google langsame Websites in seinem Ranking ab. Der Erfolg einer Website steht und fällt daher mit der Ladezeit.
Darüber hinaus sind mit jedem heruntergeladenen Bild auch Kosten für den Website-Betreiber verbunden. Nicht jeder Nutzer scrollt aber durch die gesamte Produktübersicht oder Fotogalerie. Es ist also gar nicht zweckmäßig, alle Bilder beim Seitenaufruf zu laden. Daher sollte es vermieden werden.
Vorteile von Lazy Loading
- Schnellere Ladezeiten durch verzögertes Laden der Bilder
- Geringere Traffic-Kosten, da selten alle Bilder geladen werden müssen
- Bandbreitennutzung optimieren, da Inhalte ohne Priorität nicht geladen werden
Wie funktioniert Lazy Loading?
Im Normalfall lädt der Browser beim Seitenaufruf alle Bilder, die im HTML-Code der Website hinterlegt sind. Bilder werden durch das Element "<img>" gekennzeichnet. Das Attribut "src" gibt an, von welcher Quelle das Bild geladen werden soll.
Beispiel:
<img src="bild.jpg">
Damit Lazy Loading greifen kann, muss zunächst das Attribut src überschrieben werden. So kann unterbunden werden, dass das Bild automatisch geladen wird.
Beispiel:
<img data-src="bild.jpg">
Nun kann ein Skript an die Scrollfunktion der Website gebunden werden. Kommt das Bild in den Blickbereich, wird data-src wieder durch src ersetzt und der Ladevorgang angestoßen. Ein Beispiel-Skript findet sich auf der Website Codepen.
Was muss bei Lazy Loading beachtet werden?
Die meisten Lazy-Loading-Skripte werden erst am Ende des Ladevorgangs ausgeführt. Bilder, die im “Top Fold”, also im direkten Sichtbereich des Nutzers liegen, sollten daher nicht mit Lazy Loading geladen werden. Dies lässt sich am einfachsten erreichen, indem diese Bilder von vornherein mit dem Attribut src ausgestattet werden. Das bedeutet natürlich einen erheblichen Aufwand, der mit der Anzahl der Seiten und Bilder sowie deren kontinuierlicher Aktualisierung steigt.
Verzögert geladene Bilder können das Design durcheinander bringen. Wenn ein Bild an einer leeren Stelle auf der Website plötzlich geladen wird, werden dadurch andere Elemente verschoben. Geben Sie daher die genauen Abmessungen des Bildes in Pixeln schon vor dem Laden an.
Beispiel:
<img data-src="bild.jpg" width="100" height="200">
Platzhalter erleichtern die kurze Wartezeit. Scrollt ein Nutzer zu schnell oder verfügt er über eine geringere Bandbreite, kann es eine kurze Verzögerung beim Laden der Bilder geben. In diesem Fall führt es zu einer schlechten Nutzererfahrung, wenn er auf leere Inhalte stoßen würde. Arbeiten Sie daher mit Platzhaltern, die dem Nutzer anzeigen, dass hier Bilder bald nachgeladen werden.
In der Vergangenheit wurde hier auf sich drehende Zahnräder oder ähnliche Animationen gesetzt. Diese sind jedoch gerade in ihrer Häufung störend für das Auge. Setzen Sie daher z.B. auf einfarbige Platzhalter. Für ein wenig Abwechslung können Sie sorgen, indem Sie diese jeweils nach dem Hauptfarbton im verzögert geladenen Bild einfärben. Hierdurch wird auch der Übergang zum geladenen Bild für den Nutzer leichter.
Manche Nutzer deaktivieren JavaScript. Dies ist zwar sehr selten, kann aber dafür sorgen, dass gar keine Bilder nachgeladen werden. Handelt es sich dabei um Produktbilder sollte dies natürlich vermieden werden. Durch das HTML-Element "<noscript>" können Sie dem Browser eine Alternative anbieten, falls JavaScript deaktiviert sein sollte.
Beispiel:
<img data-src="bild.jpg">
<noscript>
<img src="bild.jpg">
</noscript>
In diesem Beispiel wird das Bild mit dem Attribut "data-src" über Lazy Loading geladen. Sollte JavaScript deaktiviert sein, wird stattdessen das Bild mit dem Attribut "src" geladen. Zwar entfällt dadurch der Vorteil der schnelleren Ladezeit für den Nutzer, aber immerhin bekommt er so alle Bilder zu sehen.
Lazy Loading ohne Programmierung nutzen
Nicht jeder Website-Betreiber hat die Möglichkeit, ein Skript für Lazy Loading selbst zu entwickeln. Gerade bei Webseiten mit vielen Anwendungsmöglichkeiten für Lazy Loading wie Online-Shops ist dies zudem mit hohen Aufwänden verbunden.
Es gibt mehrere Möglichkeiten, wie Sie Lazy Loading auch ohne eigene Programmierkenntnisse nutzen können. Diese stellen wir Ihnen im Folgenden vor. Achten Sie dabei darauf, dass die Lösung auch unsere Hinweise zu Lazy Loading erfüllt.
Vorgefertigte Skripte nutzen
- Vorteil: Es gibt viele vorgefertigte Lösungen für Lazy Loading kostenlos im Internet. Ein Beispiel haben wir weiter oben verlinkt.
- Nachteil: Um diese Skripte in Ihr Theme oder Template zu integrieren, ist jedoch Bastelarbeit nötig.
Plugins oder Extensions nutzen
- Vorteil: Plugins integrieren sich in das von Ihnen genutzte System, wie bspw. Wordpress oder Magento. Eigene Entwicklung ist dann nicht mehr nötig.
- Nachteil: Gute und regelmäßig gepflegte Plugins sind kostenpflichtig. Es besteht außerdem immer die Gefahr, dass sie nach einem Update des Systems nicht mehr kompatibel sind oder nicht mit anderen genutzten Plugins zusammenarbeiten. Zudem erfordern Plugins eigene Skript-Bibliotheken, die beim Seitenaufruf mitgeladen werden müssen und die Ladegeschwindigkeit verlangsamen.
Lazy Loading mit wao.io nutzen
- Mit wao.io lässt sich Lazy Loading schnell konfigurieren und mit einem Klick aktivieren. In einer sicheren Testumgebung können Sie dieses und andere Features vor dem Live-Gang testen.
- wao.io bestimmt automatisch, welche Bilder im Blickfeld des Betrachters liegen und welche mit Lazy Loading nachgeladen werden sollen. Somit entsteht kein zusätzlicher Aufwand für Sie, wenn Sie Ihre Website aktualisieren.
Lazy Loading: Aktivieren und konfigurieren mit nur einem Klick.
Lazy Loading Wordpress Plugins
Die Blog-Software Wordpress ist nach wie vor ein beliebtes CMS, das mit seinem Plugin “Woocommerce” sogar als einfacher Onlineshop genutzt werden kann. Sollten Sie auf ein Plugin für Lazy Loading setzen wollen, gibt es hier eine breite Auswahl.
Zur Orientierung haben wir die unserer Meinung nach drei besten für Sie ausgewählt:
- Lazy Load von WP Rocket: Mit diesem Plugin lassen sich neben Bildern und Thumbnails auch andere Seiteninhalte wie Widgets oder Texte verzögert laden. Dies gilt auch für Inhalte, die in einem "<iframe>" geladen werden, z.B. Youtube-Videos.
- A3 lazy load: Das Plugin von A3 ist schnell zu installieren und zu konfigurieren. Es ist besonders für mobile Darstellungen optimiert.
- Speed Up Lazy Load: Im Gegensatz zu den anderen beiden Plugins verzichtet Speed Up auf eine Konfiguration. Dadurch ist es sehr schnell hinzuzufügen, aber nicht individualisierbar.
Diese Plugins werden regelmäßig aktualisiert. Inkompatibilität zu Ihrer verwendeten Wordpress-Version kann jedoch nicht ausgeschlossen werden.
Mit wao.io Lazy Loading und andere Features in einer Lösung nutzen
Den meisten Nutzen aus Lazy Loading ziehen Sie dann, wenn Sie es mit weiteren Features für schnelle Ladezeiten kombinieren. Mit wao.io stehen Ihnen u.a. automatisierte Bild- und Code-Komprimierung sowie ein Website-Cache zur Verfügung.
Sehen Sie jetzt alle Vorteile von wao.io auf einen Blick!
