Vollspeed im E-Commerce – 4 Magento Performance-Tipps

Schnelle Ladezeiten sind vor allem in den Zeiten des vermehrten mobilen Shoppings das A und O eines ertragreichen Onlineshops. Auch wenn viele mittlerweile ein gut funktionierendes und schnelles mobiles Netz haben, kann das initiale Laden oder schnelles hin und her Springen zwischen Produkten oftmals etwas dauern, wenn der Shop nicht richtig optimiert wurde. Und man selbst kennt es ja sehr gut, wie abschreckend lange Ladezeiten während des Shopping-Erlebnisses wirken können.

Webp & Lazy Loading

Wenn man im Internet viel unterwegs ist, hat man bestimmt schon mal den Begriff „WebP“ gehört oder als Dateiendung gesehen. Das, unter anderem von Google entwickelte, Bildformat WebP ist ein Format, das hohe Qualität bei gleichzeitiger Reduzierung der Dateigröße bietet, was bei einem Onlineshop oder auch Webseite zu einer merkbaren Reduzierung der Ladezeiten führen kann.
Gerade in einem Onlineshop, wo logischerweise viel mit Bildern auf Produkt- oder Kategorie-Ebene gearbeitet wird, summiert sich schnell die Datenmasse, die vor allem initial geladen werden muss.

Was kann man als Shopbetreiber nun tun? Muss man alle Bilder durchgehen und diese konvertieren, damit man einen Performance-Boost erhält?
Leichter als das! Für Magento 2 nutzen wir bis jetzt sehr erfolgreich das Modul WebP2 von Yireo, welches im laufenden Betrieb, vor der Auslieferung der Inhalte an den Nutzer, die Bilder erkennt und im Hintergrund automatisch konvertiert und neu einbindet.
Möchte man wenig Aufwand haben, muss man also nichts Weiteres tun. Das Modul macht für uns die Arbeit und sorgt für schnelle Ladezeiten der Bilder.

Wenn man noch einen draufsetzen möchte, kann man manchen Bildern zusätzlich sagen, dass sie faul sein dürfen. Das ist in diesem Fall sogar etwas Positives und nennt sich “Lazy Loading”. Die Bilder, die man als “Lazy Load” definiert, werden erst dann geladen, wenn man zu dem Seitenbereich scrollt, wo sich diese befinden. Das hat den Vorteil, dass die initiale Seitenladezeit so gering wie möglich gehalten wird. Das ist wichtig, um den Kunden direkt an den Shop zu binden und nicht mit langen Ladezeiten abzuschrecken.
Um die Ladezeit des eigenen Webshops zu testen, bietet sich das Tool PageSpeed Insights an.

Varnish

In unserer Liste an Fremdwörtern sind wir bei „Varnish“ angekommen. Klingt einfach wie eine weitere Technik Vokabel, ist aber ein ziemlich cooles und einfach zu verstehendes Konzept. Ich erkläre es einmal so simpel, wie es nur geht: Wenn eine Seite aufgerufen wird (z.B. Startseite), wird sie beim allerersten Aufruf von einem Kunden, in einen serverseitigen Speicher geschrieben. Aus diesem Speicher wird die Seite dann einfach 1:1 herausgelesen, wenn das nächste Mal jemand diese aufrufen möchte. Das heißt, dass im Hintergrund gar nicht erst der Webserver beziehungsweise das Magento bemüht werden muss, da die Seite schon vollständig vorliegt. Das gibt dem Shop einen unfassbaren Performance-Boost. Gerade weil der Varnish-Speicher zwischen allen Nutzern geteilt wird, muss nur eine Person die Seite aufgerufen haben und die Anderen profitieren von der Schnelligkeit.
Viele, die technisch in Magento etwas bewanderter sind, werden jetzt sagen: „Aber das ist doch eigentlich fast genauso wie der interne Cache von Magento!“.

Dazu kann ich nur sagen: Richtig! Aber noch besser! Varnish ist im Grunde nur eine weitere Caching-Methode, die aber dem kompletten Magento und sogar Webserver vorgeschaltet ist. Dadurch ist sie blitzschnell und momentan das beste, was man für seinen Shop benutzen kann. Wir empfehlen also Varnish für jeden Webshop, als auch für jede Webseite zu installieren. Nehmt gerne Kontakt mit uns auf, wenn ihr Hilfe oder Beratung dabei benötigen.

Redis

Ein 1 zu 1 Caching einer Startseite kann sehr sinnvoll sein. Es gibt auf der anderen Seite aber auch Bereiche in unserem Online-Shop, wo wir gar kein Caching haben wollen. Ein ganz prägnantes Beispiel ist hier alles, was mit dem Checkout und dem individuellen Kaufprozess des Kunden zu tun hat. Wenn man mal so darüber nachdenkt, wird einem direkt klar, dass der Checkout Prozess des Kunden sehr individuell ist.
Jeder Kunde hat nicht nur verschiedene Produkte mit verschiedener Anzahl und gegebenenfalls sogar einem individuellen Kundenrabatt in seinem Warenkorb. Wenn es zum Bezahlen geht, hat natürlich jeder Kunde auch eine eigene Lieferadresse oder Standard-Zahlungsart. Diese Benutzersitzungen werden natürlich nicht gecached und müssen separat verwaltet werden.
Standardmäßig nutzt Magento hierfür das Dateisystem und legt die sogenannten Sessiondaten unter var/session ab. Das funktioniert auch grundsätzlich erstmal ganz gut, ist aber gerade in einem hochfrequentierten Webshop die unperformanteste Variante, da das Dateisystem immer am langsamsten ist.
Aber auch hierfür gibt es eine tolle und einfache Lösung: Redis.
Redis gehört zu der Familie der NoSQL-Datenbanken und speichert für Systeme, wie z.B. Magento 2, so etwas wie die Benutzersitzungen in einer hochleistungsfähigen Datenbank, die dann statt des Dateisystems angefragt wird.
Zusammengefasst einfach eine viel schnellere Alternative, die Sessiondaten schreib- und lesbar zu machen, um die Performance und damit das Benutzererlebnis in den letzten Zügen des Kaufes zu optimieren. Das spiegelt sich im Endeffekt natürlich auch in der Conversion-Rate wieder.

Hyvä & TailwindCSS

Neben den schon genannten Methoden, die man sich meist einfach zusätzlich dazu konfigurieren kann, ohne groß etwas am Shop zu ändern, gibt es auch noch einen größeren Schritt.
Wenn man seinen Shop sowieso relaunchen möchte oder einen ganz neuen Shop plant, dann kann man direkt auf das neue Hyvä-Frontend für Magento 2 setzen. Hyvä ist kein Magento eigenes Produkt, sondern wurde von schlauen Köpfen aus der Community entwickelt, die in ihrem Alltag viel mit Magento zu tun haben und die typischen Pain-Points kennen.
Neben einer sehr großen Bandbreite an Features, die Hyvä bietet und mit denen nicht nur das Leben der Entwickler, sondern auch der Shopbetreiber erleichtert wird, wird auch ein großes Augenmerk auf Performance gelegt. Eine gute Shop-Performance ist sozusagen mit der DNA von Hyvä festverdrahtet.
Unter anderem sorgt dafür auch der Einsatz des bekannten CSS-Frameworks „TailwindCSS“, womit die Seite schnell und einfach schön designed werden kann. Der Vorteil für die Ladezeiten kommt hierbei aus dem Vorgehen, wie Tailwind die notwendigen Dateien für das Design bündelt. Anstatt große CSS-Dateien bereitzustellen, die der Nutzer beim Aufrufen der Seite im Hintergrund laden muss, wird beim kompilieren des Hyvä Projekts durch Tailwind wirklich nur das wirklich notwendigste in die finalen Dateien gebündelt und teilweise sogar noch weiter vereinfacht.

Wo anfangen?

Im Thema Performance- und Ladezeiten-Optimierung kann man mehrere Wege gehen, um schnell erste Erfolge zu sehen. Wenn diesbezüglich noch Fragen offen sind, ihr nicht wisst wo ihr anfangen sollt oder einfach von den technischen Vokabeln überfordert seid, meldet euch gerne bei uns. Zusammen finden wir nicht nur eine individuelle Lösung für euer System, sondern begleiten euch auch durch die komplette Umsetzung bis hin zum Erfolg.