Wir beginnen heute eine vierteilige Reihe zu unserem Shop-Lieblingsprodukt Shopware ab der Version 4.0:
1. Ladezeitoptimierung
2. SEO/
3. Usability
Verbessern Sie die Ladezeiten für Ihren Shop mit einen paar Analysen und Handgriffen.
So schön Shopware auch ist, schleppt es doch eine Menge Ballast mit sich herum. So werden die verschiedenen Frameworks genutzt, Javascript Erweiterungen (Extensions) und andere kleine Codestückchen nachgeladen.
Nun hat sich eine Menge vom Wechsel von der Version 4.0 auf 4.1 getan. Wenn Sie noch die 4.0 verwenden, dann sollten Sie über ein Update nachdenken, da alleine durch das bessere Caching schon fast 1 Sekunde Ladezeitverbesserung herausholbar ist.
Bevor Sie jetzt gleich loslegen, prüfen Sie ob Ihr System wirklich bereit ist für das Update, da viele Module nur mit Version 4.0.x kompatibel sind.
Bei unserem eigenen Shop war der Wechsel auf 4.1. schon ein großer Erfolg. Gut erkennbar auf dem Ladezeitenchart (1).
Erst die Analyse
Starten Sie mit einer Ladezeitanalyse. Hierfür bieten sich Tools wie Google Pagespeed oder auch die Firefox Erweiterung YSlow an. Hier können Sie einen ersten Eindruck von der Performance Ihres Shopware Systems erhalten.
Google Pagespeed gibt Ihnen schon die ersten Infos was Sie besser machen können und was Sie bereits (aus Googles Sicht) schon umgesetzt haben.
Neu ist die mobile Darstellung bei Pagespeed. Hier werden jetzt Desktop und Mobile getrennt bewertet, da es auch unterschiedliche Konzepte sind.
Jetzt hängt es auch von Ihrer Serverumgebung ab ob Sie überhaupt alle vorgeschlagenen Maßnahmen umsetzen können.
Browsercaching und Komprimierung sind z.B. auf einen Apache Webserver nicht ohne weiteres nutzbar. Prüfen Sie mit Ihrem Administrator in wie weit die Module nutzbar sind.
Hat der Server genug Power?
Wir sind an dieser Stelle einen harten Weg gegangen. Wir nutzten einen Rootserver und stellten fest, dass die Konfigurationsarbeiten doch sehr aufwändig sind. So entschieden wir uns für einen neuen Webserver und Anbieter für unseren Shop: Nginx
Dieser Webserver ist stark auf Performance ausgelegt und hat eine Architektur als der etwas in die Jahre gekommene Apache. So setzen auch große Webseiten wie Facebook auf Nginx Technologie.
Man sieht die Umstellung sehr gut auf dem Ladezeitenchart (2). Dabei gab es noch einen weiteren positiven Effekt. Durch die bessere Performance crawlt Google unsere Seite öfters (gut erkennbar auf dem oberen Chart). Im SEO Teil von Shopware gehe ich noch einmal darauf ein.
Was wird nachgeladen?
Nutzen die im Firefox das “Netzwerk” Tool und laden Sie Ihre Seite erneut. Jetzt bekommen Sie eine im zeitlichen Verlauf dargestellte Auswertung der verschiedenen nachgeladenen Elemente Ihrer HTML Seite.
Beim Demoshop sieht man gut, dass viele CSS und Javascripte nachgeladen werden.
Achten Sie darauf, dass Sie im Block nur CSS Dateien nachladen lassen und dann im Block die Javascripte.
Prüfen Sie auch ob Sie die Scripte noch besser komprimieren können. Hierzu bieten sich “Minifyer” an. Diese entfernen unnötige Zeichen aus der Datei und Sie erhalten kleinere Dateien.
Bilder, Bilder, Bilder
Viele Designer meinen alles mit großen Bildern beeindrucken zu wollen. Das ist auch nicht verkehrt, nur sollte man auf die richtigen Bildformate und Komprimierungen achten:
JPG: Gut verwendbar für Bilder. Bei den JPG Bilder können Sie einen Komprimierungsfaktor angeben. In der Regel reichen 60% um eine Darstellung in einer guten Qualität zu erhalten.
PNG: Gut für Bilder und Grafiken mit Transparenz. Nachteil: große Bilddateien
GIF: Gut für Grafiken mit Vollflächen und wenig Farben.
Prüfen Sie Stichprobenhaft ob die Bildgrößen für das darzustellende Bildformat eine gute Relation ergeben.
Bilder lassen sich auch mit der “Sprite” Technik zusammenfassen. Hier wird dann ein großes BIld mit allen kleinen Bilder in den Speicher geladen und dann per CSS nur der gewünscht Bildausschnitt angezeigt.
Auch lässt sich heutzutage mit CSS3 viel machen. Moderne Browser interpretieren diesen Standard gut. So lassen sich Schatten, Rahmen, Verläufe optisch sehr ansprechend darstellen.
