Verpasse Shopware den Turbo

Katapultiere Shopware in den Turbo-Modus


Könntest du auch nur ausrasten, wenn diese dämliche Webseite einfach nicht lädt? Du klickst und es passiert überhaupt gar nichts. Sekundenlange Stille, nur um festzustellen, dass du die falsche Seite aufgerufen hast…

Und es passiert nicht nur einmal. Es passiert ständig. Du suchst nach irgendwas und das große Warten beginnt. Irgendwann ändert sich dein Modus: Wenn die Seite nicht innerhalb weniger Sekunden lädt, dann schließt du den Tab und versuchst es eben mit dem nächsten google Eintrag.

Warum sollte es deinen Shop-Besuchern anders gehen als dir?
Die sind genauso ungeduldig und wollen genauso schnell zum Ziel kommen wie du. Bringt dein Shop also nicht die erwartete Geschwindigkeit, dann verlierst du garantiert jeden Tag wertvolle Besucher.

Ist dir eigentlich klar, dass das die pure Geldverschwendung ist?
Der Besucher hat schon auf die google Werbung geklickt! Du hast also schon bezahlt! Aber er wird niemals deine Produkte sehen, einfach weil du zu langsam bist. Autsch, da sollten wir sofort etwas dran ändern…

Warum ist Shopware nicht schon im Standard rasend schnell?

Dein Shop ist ein lebendes System. Du hast den Shop noch nicht live genommen, da hast du schon wieder zwei neue Ideen mit der Agentur besprochen. Und so kommt es, dass dein Shop irgendwann live geht und irgendwie vergessen wurde mal alle Einstellungen durchzusehen und zu optimieren.

Oder es wusste einfach keiner besser und ihr habt euch auf den Standard verlassen. Shopware wird sich schon was dabei gedacht haben und so kriecht euer Shop vor sich hin. Shopware wird in so vielen verschiedenen Szenarien eingesetzt, dass der Standard auf keinen Fall immer passen wird. Also müssen wir selbst nachjustieren.

Was ist möglich?

Es ist nicht sonderlich schwierig deinen Shopware Shop rasend schnell zu machen. Auch als Technik-Laie ist es dir mit den richtigen Einstellungen und dem passenden Hosting möglich deinen Shop zu Ladezeiten von max. 1-2 Sekunden zu bringen. Du musst nur einmal die Systematik verstehen und dann stupide umsetzen 😉

Wenn du schnell bist, dann wird dich google lieben. Stück für Stück wirst du in den Suchergebnissen nach oben wandern, aber natürlich gibt es dazu noch einiges mehr zu beachten. Wir kommen in den nächsten Wochen nochmals darauf zurück.

Auf jeden Fall wird ein schneller Shop die Besucher länger halten. Mehr Leute werden deine Produkte ansehen und mehr Leute werden kaufen. Ich habe schon öfters gesehen, dass nach der Optimierung die Conversion-Rate um bis zu 1% gestiegen ist… Packen wir es also an!

Zu Beginn: Deine Bestandsaufnahme

Natürlich willst du ganz genau wissen was die Optimierungen tatsächlich bringen. Also führen wir zwei ganz einfache Tests durch, die du nach den Optimierungen wiederholen und vergleichen kannst. Führe die Tests für die Startseite, eine Kategorieseite und eine Artikelseite aus, um ein vollständiges Bild zu erhalten.

Heute widmen wir uns ausschließlich den Einstellungen, die du in Shopware selbst vornehmen kannst. Beim nächsten Mal geht es dann um das Hosting – der Grundlage für einen schlagkräftigen Shop.

1. Pingdom Tools

Unter https://tools.pingdom.com/ tippst du bei URL deine Shop-Adresse ein. Außerdem wählst du unter Test from Europe – Germany – Frankfurt aus.

Nach wenigen Sekunden zeigt dir Pingdom einige Analysen zu deinem Shop. Du bekommst einen Performance Grade, die Seitengröße wird dir angezeigt, du siehst wie lange es gedauert hat die Seite zu laden und noch vieles mehr.

Speicher dir diese Seite als Lesezeichen in deinem Browser ab, dann kannst du später nochmals genau die Ergebnisse vergleichen.

2. google PageSpeed Insights

Damit du noch einen zweiten Blick auf die Geschwindigkeit deines Shops bekommst, nutzen wir das passende google Tool unter https://developers.google.com/speed/pagespeed/insights/.

Auch hier gibst du wieder fleißig deine Domain ein und bekommst dafür Messergebnisse für die mobile und die Desktop-Version deines Shops angezeigt. Mach dir vom Ergebnis am besten einen Screenshot, da diese Seite im Gegensatz zu Pingdom nicht als Lesezeichen gespeichert werden kann.

Die 7 richtigen Shopware-Einstellungen

1. Den Produktivmodus einschalten

Bei der Entwicklung deines Shops willst du zu alle Änderungen im Shop sofort nachvollziehen können. Einmal die Seite neu laden und alles ist aktualisiert. Im Hintergrund muss Shopware also bei jedem Seitenaufruf genau abfragen, ob sich irgendwelche Änderungen ergeben haben und das ist ein sehr langwieriger Prozess.

Ist dein Shop live, dann ändert sich nicht jede Minute etwas an den Inhalten. Es wäre also vergebene Liebesmüh, wenn für jeden Besucher alle Änderungen abgefragt werden müssten. Und genau hier kommt das Caching ins Spiel.

Shopware muss dazu auf jeden Fall in den Produktivmodus gesetzt werden. Dazu wählst du im Shopware Backend im Menü Einstellungen > Caches / Performance aus und prüfst, dass der Produktivmodus verwendet wird.

Shopware Produktivmodus

2. Aktiviere den HTTP-Cache

Dadurch, dass dein Shop nun im Produktivmodus ist, kann auch der Cache aktiviert werden. Das ist ganz simpel gesagt ein Zwischenspeicher, der sich die Elemente deines Shops merkt. Kommt ein Besucher auf deine Seite, muss also nicht erst in der Datenbank nachgesehen werden wie das Produkt heißt, wie viel es kostet und was die Beschreibung dazu ist – das dauert viel zu lange. Der Cache hat sich all diese Infos bereits in einer Datei zurechtgelegt und zeigt diese deinem Besucher nun ohne Umwege an.

Rufe im Backend wieder Einstellungen > Caches / Performance auf. Dann wählst du oben den Reiter Einstellungen und dort Allgemein > HTTP Cache. Stelle nun sicher, dass die beiden Haken, wie im folgenden Bild bei HttpCache aktivieren und Automatische-Cache-Invalidierung gesetzt sind.

Shopware HTTP-Cache

Der erste Haken bewirkt, dass das Caching überhaupt aktiv ist – logisch. Der zweite Haken stellt sicher, dass der Cache einer bestimmten Seite direkt verworfen wird, wenn du Änderungen daran vornimmst. Du willst ja nicht, dass ein Kunde einen alten Preis oder ein falsches Produktbild angezeigt bekommt.

So lange soll der Cache halten

In der Tabelle darunter kannst du nun definieren wie lange der Cache für bestimmte Elemente bestehen bleiben soll. Nach Ablauf der Zeit (angegeben in Sekunden) dauert der Aufruf der Seite für den ersten Besucher wieder einmalig länger, weil alle Informationen neu zusammengestellt werden müssen. Aus meiner Sicht sind die Standardeinstellung von 3600 Sekunden (1 Stunde) und 14400 Sekunden (4 Stunden) für die meisten Shops ungeeignet.

Überlege also einfach wie oft du am Tag oder in der Woche etwas am Shop änderst und passe die Einstellungen daran an. Ich setze in der Regel alles auf 86400 Sekunden, also auf einen ganzen Tag.

Nun die neuen Einstellungen noch abspeichern und wir haben die Grundlage für einen schnellen Shop gelegt.

Deinen Cache zum ersten Mal aufwärmen

Damit auch der erste Besucher jeder Unterseite einen schnellen Shop vorfindet, müssen wir den Cache nun aufwärmen. Shopware ruft also im Hintergrund jede einzelne Seite auf, sodass die Informationen abgespeichert werden können.

Klicke dazu einmal auf den Button Cache aufwärmen. Wähle im Dropdown deinen Shop aus und setze die Stapelgröße auf 5 und die Parallelität auf 2. Falls sich nach einigen Sekunden die Ladebalken nicht verändern, breche den Lauf ab und setze die Stapelgröße und Parallelität auf 1 herab.

Je nach Größe deines Shops kann das nun einige Minuten dauern. Natürlich hast du keine Lust den Button immer wieder manuell anzuklicken. Deshalb schauen wir uns gleich eine Lösung zur Automatisierung an.

Shopware Cache aufwärmen

3. Alle Abfragen mit Cronjobs automatisieren

Neben dem Cache gibt es noch einige weitere Angaben, die am besten regelmäßig zusammengestellt werden. Wenn ein Kunde bspw. einen Suchbegriff in die Suche eintippt, dann macht es keinen Sinn nach jedem eingegebenen Buchstaben auf die Datenbank zuzugreifen. Stattdessen sollte auch hier ein schneller Zwischenspeicher befragt werden, der unter Shopware immer als Index bezeichnet wird.

Im Standard verhält sich Shopware hier mal wieder nicht so schlau, denn dieser Index wird nicht im Vorfeld erstellt, sondern erst während der Anfrage des Besuchers. Im Endeffekt könnte man sich den Index in dieser Form auch komplett sparen…

Durch den Einsatz von Cronjobs, lässt sich das Problem aber sehr einfach aus der Welt räumen. Cronjobs sind automatische Prozesse, die regelmäßig im Hintergrund auf dem Server durchlaufen und uns das Leben erleichtern. In unserem Falle werden die Indizes also automatisch einmal pro Tag neu generiert und die Besucher bekommen ihre Anfragen erheblich schneller beantwortet.

Cron Plugins einrichten

Shopware ist schon komplett auf den Einsatz von Cronjobs vorbereitet. Alles was du tun musst, ist zwei Plugins zu aktivieren. Gehe dazu unter Einstellungen > Plugin Manager auf den Menüpunkt Installiert. Suche nun nach den beiden Plugins Cron und CronRefresh. Falls diese noch nicht installiert sind, hole das nun bitte nach, indem du auf das grüne Plus Icon klickst und danach die Plugins aktivierst.

Welcher Cronjob soll wann laufen?

Im nächsten Schritt müssen wir noch prüfen welche Aufgaben der Cronjob überhaupt zu welcher Zeit erledigen soll. Die Einstellungen rufst du unter Einstellungen > Grundeinstellungen > System > Cronjobs auf.

Wähle nun mal beispielhaft HTTP Cache löschen aus. Dieser Cronjob löscht also einmal am Tag den gesamten Cache. Im Standard ist dieser bereits aktiv. Stelle nun sicher, dass die Uhrzeit der nächsten Ausführung nachts zwischen 01 und 05 Uhr stattfindet. Wir wollen auf keinen Fall riskieren, dass tagsüber die Besucher auf eine Seite mit geleertem Cache landen.

Gehe nun alle aktiven Cronjobs in der Liste durch und stelle sicher, dass dies nachts durchgeführt werden.

Shopware Cronjobs

Cache per Cronjob aufwärmen

Ein Cronjob fehlt an der Stelle im Standard von Shopware: Das Aufwärmen des Caches, welches wir weiter oben noch manuell durchgeführt haben. Jedes Mal, wenn nachts der Cache geleert wird, sollte dieser im Anschluss mit den neuen Informationen wieder aufgewärmt werden. 

Dazu gibt es ein geniales und kostenloses Plugin, welches diese Funktion ermöglicht. Lade dir dieses im Shopware-Store runter und installiere es im Plugin Manager:

https://store.shopware.com/compr88163179387f/cache-automatisch-aufwaermen.html

Das Plugin fügt automatisch ein neuen Eintrag in den oben gezeigten Cronjob-Einstellungen hinzu und achtet auch darauf, dass der Job direkt nach dem Leeren des Caches ausgeführt wird.

Cron auf dem Server starten

All diese Einstellungen sind sinnlos, wenn dein Server die Cronjobs nicht startet 🙂 Da die Einstellungen dazu bei jedem Hoster unterschiedlich sind und zur Einrichtung auch ein tieferes Verständnis der Technik notwendig ist, werde ich das hier nicht im Detail erklären.

Sprich also deine Shopware-Agentur an oder mache ein Ticket bei deinem Hoster dazu auf. Die können das auf jeden Fall für dich erledigen oder dir sagen, ob deine Shopware Cronjobs schon aktiviert sind.

Alle weiteren Infos findest du auch in der Shopware-Dokumentation unter https://docs.shopware.com/de/shopware-5-de/einstellungen/system-cronjobs#aufruf-per-shell-konsole.

4. Beschleunigen wir jeden einzelnen Index:
SEO, Suche, Topseller und mehr

Wir rufen im Backend wieder unter Einstellungen > Caches / Performance den Reiter Einstellungen auf. Dort konfigurieren wir nun alle Indizes so, dass sie regelmäßig und automatisch durch die Cronjobs erzeugt werden.

SEO-Index

Unter Allgemein > SEO findest du den ersten Index mit seinen Einstellungen. Alle URLs in Shopware werden nach optimierten Mustern für die Suchmaschinen generiert. Diese URLs sollte täglich aktualisiert werden und genau dafür ist diese Konfiguration zuständig. 

Wähle hier unter Aktualisierungsstrategie, Cronjob aus und setze den SEO-Cache auf 86400 Sekunden, also einen Tag. Mehr gibt es hier nach dem Speichern nicht mehr zu tun.

Shopware SEO-Index

Such-Index

Im nächsten Menüpunkt Allgemein > Suche liegen die Einstellungsmöglichkeiten für die Suchfunktion deines Shops. Auch hier sollte täglich ein Update per Cronjob stattfinden.

Wähle also unter Aktualisierungsstrategie, Cronjob aus und setze die Cache-Zeit auf 86400 Sekunden – also wieder einen Tag.

Shopware Such-Index

Topseller-Index

Unter Marketing > Topseller geht es im gleichen Modus weiter. Egal, ob du die Topseller anzeigst oder nicht, wähle unter Aktualisierungsstrategie, Cronjob aus. Eine zeitliche Komponente kannst du hier nicht einstellen.

Shopware Topseller-Index

Empfehlungsmarketing-Indizes

Bei Marketing > Empfehlungsmarketing – wie sollte es anders sein – folgst du den gleichen Regeln. Als Aktualisierungsstrategie wählst du Cronjob aus und eine zeitliche Komponente gibt es auch hier nicht.

Shopware Empfehlungsmarketing

Zuletzt angesehene Artikel

Kommen wir zur letzten Optimierung in diesem Bereich. Unter Allgemein > Verschiedenes hast du die Möglichkeit die zuletzt angesehenen Artikel in deinem Shop einzublenden. Unterhalb der Seiten sieht der Shop-Besucher also immer eine kleine Merkliste.

Eigentlich eine tolle Sache, aber diese Funktion macht deine Seite extrem langsam. Der Grund ist ganz einfach: Diese Funktion kann nicht im Cache abgelegt werden. Mein Rat ist also auf diese Funktion zu verzichten und den Haken zu entfernen.

Shopware Verschiedene Einstellungen

5. Das Theme beschleunigen

Damit dein Theme, also die Gestaltung deines Shops, schnell lädt und nicht zum Hindernis für deine Kunden wird, nehmen wir uns diesen Punkt noch kurz vor. Unter Einstellungen > Theme Manager findest du alle installierten Themes. Diese interessieren uns aber momentan nicht. Klicke stattdessen oben rechts auf den Button Einstellungen und du bekommst das folgende Fenster angezeigt.

Shopware Theme-Einstellungen

Stelle sicher, dass die ersten beiden Haken auf keinen Fall gesetzt sind. Dein Theme wird sonst deinen Shop extrem verlangsamen. Diese Funktionen sind nur für die Entwicklung gedacht.

Die CSS Source Map hat keinen Einfluss auf die Performance, ist aber auch nur für Entwickler interessant.

Auf jeden Fall solltest du CSS und JavaScript komprimieren lassen. Dadurch werden die vielen Einzeldateien deines Themes in jeweils eine Datei kopiert, was sich direkt positiv im Browser bemerkbar macht.

6. Optimieren wir deine Bilder

Bilder machen in einem Shop meistens über 50% des Traffics aus und lustigerweise werden hier die meisten Fehler gemacht. Wir haben verschiedene Stellschrauben, um die Dateigröße deiner Bilder klein zu halten. Dazu schauen wir uns im Backend unter Inhalte > Medienverwaltung mal den Medienmanager an.

Jedes Bild deines Shops ist einem Ordner abgelegt und jeder Ordner hat seine individuellen Einstellungsmöglichkeiten. Denke also daran die folgenden Schritte für jeden einzelnen Ordner durchzuführen. Wir starten jetzt mal mit dem Ordner Artikel, da hier vermutlich die meisten Bilder drin sind.

Thumbnail-Einstellungen

Klicke in der linken Seitenleiste auf das Zahnrad neben dem Ordner Artikel. Daraufhin öffnen sich die Albumeinstellungen, die für alle Artikelbilder gelten.

Shopware Albumeinstellungen Medienverwaltung

Setze die Thumbnail-Qualität auf den Wert 85. Die High-Resolution Thumbnail-Qualität kannst du auf 60 belassen. Diese gilt z.B. für Apple Retina Displays. Nun klicke auf Einstellungen speichern und rufe die Albumeinstellungen erneut über das Zahnrad auf.

Wenn du die Thumbnail-Einstellungen gerade geändert hast, klicke nun den Button Thumbnails generieren, wähle eine Stapelgröße von 5 aus und lasse alle Thumbnails neu generieren. Die Dateigrößen sollten sich nun durch die Qualitäts-Anpassungen etwas verringern. Außerdem werden alle unnötigen Informationen aus den Bildern raus gelöscht.

Alle weiteren Infos findest du ausführlich in der Shopware-Dokumentation unter https://docs.shopware.com/de/shopware-5-de/inhalte-und-medien/medien.

Die richtigen Thumbnail-Größen verwenden

Der größte Effekt liegt bei den meisten Shops in der Anpassung der Thumbnail-Größen, also der jeweiligen Breite und Höhe in Pixeln. Auf den Kategorieseiten wird im Standard oft das Thumbnail mit einer Größe von 600px x 600px verwendet. Ich sehe aber sehr selten einen Shop der auf der Kategorieseite Bilder einsetzt, die breiter als 300px sein müssten. Das Bild wird also künstlich kleiner dargestellt, als es eigentlich ist.

Die Bilder sind somit im dümmsten Falle doppelt so groß, als sie eigentlich sein müssten! Wenn auf der Kategorieseite 24 Artikel angezeigt werden, haben wir also die Möglichkeit das Datenvolumen von 12 Bildern einzusparen. Das macht einen bedeutenden Unterschied!

Da die Verwendung anderer Thumbnail-Größen direkt in das Theme programmiert werden muss, werde ich den Prozess hier nicht weiter beschreiben. Wichtig ist nur, dass du deine Agentur fragst, ob sie die Thumbnails auch an das Theme angepasst haben. Falls nicht, dann sollen sie sich auf jeden Fall zeitnah darum kümmern!

7. Alle Debug Tools deaktivieren

Zu guter letzt noch ein sehr einfacher und schneller Punkt. Während der Entwicklung des Shops oder einer Fehlersuche kommen verschiedene Tools zum Einsatz. Diese dürfen im Produktionsbetrieb nicht aktiv sein, da sie den Shops extrem verlangsamen.

Debug Plugin deaktivieren

Öffne unter Einstellungen > Plugin Manager die Übersicht aller verwendeten Plugins deines Shops. In der Seitenleiste wählst du den Punkt Installiert aus. Scrolle jetzt nach ganz unten und stelle sicher, dass das Plugin Debug im Bereich Deinstalliert erscheint.

Ist das Debug-Plugin installiert, dann klicke ganz einfach auf das rote Deinstallieren-Icon auf der rechten Seite und du hast dieses Problem aus der Welt geschafft.

Shopware Pluginverwaltung Debug Plugin

Weitere Plugins und Konfigurationen

Wenn dir dein Shop nach all diesen Optimierungen immer noch langsam vorkommt, dann sprich auf jeden Fall mal mit deiner Agentur. Vielleicht sind noch andere Entwickler-Plugins installiert oder in der Konfigurationsdatei deines Shops (config.php) sind noch Einstellungen aus der Entwicklung drin. Vielleicht ist dein Hosting aber auch einfach nicht geeignet, weshalb wir uns diesen Punkt im nächsten Post ansehen werden.

Auf den Punkt gebracht

In diesem Artikel hast du gelernt alle notwendigen Einstellungen in Shopware vorzunehmen, damit dein Shop schnell wie eine Rakete ist. Nimm dir diese Woche auf jeden Fall 2 Stunden Zeit, um alle 7 Schritte durchzugehen oder erledige jeden Tag der Woche einen Schritt davon. Im Anschluss kannst du die Bestandsaufnahme mit den Pingdom Tools und den google PageSpeed Insights wiederholen und deine Arbeit feiern!

Als Shop-Betreiber solltest du auf jeden Fall deine Angst vor der Technik abbauen, denn die Technik ist nun mal Grundlage für dein Geschäft. Ich habe lange überlegt, ob es Sinn macht mit einem technischen Thema in den Blog zu starten und komme zu einem klaren JA. Auch wenn sich deine Agentur um all diese Sachen kümmert, musst du zu mindest ein Grundverständnis dafür entwicklen, um mit der Agentur auf Augenhöhe sprechen zu können.

Beim nächsten Mal erfährst du auf was du beim Hosting achten solltest und welche Voraussetzungen dort für einen schnellen Shop gegeben sein müssen. Mit dem Wissen kannst du problemlos mit deinem Hosting-Anbieter sprechen und die richtigen Fragen stellen – auch, wenn du kein IT-Freak bist.

Nimm deinen Shopware-Umsatz also heute weiter in die Hand und mache deinen Shop rasend schnell!

Dieser Beitrag hat 1 Kommentar

1

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.