« Zurück zum Blog

Shopware Ladezeiten Challenge Teil I - Konfiguration

Das Ziel: Ladezeit unter 2 Sekunden

Hallo und herzlich willkommen im Jahr 2017 und zu diesem ersten Blogpost bei WOTipps. Für dieses Jahr habe ich mir vorgenommen meiner eigenen Installation von Shopware etwas auf die Sprünge zu helfen. Genauer genommen möchte ich die Ladezeiten des Shops auf unter 2 Sekunden drücken. In 3G Netzwerken. Testen werde ich den Shop mit der Drosselung der Chrome Developer Tools. Das ist zwar nicht sehr genau, aber das Beste, das ich aktuell zur Verfügung habe. Mein Nebenziel ist es einen Google PageSpeed Wert von 90 für Mobil und Desktop zu erreichen.

Hier geht es zu den anderen Blogposts der Shopware Ladezeiten Challenge:

In diesem Blogpost möchte ich die wichtigsten Konfigurationen und Einstellungen für einen schnellen Shopware Onlineshop erklären. Leider habe ich im Internet schon viele Tipps gelesen, die sich nicht unbedingt positiv auf die Ladezeit des Shops auswirken… Inhaltlich werde ich mich diesen 6 Einstellungen widmen.

Fangen wir nun mit der einfachsten Einstellung an.

Der Produktivmodus

Der Produktivmodus ist - wie es die Beschreibung schon sagt - dafür verantwortlich den HTTP Cache zu aktivieren. Wenn ein Onlineshop aufgerufen wird, stellt der Server fest welche Kategorien und Produkte aktuell im Shop verfügbar sind. Danach wird die Webseite erzeugt. Der HTTP Cache speichert nun dieses Ergebnis zwischen. Dabei werden nur die Produkte und Kategorien zwischen gespeichert, nicht aber der Warenkorb oder die Accountdaten. Diese werden bei jedem Abruf neu geladen. Damit bekommt jeder Besucher nur das angezeigt, das er sehen darf.

Falls der Shop nicht im Produktivmodus genutzt wird, überprüft der Server bei jedem Aufruf erneut welche Produkte und Kategorien aktuell verfügbar sind. In einer Testinstallation hatte ich 34 Datenbankanfragen, nur um den Header und den Footer des Demoshops zu rendern, plus 42 Datenbankabfragen, um die erste Einkaufswelt zu laden. Das sind eine Menge an Datenbankabfragen. Mit dem Cache entfallen fast alle dieser Anfragen.

Der Produktivmodus ist unter “Einstellungen” im Punkt “Caches / Performance” zu finden. (Ja, einfach darauf klicken, das ist nicht nur ein Menüpunkt. In 5.2. kann man die Option “Caches / Performance” im Untermenü “Caches / Performance” auswählen. Über die Namensgebung des Menüs lässt sich zugegebener Maßen streiten)

Der Cache

Damit der Cache von Shopware aktiviert ist, gibt es noch eine zweite Option, die aktiviert werden muss. Diese findest Du im Tab “Einstellungen” in dem “Caches / Performances” Menüpunkt von eben. Unter “Allgemein” - “HTTP-Cache” ist die Option “HttpCache aktivieren”. Schade, dass es hier keine einheitliche Schreibweise gibt…

Während die erste Option den Cache einschaltet, sorgt die zweite Option dafür, dass Shopware bei aktualisierten Inhalten den Cache automatisch erneuert. Beide Optionen sollten aktiviert werden.

Kommen wir nun noch zur Konfiguration des Caches.

Diese Tabelle zeigt wie der Cache konfiguriert ist. In der “Controller”-Zeile werden die einzelnen Bausteine der Templates aufgeführt, die gecache werden sollen. Du kannst weitere Element hinzufügen, wenn Du z.B. ein weiteres Element in Dein Templates einbaust und es mit in den Cache einbezogen werden soll. Die Zeit ist die Zeit, die die jeweiligen Elemente im Cache verbleiben sollen (in Sekunden). Die Standardeinstellung war hier - glaube ich - 3600 Sekunden bzw. eine Stunde. Da der Shop so häufig nicht aktualisiert wird, reichen bei mir 4 Stunden. Allerdings kann man den Cache auch auf einen Tag oder mehr setzen, da er ja automatisch invalidiert wird, sobald sich etwas ändert.

Jede Seite, die aufgerufen wird, wird in den Cache gelegt. Das heißt allerdings, dass der erste Aufruf der Seite über die Datenbank läuft. Der erste Besucher einer Seite muss also alle Datenbank Abfragen abwarten. Um das zu verhindern gibt es einen magischen Knopf. Drücke ihn so häufig wie möglich ;)

Der Thememanager

Auch der Thememanager bringt Einstellungen mit, die für die Performance wichtig sind. Finden kann man diese in der oberen Leiste des Thememanagers direkt unter dem Titel. (Der Thememanager ist in den Einstellungen zu finden.)

Ich möchte hier kurz die 5 Auswahlmöglichkeiten erklären. Nummer 1, “Neuladen der Textbausteine erzwingen”: Diese Option schaltet vereinfacht gesagt den Cache aus. Jedes Template wird in verschiedene Bausteine wie Header, Footer, usw. unterteilt (siehe Cache). Wenn das erneute Laden der Bausteine erzwungen wird, muss der Onlineshop diese erneut erzeugen, den Inhalt aus der Datenbank laden und verlangsamt damit das Laden der Webseite. Diese Option sollte daher nicht aktiviert sein.

“Compiler Caching deaktivieren”: Eine Webseite ist unterteilt in Designdaten (CSS), Inhalt (HTML) und aktive Elemente (JavaScript). Diese werden in Shopware gebündelt und als eine einzelne Datei in die Seite eingebunden. Dadurch wird das CSS und JavaScript jedes Plugins und des Themes zusammengeführt, was sich positiv auf die Ladezeit auswirkt. Das nennt man kompilieren. (Ich weiß, hier geht es auch um Less und Sass, aber das würde hier zu weit führen.) Shopware kann nun die kompilierten Dateien aus dem Cache laden oder sie erneut kompilieren. Die schnellere Variante ist natürlich der Cache. Daher sollte diese Option nicht genutzt werden.

“CSS Source Map erstellen”: Das ist eine CSS spezifische Einstellung, die keine Auswirkung auf die Performance hat. Ich empfehle diese Option zu aktivieren.

“CSS komprimieren”: CSS wird menschenlesbar geschrieben. Das bedeutet, dass viele Leerzeichen und Zeilenumbrüche eingebaut werden, die ein Computer nicht benötigt, um die Seite anzuzeigen. Diese werden gelöscht, um die Webseite zu beschleunigen. Eine genaue Beschreibung kannst Du bei den Tipps unter “HTML, CSS und JavaScript reduzieren” finden. Diese Option sollte aktiviert sein.

“JavaScript komprimieren”: Bei diesem Punkt wird die selbe Idee genutzt, wie bei “CSS komprimieren” Eine genauere Beschreibung gibt es auch hier unter “HTML, CSS und JavaScript reduzieren”. Diese Option sollte aktiviert sein.

Die Thumbnail Einstellungen

Um diese Option zu finden, musste ich sehr lange suchen, aber sie ist es wert. Die Thumbnail Einstellungen sind unter “Inhalte” - “Medienverwaltung” zu finden. Dort kann man für jeden Ordner auf den Einstellungsknopf klicken oder im Kontextmenü (Rechtsklick auf das Album/den Ordner”) “Einstellungen” auswählen.

Die wichtigste Einstellung hier sind die beiden Qualitätseinstellungen. Ich habe schon gelesen, dass man hier die beiden Optionen einfach auf 100 stellen soll, um die besten Bilder zu bekommen. Die Qualität sollte niemals(!) auf 100 stehen. Warum? Ab ca 85 kann man den Qualitätsunterschied nicht mehr erkennen. Die Größe der Bilddatei kann sich aber zwischen 85 und 100 verdoppelt. Wenn hochqualitative Bilder das A und O des Shops sind, kann diese Einstellung auf 90 gesetzt werden. Das ist allerdings das höchste der Gefühle. Mehr ist nur Verschwendung der Bandbreite des Kunden.

Bitte denk daran, diese Einstellung muss für jeden Ordner und jedes Album extra gesetzt werden.

Der Expires Header

Der Expires Header signalisiert dem Browser, dass er bestimmte Daten zwischen speichern kann. Eine genaue Erklärung gibt es bei den Tipps zu finden (“Browser Caching einschalten”). Diese Einstellung ist sehr wichtig und wird daher von Shopware automatisch gesetzt. Allerdings muss dazu ein Apache Server Modul vorhanden sein (das Expires Modul, wer hätte es gedacht). Diese Modul ist auf den meisten Servern standardmäßig installiert… ich durfte jedoch feststellen, dass es bei meinem Hoster nicht installiert war. Und mein Hoster ist für Shopware zertifiziert. Ich habe das “Shopware Hosting” Paket. Ein Anruf hat es gerichtet und das Modul war in Null-Komma-Nichts installiert.

So findest Du heraus, ob der Header gesetzt ist: Ruf in Deinem Browser das Entwickler Menü auf. Das geht nur am Desktop, leider nicht am Handy Im Firefox findest Du das Menü im Hamburger Menü.

Im Chrome Browser findest Du Menü unter “Ansicht” - “Entwickler” - “Developer Tools”.

In den jeweiligen Tools musst Du in den Netzwerk Tab gehen. Dann Deine Seite erneut laden. Danach kannst Du auf jede Datei klicken, um die Header zu sehen. Diese sind im Tab “Header”. Dort sollte der Expires Header oder alternativ ein Cache-Control Header vorhanden sein. Es macht hierbei keinen Unterschied welcher der beiden Header vorhanden ist.

Die GZip Komprimierung

Genauso wichtig wie der Expires Header ist die Komprimierung aller Textdateien Deiner Webseite (HTML, CSS, JavaScript, SVG). Alle Details rund um die Komprimierung findest Du in den Tipps “Die Kompression einschalten”. Wichtig ist dabei, dass die Webseite vor der Auslieferung komprimiert wird, um die Webseite zu beschleunigen. Die Komprimierung kannst du genauso prüfen, wie den Expires Header. Falls der Content-Encoding: gzip oder der Content-Encoding: deflate Header gesetzt sind, wird Deine Webseite komprimiert.

 

« Zurück zum Blog