Als Shop dem Besucher Emotionen zum Produkt zu vermitteln, ist eine der größten Herausforderungen im E-Commerce, da man auf räumliche Distanz einen guten Eindruck vom Produkt vermitteln muss.

Erreichen kann man dies natürlich mit vielen Bildern oder Videos, die das Produkt zeigen. Die Entwicklung zeigt, dass vermehrt auf die Produktpräsentation mittels Medieninhalten Wert gelegt wird. Die Kehrseite dieser Entwicklung ist, dass Seiten länger laden und der Geschwindigkeitsscore schlechter wird. Aus SEO-Sicht macht man sich so die gewonnenen Vorteile durch längere Besuchszeiten und höhere Interaktionsraten vollständig zunichte. Um dem entgegenzuwirken, haben wir ein Plugin für Shopware entwickelt, dass Bilder “lazy” lädt.

Was versteht man unter Lazy Loading?

Lazy Loading bezeichnet das verzögerte Nachladen von Inhalten. Elemente und Medieninhalte einer Internetseite werden erst dann vom Server geladen, wenn sie zur Ansicht auf einer Seite benötigt werden. Das spart beim ersten öffnen einer Seite viel Zeit, da wirklich nur die Bilder geladen werden, die im aktuellen Sichtbereich liegen. Alle anderen Bilder werden erst dann dynamisch nachgeladen, sobald sie in den sichtbaren Bereich kommen.

Was macht unser Plugin besonders?

Gewöhnliche Lazy Loading Plugins lösen das dynamische Nachladen durch JavaScript. Beim Laden der Seite wird zuerst das HTML geladen und im Anschluss per JavaScript das Laden einzelner Bilder blockiert. Das erhöht schon beim öffnen der Seite die Ladezeit, da der Browser mehr Code ausführen muss als ohne Lazy Loading. So erhöht sich nicht nur beim Laden der Rechenaufwand, auch nach dem öffnen der Seite wird die ganze Zeit Javascript-Code ausgeführt, da geprüft werden muss, wann einzelne Bilder geladen werden müssen. Für den Besucher macht sich dies häufig durch Ladeanimationen bei Bildelementen bemerkbar.

Unser Plugin verzichtet vollständig auf Javascript und nutzt stattdessen den nativen Support von Lazy Loading in modernen Browsern. Das bedeutet: Es ist nicht mehr Rechenleistung notwendig beim Aufbau der Seite, zudem läuft kein Script im Hintergrund und Nutzer sehen keine störenden Ladeanimationen. Die Seite lädt wesentlich weniger Daten beim Aufruf, ohne dabei eine höhere Rechenlast zu haben. 

*OPTIONAL*Wer sich mehr für die technischen Hintergründe unserer Lösung interessiert, findet hier von Google einen ausführlichen Bericht: https://web.dev/browser-level-image-lazy-loading/

Natives Lazy Loading mit Shopware 6

Im Folgenden haben wir einmal mit dem PageSpeed Tool von Google den Shopware 6 Shop gruenshoppen.de untersucht. Hier muss allerdings einschränkend bemerkt werden, dass immer nur eine Seite von dem Tool untersucht wird. Die Vorteile von Lazy Loading sieht man dann besonders deutlich auf Seiten mit vielen Bildern, die über eine gewisse Seitenlänge verteilt sind, damit ein Nachladen der Inhalte erst sinnvoll wird.



PageSpeed Test OHNE Lazy Loading für Shopware 6
PageSpeed ohne Lazy Loading
PageSpeed Test MIT Lazy Loading für Shopware 6
PageSpeed mit Lazy Loading


Fazit

Mit nativem Lazy Loading kann man grundsätzlich nichts verkehrt machen, da eine Verschlechterung der Werte & Ladezeiten, anders als bei der Variante mit JavaScript nicht möglich ist. Ist ein Browser mit der Funktion nicht kompatibel, wird sie ignoriert und hat keine negativen Auswirkungen.
Wir möchten hier außerdem darauf hinweisen, dass das Plugin jeweils nur mit den Standard-Elementen von Shopware kompatibel ist. Für individuelle Elemente ist eine weitere Anpassung notwendig.

Ein Beitrag von Nimbits eCommerce Solutions.

Natives Lazy Loading ohne JS für Shopware 6
Erweiteren Sie Ihren Shopware-Shop mit dem Plugin "Natives Lazy Loading ohne JS" und profetiere von einer geringen Renderzeit der Seite ohne weitere CPU-Last.

Jetzt 10% Rabatt im Shopware-Store sichern! Gutschein-Code: NimbitsHuebertWebentwicklung