Shopware Optimierungen - 1. Teil Ladezeit verbessern

Wir beginnen heute eine vierteilige Reihe zu unserem Shop-Lieblingsprodukt Shopware ab der Version 4.0:

1. Ladezeitoptimierung

2. SEO/

3. Usability

4. Conversion Optimierung

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).

Ladezeitenoptimierung Shopware

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.

Google Pagespeed beim Demoshop von Shopware

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.

Ladezeitenanalyse der Scripte vom Shopware DemoshopAchten 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.

Nichts verpassen

Abonniere unseren RSS Feed uns verpasse keine Meldung mehr.

Über Carsten Appel

Carsten Appel ist Geschäftsführer der sitefuchs GmbH aus Rostock und Dozent für Online Marketing an der Uni Rostock im Bereich der Erwachsenenweiterbildung. Twitter Profil
Dieser Beitrag wurde unter Allgemein veröffentlicht. Setze ein Lesezeichen auf den Permalink.

Hinterlasse eine Antwort

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

Du kannst folgende HTML-Tags benutzen: