Shopware optimieren mit 5 einfachen Maßnahmen

shopware optimierung
Ein gängiges Szenario: die SEO-Agentur hat ihr Gutachten erstellt und konkrete Maßnahmen stehen an, um das Ranking zu verbessern. Glücklicherweise tappt man heute nicht ganz im Dunkeln, was Google eigentlich von einer Website erwartet. Dass Geschwindkeit ein Faktor ist, ist schon länger bekannt und Google Pagespeed gibt es inzwischen auch in einer grafisch aufpolierten Version. https://developers.google.com/speed/pagespeed/insights

Shopware steht SEO-technisch schon sehr gut da, aber auch hier kann man noch einiges an Maßnahmen durchführen, um den Shop zu optimieren – und schneller zu machen. Ich möchte das gerade mal an einem Fallbeispiel durchgehen. Der entsprechende Shop mit Version 4.2.2 kam vor den Maßnahmen auf 61/100 Punkte für die Desktopversion.

1) eigene Regeln für mod_deflate hinterlegen
In der htaccess Datei muss die Komprimierung angepasst werden


AddOutputFilterByType DEFLATE text/plain text/html text/xml
AddOutputFilterByType DEFLATE text/css text/javascript
AddOutputFilterByType DEFLATE application/xml application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript



2) Javascript Minifizierung
Hier bewegen wir uns in leicht steinigem Terrain. Und zwar müssen die Javascript Dateien der Shopware Templates in den Mastertemplates _default und _emotion minifiziert werden. Bei der Minifizierung werden im Unterschied zu CSS nicht nur die Whitespaces entfernt, sondern auch Variablen umbenannt und verkürzt. Daher der Sicherungshinweis: die Dateien sind danach nicht mehr human readable und daher unbrauchbar für die Entwicklung. Also ein Backup anlegen.
Das alles ist kein Problem. Der unschöne Teil ist: Es müssen hierfür direkt die Shopware-eigenen Templates angepasst werden. Ich könnte die entsprechenden Dateien in mein eigenes Template auslagern. Dann muss ich aber bei jedem Update abgleichen, ob sich etwas in den Javascript-Files geändert hat. Gewonnen habe ich dadurhch nichts. Mein Kompromiß: Backup Files der Javascript-Dateien unkomprimiert anlegen, den Sourcecode minifizieren lassen und in den Files ersetzen. Nasty, but it works.

3) CSS Minifizierung

Diese wird zwar von Google Insight angemahnt, verbessert die Punktzahl aber nur minimal. In meinem Beispiel wurde die Wertung um gerade mal einen Punkt verbessert. Dafür muss ich in Shopware alle CSS Files von Hand verkleinern. Es werden in den Dateien nur die Leerzeichen entfernt – richtig viel Einsparungen ergibt dies nicht. Im Unterschied zu Yslow verlangt PageSpeed Insights keine Concatenierung von CSS Files. Das wird vermutlich einiges an Geschwindigkeit bringen, da nicht mehr mindestens 7 CSS Files im Header eingebunden werden. Von Hand ist der Aufwand riesig, man sollte hier am besten einen Workflow mit Grunt.js aufstellen, wobei diese Task teilautomatisiert ablaufen. Selbst dann werden ich noch einen erhöhten Wartungsaufwand haben, da Updates auf dem Server ausgeführt werden, Taskrunner wie grunt.js jedoch lokal betrieben werden.

4) Antwortzeit des Servers

Um eine sehr lange Diskussion sehr kurz zu machen: auf Shopware spezialisiertes Hosting wählen. Auch mit Apache kann man sehr gute Auslierferungszeiten erreichen. Die Shopware AG hat zu Serverzeiten in ihrem Wiki einen Artikel veröffentlicht. Ich kann Shopware optimieren, wenn ich das Caching im Backend (siehe Einstellungen unter dem Menüpunkt Cache) aktiviere und richtig konfiguriere. Shops mit wenigen Produkten und wenigen multidimensionalen Varianten sind hier im Vorteil. Ebenso können Crosspromotions inkl. Datenbankabfragen über das Cache Modul deaktiviert werden. Auch Zusatzprogrammierungen und Plugins schlagen auf die Auslieferungszeit.

5) Bilder optimieren

Bilddateien werden in der Regel nicht optimiert gespeichert. Bei Fotos sind beispielsweise sehr viele Metadaten mit in der Bilddateien, die im Web nicht benötigt werden. Ebenso ist die meiste Komprimierung nicht wirklich optimiert. Ich exportiere normalerweise Dateien etwa aus Adobe Photoshop und kann hier bei .jpg die Komprimierungsrate wählen. Damit kann ich die Bildgröße verkleinern, ab einer zu starken Komprimierung wird das Bild verpixelt.
Diese Komprimierung reicht Google allerdings nicht aus bei den meisten Bilddateien wird die Größe bemängelt.
Diese Diskussion ist nicht neu und es gibt hierfür spezielle Webdienste. Ich hatte exemplarisch eine Datei ausprobiert. Unkomprimiert war die 1000x94px große Datei 111 KB groß.
Folgende 2 Dienste lieferten:
http://www.jpegmini.com 84kb
http://www.smushit.com 83kb
Relativ frustrierend, dass die Ergebnisse dieser beiden Webdienste immer noch weit entfernt von den laut PageSpeed möglichen 36,2 KB liegen. Erst als ich ImageOptim lokal installierte, kam ich auf 47 KB Dateigröße und die Datei verschwand aus der Liste der monierten Images.

Die Grenzen oder ein Bonbon gefüllt mit Wermut zum Schluß: Plugins und Widgets von Drittanbietern lassen sich nicht ohne weiteres optimieren. Plugins binden ihre eigenen Ressourcen ein: seien es CSS-Dateien oder Bilder von eigenen Servern, die nicht gecacht sind. Zugriff darauf: oft keiner. Dadurch scheidet nahezu auch die „above the fold“ Unterbringung von Javascript vor dem abschließenden body-Tag aus. Erfolgt z.B. der Zugriff auf eine jQuery-Methode vor Einbindung, dann wird im schlimmsten Fall der Shop lahmgelegt, wenn der Browser der Users Javascript Exceptions unkulant behandelt. Und hier würde ich mich eher zugunsten von Sicherheit als von Geschwindigkeit entscheiden. Ebenso habe ich das Thema „mobil“ komplett ausgeklammert.

Fazit: 90 / 100 Punkten nach den oben beschriebenen Maßnahmen. Ganz ordentlich!

Nachtrag: für Image-Optimierung macht das Online-Tool http://optimizilla.com/ definitiv Sinn. Oben genannte Datei konnte ich auf 14 KB reduzieren.

Schreibe einen Kommentar

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

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.