Lazy Loading: Pagespeed-Pflichtprogramm für Onlineshops?

Shopbetreibern wird inzwischen sehr viel abverlangt: Sie müssen ihren Besuchern ein voll ausgestattetes Shopsystem mit einer schönen Storefront und mit zahlreichen hochauflösenden Bildern zu Produkten und Kategorien bieten – und das alles soll dann auch mobil auf allen Geräten und bei jeder noch so schwachen Internetverbindung jederzeit und überall blitzschnell geladen werden. Immer mehr Händler setzen daher beim Ausliefern der Bilder auf einen sehr wirksamen Trick: Lazy Loading. Wir erklären, was für eine Technologie dahintersteckt, wie sie sich implementieren lässt und welche Vor- und Nachteile damit verbunden sind.

Performance im E-Commerce: Schnelle Shops machen mehr Umsatz

Untersuchungen zufolge verlassen rund 40 Prozent der Besucher eine Website, wenn sie nicht innerhalb von drei Sekunden geladen wird. Das bedeutet für die Betreiber von Onlineshops potenziell einen massiven Verlust von Traffic, Konversionen und Umsätzen – es sei denn, sie stellen sicher, dass die Seiten ihres Shops auch über schwächelnde Mobilverbindungen noch zuverlässig schnell geladen werden.

Damit die Performance eines Shops auch beim Onlineshopping auf Mobilgeräten und bei Spitzenlasten stimmt, gibt es eine ganze Reihe von Punkten zu beachten. In unserem Blog-Beitrag “Der schnelle Shop” haben wir dazu eine Zusammenfassung geliefert. Aber auch wer mit seinem Onlineshop in den Bereichen Hardware, Software, Caching und so weiter gut aufgestellt ist, steht an einer Stelle scheinbar vor der Quadratur des Kreises: Bilder, die in mehr oder weniger großer Zahl und noch dazu in möglichst guter Qualität im Frontend angezeigt werden sollen, verzögern die Seitenladezeiten enorm. Auch wenn die Dateien nach allen Regeln fortgeschrittener Bildbearbeitung komprimiert worden sind, bleiben sie der mit Abstand größte Posten bei der Übertragung der Daten vom Server zum Endgerät des Nutzers, der bisweilen empfindlich lang warten muss, bis die Seite so weit geladen ist, dass sie sich endlich bedienen lässt.

Ein Dilemma, aus dem es keinen zufriedenstellenden Ausweg gibt? So scheint es. Aber der als „Lazy Loading“ bezeichnete technische Kniff ist die Lösung für genau dieses Problem.

Was ist Lazy Loading?

Die Bezeichnung „Lazy Loading“ klingt erst einmal nach entspannter Langsamkeit, sorgt am Ende aber für das genaue Gegenteil: größtmögliche Geschwindigkeit. Was auf den ersten Blick paradox erscheint, ist aber bestechend logisch: Beim Lazy Loading werden Bilder für die Darstellung im Browser auf dem Endgerät erst ganz allmählich nachgeladen, nachdem der eigentliche Seitenaufbau dort bereits abgeschlossen wurde. Für den Aufbau der Seite im Browser werden zunächst nur diejenigen Bilder geladen, die „above the fold“ (ATF), also im auf Anhieb sichtbaren Bereich angezeigt werden. Und falls sich oben auf der Seite ein Slider mit einem Dutzend Bilder befindet, wird davon vorerst nur das erste, sofort sichtbare geladen, während die übrigen erst später nachgeladen werden. Beim Lazy Loading werden die Bilder für eine Seite also nicht stapelweise direkt nach dem Seitenaufruf ausgeliefert, sondern erst nach und nach – jeweils bei Bedarf.

Lazy Loading als UX- und Conversion-Booster

Da mit Lazy Loading für den ersten Seitenaufbau zumeist höchstens ein oder zwei Bilder benötigt werden, ist das Laden von Seiten auf diese Weise sehr schnell abgeschlossen, so dass sie sich bereits bedienen lassen, während erst beim Scrollen (beziehungsweise Sliden) Stück für Stück die übrigen Bilder nachgeladen werden. Für die Pagespeed-Optimierung im Hinblick auf die von Google als „Core Web Vitals“ zusammengefassten Metriken, die besonderen mit der Optimierung für Mobilgeräte verbundenen Herausforderungen und die Steigerung von Konversionsraten und Umsätzen ist Lazy Loading daher ausgesprochen wertvoll. Und gerade für Onlineshops ist diese Technologie besonders relevant, ja in vielen Fällen sogar elementar wichtig, da oft sehr viele Bilder von Produkten auf Kategorieseiten erscheinen und auch Produktseiten inzwischen immer häufiger aufwendige Bildergalerien mit Zoomfunktion enthalten.

Lazy Loading und SEO

Durch den Einsatz von Lazy Loading lässt sich nicht nur die User Experience (UX) deutlich verbessern. Auch im Hinblick auf die Suchmaschinenoptimierung (SEO) von Onlineshops bringt diese Technologie einen echten Gewinn, da kurze Ladezeiten auch von Google sehr wohlwollend zur Kenntnis genommen und in Form besserer Rankings honoriert werden Das wurde für Mobilgeräte zuletzt durch das Page Experience Update 2021 noch einmal unterstrichen und soll vom Frühjahr 2022 an auch auf die Rankings für Desktop ausgeweitet werden. Ein wichtiger Punkt in diesem Zusammenhang: Nur die Bilddateien werden beim Lazy Loading später geladen, während alle anderen Inhalte, die für SEO relevant sind (Image-Title, Alternativtext und so weiter), bereits unmittelbar geladen werden. Was genau außerdem zu beachten ist, lässt sich in der Google Dokumentation zu Lazy Loading nachlesen.

Vor- und Nachteile von Lazy Loading

Lazy Loading ist in mehrfacher Hinsicht eine sehr leistungsfähige Technologie. Aber gerade wenn bei der Implementierung nicht auf die Details geachtet wird, kann die Integration auch Nachteile mit sich bringen – und die sind auf den ersten Blick oftmals gar nicht zu erkennen.

Vorteile von Lazy Loading

Die Vorteile von Lazy Loading liegen auf der Hand:

• Kürzere Ladezeiten
  Lazy Loading reduziert die Seitenladezeit einer Website oder Anwendung deutlich.
• Geringeres zu übertragendes Datenvolumen
  Durch das bedarfsorientierte Laden verbraucht die Seite einerseits weniger (mobiles) Datenvolumen und Speicherplatz auf dem Gerät, während andererseits das Traffic-Aufkommen auf dem Host-Server verringert und unnötige SQL-Ausführungen in der Datenbank werden vermieden werden.
• Bessere User Experience
  Nutzer springen nicht wegen langer Ladezeiten ab und können mit den in kürzerer Zeit geladenen Seiten schneller und flüssiger interagieren.

Nachteile von Lazy Loading

Es gibt auch eine Reihe von (potenziellen) Nachteilen:

• Je nach Art der Implementierung ist zusätzliches JavaScript notwendig beziehungsweise es müssen externe Libraries wie jQuery eingebunden werden.
• In bestimmten Fällen kann der Lazy-Loading-Effekt für die User Experience unerwünscht sein.
• Mit Lazy Loading fehlt – je nach Art der Implementierung – die Angabe von Bildgrößen im -Tag.
• Lazy Loading kann bei unsauberer Implementierung den LCP (Largest Contentful Paint, Teil der Core Web Vitals von Google) verschlechtern.

Wie lässt sich Lazy Loading in einem Onlineshop implementieren?

Es gibt unterschiedliche Wege, um Lazy Loading in einer Website oder einem Onlineshop zu implementieren: nativ, per JavaScript, mithilfe einer Extension beziehungsweise einem Plugin oder über Moduleinstellungen im Webserver.

1. HTML bietet mit dem Loading-Attribut für Bilder (img) und iFrames (iframe) nativ die Möglichkeit, Medieninhalte für das allmähliche Nachladen zu markieren (loading=”lazy”). Chrome unterstützt das seit 2019, Firefox seit 2020.
2. Durch das Einbinden von eigenem JavaScript beziehungsweise externen JS-Bibliotheken lässt sich Lazy Loading für die gesamte Website oder den Onlineshop implementieren und konfigurieren. Auf diese Weise lassen sich die Quellpfade der Bilder zunächst aus dem Quelltext herausfiltern und durch Platzhalter ersetzen, die dann erst bei Bedarf durch die src-Attribute mit den Bildpfaden ersetzt werden. Implementierung und Konfiguration sollten bei dieser Methode allerdings nur von erfahrenen Entwicklern vorgenommen werden.
3. Empfehlenswert ist in vielen Fällen das Einbinden von Lazy Loading in einen Onlineshop mithilfe einer entsprechenden Extension oder eines Plugins. Dabei ist aber unbedingt darauf zu achten, dass es sich um eine qualitativ hochwertige und aktuell weiterentwickelte Erweiterung mit möglichst vielen Downloads und positiven Erfahrungsberichten handelt.
4. Wer in seinem Apache oder Nginx Webserver das Pagespeed Modul von Google verwendet, kann auch darin die Lazy-Loading-Funktionalität aktivieren. Da dieses Modul jedoch nicht ganz einfach zu konfigurieren ist und in vielen Anwendungsfällen erfahrungsgemäß zu unerwünschten Effekten führt, ist diese Methode nur eingeschränkt zu empfehlen.

Lazy Loading für Shopware

Im Shopware Store gibt es eine ganze Reihe von Plugins, mit deren Hilfe sich Lazy Loading in Shopware Onlineshops integrieren lässt. Für Shopware 5 steht zum Beispiel das Lazy-Loading-Modul „Nicht sichtbare Bilder aufschieben“ zur Verfügung und für Shopware 6 gibt es unter anderem das Plugin „Natives Lazy Loading ohne JS – Nicht sichtbare Bilder aufschieben“ von Nimbits, das ganz ohne zusätzliches JavaScript auskommt.

Lazy Loading für Magento

Auch für die Integration von Lazy Loading in Magento Onlineshops stehen im Magento Marketplace zahlreiche unterschiedliche Extensions zur Verfügung. Oftmals ist Lazy Loading in diesen Erweiterungen eines von mehreren praktischen Features für die Pagespeed-Optimierung des Shops. Die Extension „Google Page Speed Optimizer” von Amasty zum Beispiel kann die Geschwindigkeit auf Mobil- und Desktopgeräten signifikant erhöhen. Sie ermöglicht es, die Größe von Bildern für die Darstellung auf Mobilgeräten automatisch anzupassen, JS- und CSS-Dateien zusammenzufassen und zu minimieren – und natürlich Lazy Loading zu aktivieren.

Lazy Loading out of the box: Magento 2 mit Hyvä

Wer Magento 2 nutzt und dabei auf die junge, schlanke und ausgesprochen schnelle Storefront Hyvä Themes setzt – oder damit liebäugelt –, braucht sich über ein zusätzliches Lazy-Loading-Modul keine Gedanken zu machen. Ein Magento Shop mit Hyvä Themes hat Lazy Loading standardmäßig aktiviert, was sich auch in unserem offenen Magento 2 Demoshop mit Hyvä Themes bemerkbar macht.

Wir sind eine Hyvä Agentur und wer dieses und weitere Feature und die Pagespeed von Magento im Zusammenspiel mit Hyvä Themes in einem eigenen 30-Tage-Demoshop testen möchte, kann sich bei uns per Kontaktformular kostenlos einen bestellen.

Brauchen Sie Unterstützung?

Sie haben einen Onlineshop auf der Grundlage von Magento oder Shopware und würden sich gern zur Integration von Lazy Loading beraten lassen? Wenden Sie sich gern direkt an uns, so dass wir gemeinsam mit Ihnen alle wichtigen Fragen im Hinblick auf Pagespeed, UX und SEO klären können. Unsere zertifizierten Entwicklerinnen und Entwickler können anschließend die für Ihre Bedürfnisse passende Magento Extension, das richtige Shopware Plugin – oder auch Hyvä Themes für Sie installieren und konfigurieren.

Jetzt beraten lassen!