Lazy Loading: Grundlagen erklärt

Was ist Lazy Loading?

Beim Lazy Loading werden Bilder und andere Assets auf deiner Webseite erst dann geladen, wenn der Benutzer sie benötigt. Ressourcen „above the fold“ sind auf den ersten Blick sichtbar, aber die Bilder weiter unten werden erst geladen, wenn der Benutzer auf der Seite nach unten scrollt.

Bei Websites, die kein Lazy Loading für Bilder verwenden, passiert oft Folgendes: Ein Benutzer kommt auf deine Seite und der Browser lädt alle Assets und Ressourcen herunter, bevor sich die Seite aufbaut.

Wenn du schon einmal auf einen Link geklickt hast und dann lange warten musstest, bis alles richtig angezeigt wurde, lag das wahrscheinlich daran, dass diese Seite viele Ressourcen enthielt, die viel Zeit zum Herunterladen und Laden benötigt haben. Diese Art von Verzögerung kann dazu führen, dass Besucher eine Webseite verlassen, insbesondere wenn dies bei jedem Link auf der Seite, auf den sie klicken, der Fall ist.

Wenn du jedoch Lazy Loading implementierst, lädt der Browser nicht alle Ressourcen im Voraus, sondern verwendet stattdessen ein Platzhalterbild für die Stelle, an der das Bild erscheinen sollte.

Beim Scrollen sieht der Benutzer diesen Platzhalter vielleicht sogar, bevor der Browser das entsprechende Bild einfügt. Diese Methode zum Laden von Bildern kann die Ladezeit deiner Seite verlängern und so die Benutzererfahrung verbessern. Dies gilt insbesondere für Websites mit vielen gehosteten Bildern oder Iframes. Über das Lazy Loading von Bildern Bescheid zu wissen, ist wichtig, aber du solltest daran denken, dass Lazy Loading nicht nur Bilder betrifft. Verschiedene Assets und Ressourcen können von Lazy Loading profitieren, aber Lazy Loading von Bildern bleibt die wichtigste Funktion.

Lazy Loading vs. Eager Loading

Nachdem wir uns mit Lazy Loading beschäftigt haben, wollen wir uns nun mit dem Unterschied zwischen Eager Loading und Lazy Loading befassen.

Während Lazy Loading unnötige Downloads vermeidet, trifft auf Eager Loading das Gegenteil zu. Bei Eager Loading werden alle Bilder sofort geladen, sobald eine Website geöffnet wird.

Wenn Benutzer auf eine Seite klicken, die Eager Loading verwendet, sehen sie möglicherweise einige Ladehinweise oder sie müssen warten, bis alles heruntergeladen und sichtbar dargestellt ist. Das bedeutet auch, dass selbst dann alle Bilder heruntergeladen werden, wenn der Benutzer sich nicht weiter auf der Seite umsieht. Das ist also das Gegenteil von dem, was beim Lazy Loading passiert.

Eager Loading kann für einige Websites von Vorteil sein, z. B. für Websites mit sehr wenigen oder stark optimierten Bildern. In den meisten Fällen allerdings verlangsamt diese Methode die Website erheblich.

Für textlastige Websites und Websites mit sehr unkomplizierten Assets kann Eager Loading jedoch gut funktionieren. Eine Website wie Wikipedia profitiert beispielsweise stark von Eager Loading.

Vorteile von Lazy Loading

Die Vorteile von Lazy Loading liegen nicht nur in der schnelleren Ladegeschwindigkeit von Websites. Lazy Loading hat noch weitere Vorteile, wie z. B.:

Schnellere Ladezeiten für Websites

Kleine Websites und Assets mit geringer Dateigröße werden schnell geladen. Lazy Loading verringert die ursprüngliche Größe einer Website, sodass sie schneller in den Browser geladen wird.

Eine schnellere Website bietet viele Vorteile. Wenn du Lazy Loading für die Bilder auf deiner Website verwendest, kannst du die Konversionsrate erhöhen, die Benutzererfahrung verbessern und bereichern sowie die Website zur Freude der Suchmaschinen weitaus SEO-freundlicher gestalten.

Geringere Bandbreitennutzung

Wenn du Lazy Loading für deine Bilder verwendest, erhalten Website-Benutzer nur die Assets, die sie benötigen. Das bedeutet, dass der Browser keine Bandbreite für das Herunterladen von Bildern verschwenden muss, die der Benutzer nie sehen wird. Dies kann im Laufe der Zeit zu einer deutlichen Reduzierung der Bandbreitennutzung führen.

Wenn es auf deiner Website viele größere Bilder gibt, kann diese Einsparung bei der Bandbreitennutzung umgehend einen großen Unterschied ausmachen. Diese Einsparung der Bandbreite kommt sowohl dir als auch dem Benutzer zugute. Da du diese Assets nicht bereitstellst, wird auch die Bandbreitennutzung für deine Server reduziert.

Verbesserte Benutzererfahrung

Lazy Loading verbessert die Benutzererfahrung in mehrfacher Hinsicht.

Niemand mag eine langsame Website. Langsame Websites geben dem Benutzer oft das Gefühl, dass mit dem Gerät, mit dem er die Website besucht, etwas nicht stimmt. Eine schnellere Ladezeit kann die Benutzererfahrung auch auf weniger offensichtliche Weise verbessern. Beispielsweise müssen Browser nicht die gesamte Arbeit erledigen, die das Herunterladen im Hintergrund mit sich bringt. Dadurch werden die Systemressourcen geschont und die Geräte der Besucher laufen besser, wenn sie auf deiner Website sind.

All diese Browser-Aktivitäten bedeuten auch eine Beanspruchung der CPU, des Akkus und anderer Geräteressourcen. Dies ist einer der Gründe, warum Lazy Loading eine der wichtigsten mobilen SEO-Best Practices ist.

Bessere SEO-Performance

Das schnellere Laden von Seiten ist ein wichtiger Aspekt der Suchmaschinenoptimierung (SEO). Langsame Websites werden von Suchmaschinen häufig bestraft und schuld für das langsame Laden sind in erster Linie die Bilder. Wenn du deine Website-Performance steigern und deine Suchmaschinen-Rankings verbessern möchtest, musst du deine Ladegeschwindigkeit maximieren.

Nachteile von Lazy Loading

Lazy Loading kann in verschiedenen Formen implementiert werden und nicht alle Methoden des Lazy Loading sind für alle Websites geeignet.

Manchmal kann die Implementierung von Lazy Loading zu einer komplexen Aufgabe werden, insbesondere wenn du ein CMS verwendest, das eine bestimmte Implementierungsmethode einer anderen vorzieht.

Das bedeutet auch, dass es zu Kompatibilitätsproblemen kommen kann, wenn du Lazy Loading verwenden möchtest. Möglicherweise hast du sogar ein CMS, bei dem Lazy Loading standardmäßig enthalten ist. Wenn du eine andere Art von Implementierung versuchst, kann dies zu weiteren Kompatibilitätsproblemen führen.

Weitere Nachteile können sich aus der Art und Weise ergeben, wie der Benutzer auf deiner Seite scrollt. Bei sehr schnellem Scrollen, kann Lazy Loading nicht mithalten. Dies kann für bestimmte Arten von Websites nachteilig sein. Zum Beispiel will die E-Commerce-Website-Entwicklung Bilder, die immer auf der Seite bleiben.

Schnelles Scrollen kann zudem Pufferprobleme verursachen. Darüber hinaus sorgt Lazy Loading für mehr Serveranrufe, die sich summieren können, wenn der Benutzer fortfährt.

Ein letzter möglicher Nachteil ergibt sich aus den reduzierten Caching-Vorteilen. Caching funktioniert normalerweise nur, wenn Assets angefordert werden. Es kann auch sein, dass die Informationen im Cache für eine lange Zeit bestehen bleiben und veraltet sind, da sie aufgrund von Lazy Caching nur selten verwendet werden.

Das mag nach vielen Nachteilen klingen, aber in den meisten Anwendungsfällen überwiegen die Vorteile des Lazy Loadings die potenziellen Nachteile bei Weitem.

Viele der Nachteile haben auch mit der Implementierung zu tun. Lazy Loading kann auf verschiedene Weise funktionieren, daher ist es wichtig, es richtig zu machen. Mit der richtigen Implementierung kannst du die bestmöglichen Ergebnisse erzielen.

So implementierst du Lazy Loading

Du kannst Lazy Loading auf verschiedene Weise implementieren. Einige manuelle Methoden, die CSS verwenden, können für diejenigen funktionieren, die sich mit dem Thema auskennen. CMS-Lösungen, die Plug-ins oder Add-ons verwenden, haben jedoch höchstwahrscheinlich ein Lazy Loading-Modul, das du installieren kannst.

Einige Plug-ins und Add-ons, vor allem Caching-Lösungen, verfügen in der Regel ebenfalls über Lazy Loading-Optionen. Du findest Open-Source-Bibliotheken mit Lazy Loading-JavaScript-Code, den du hinzufügen kannst.

Ganz egal, wie du Lazy Loading implementierst, es gibt einige Best Practices, mit denen du die Vorteile optimal nutzen kannst. Dazu gehören:

• Verwende Lazy Loading nur dort, wo die entsprechenden Bilder nicht direkt sichtbar sind
• Verwende Lazy Loading nicht für wichtige Ressourcen, die für die Funktionalität der Startseite oder App erforderlich sind
• Kontrolliere, ob beim Laden von Bildern Fehler auftreten und behebe diese sofort
• Lege für Lazy Loading sehr strenge Parameter fest
• Kürze den Code für Lazy Loading, um ihn effizienter zu machen
• Implementiere Fallback-Lösungen für Browser, die Lazy Loading oder JavaScript nicht unterstützen

Da Lazy Loading nicht nur für Bilder gedacht ist, kann es sein, dass du dir für andere Inhalte andere Verfahren überlegen musst.

All dies kann überwältigend sein. Daher ist es am besten, erst die Implementierung durchzuführen und sich dann im Laufe der Zeit mit den Einzelheiten auseinanderzusetzen. Wenn du zum Beispiel deine Website für Mobilgeräte optimierst, solltest du dir die UI-Design-Tools ansehen, die dir helfen, Lazy Loading anzupassen.

Optimiere die Benutzererfahrung mit Lazy Loading

Lazy Loading ist ein Tool, mit dem du die Benutzererfahrung optimieren und alle damit verbundenen Vorteile nutzen kannst. Es muss kein Entweder-oder sein, da Lazy Loading sowohl UX als auch UI verbessern kann.

Auch musst du nicht alle technischen Details kennen. Es reichen Tools, mit deren Hilfe du deine Website beschleunigen kannst, ohne selber die gesamte Programmierung erledigen zu müssen.

Jedoch solltest du die Grundlagen verstehen. Nur so kannst du sinnvoll entscheiden, was du implementieren oder welche Services du nutzen solltest, damit deine Website oder App schneller und besser für deine Benutzer funktioniert. Mailchimp bietet eine Vielzahl von Lösungen an, die deine Website beschleunigen und die Benutzererfahrung verbessern können.

Wenn du Integrationen, Informationen und andere Ressourcen benötigst, um deine Website oder mobile App schneller zu machen, schau dir alle Tools an, die Mailchimp anbietet.