Alles nicht so einfach! Oder… Wo bleibt die Performance?

Die letzten 2 Wochen habe ich mich etwas mit dem Design meines webshops beschäftigt.
Großzügig habe ich im shopware backend Kategoriebilder, zufällige Artikel, Neuheiten und fette Banner eingebaut. Leider hat sich schon nach wenigen Tagen gezeigt, dass die Zugriffszeiten in die Höhe geschossen sind und teilweise Ladezeiten von über 4 Sekunden gemessen wurden.
Analytics_Zugriffszeiten

Mein Ziel sind maximal 1-1,5 Sekunden, um die Start oder Hauptkategorieseite zu laden. Dies ist ungefähr die Schmerzgrenze, bevor ein potentieller Interessent der webseite wieder abspringt, noch bevor er die Seite überhaupt zu Gesicht bekommen hat.

Das ist praktisch der Supergau! Sämtlich Werbemassnahmen im Vorfeld, wie Google Addwords, Suchergebnisse der Suchmaschinen, Facebook & Co. oder Verlinkungen auf anderen webseiten sind damit obsolet und völlig umsonst. Alle Vorarbeit auf einen Schlag im Müll versenkt.

So habe ich nun einige Abende verbracht und nachgeschaut, worin der Grund für diese lahmen Zugriffszeiten liegt.
Im obigen Diagramm sieht man schön, dass ich zwischendurch erste Erfolge hatte und bei weiteren Tests und Änderungen die Zugriffszeiten wieder angestiegen sind.

Inzwischen ist der shop gut und zügig erreichbar trotz einer Vielzahl an Bildern, speziell in den beiden Hauptkategorien „Calvendo Kalender“ und „Fliparts“.

Nachfolgend daher meine Ergebnisse unverbindlich als Tipp, um eure shops zu überprüfen. Ich verwende einen shopware 5 Community webshop, meine Erfahrungen sind daher nicht zwingend übertragbar, aber die Grundproblematik ist sicher immer sehr ähnlich.

  1. Banner
    je mehr Bilder als Laufband (Slider) auf der Startseite angezeigt werden, muss zwingend auf die Dateigröße der einzelnen Bilder achten.
    Von meinen anfänglich 10 Bildern waren 4 über 400kb groß, 3 weitere über 300kb. Alles in allem über 2MB, die zuerst geladen werden müssen, bevor diese angezeigt werden.Lösung -> Alle Bilder überprüft und reduziert auf ca. 120kB je Bild.
  2. Ich wollte alle Calvendo Kategorien als Kategoriebild anzeigen mit Link zur jeweiligen Kategorie. Hier gab es ein interessantes Phänomen. Je nach dargestellter Bildgröße berechnet shopware im Hintergund, also auf dem Webserver ein heruntergerechnetes Bild, welches zur Darstellung verwendet wird. Anfänglich hatte ich relativ große Quadrate, die super aussehen, aber extreme Ladezeiten verursachen.Lösung -> Vorlage Layout auf 5×5 Felder geändert, die dann jeweils deutlich kleiner ausfallen als das ursprüngliche Layout. Die Ladezeit sank alleine durch diese Maßnahme um 75%.
    Zusätzlich vewende ich dieses Layout nur für die beiden Unterkategorien der Kalender und Fliparts.KategorieHauptseite
  3. Die Startseite hat ein nochmals deutlich reduziertes Layout mit den beiden Hauptkategorien erhalten und einigen zufälligen Bildern des shops, die regelmässig wechseln.
    Zugriff nun <1 Sek.
  4. Die Umstellung auf SSL für den gesamten webshop hat leider ebenfalls zu Einbußen geführt, sichtbar im Diagramm zwischen 1. und 2. Märzwoche. Scheinbar hat der webserver jede Menge Arbeit damit, die großen Datenmengen alle zu verschlüssel.
    Es stellte sich die Frage, ob alle Inhalte verschlüsselt sein müssen.Lösung -> Ich habe den webshop umgestellt auf Verschlüsselung der Zahlungsvorgänge einschließlich Kontoinformationen und Warenkorb. Somit sind alle persönlichen Daten vor Fremdzugriffen geschützt und der normale Zugriff auf die Bild bzw. Kalenderdaten ist angenehm schnell.

 

 

3 Comments

  1. Danke Horst für deine Erfahrungen, die du mit uns teilst, Du hast mich neugierig gemacht und so bin ich auch beim Aufbau eines Shops. Leider klappt noch nicht alles so perfekt, aber es reift…

  2. Hallo Frank,
    vielen Dank für den Tipp. Ich muss mal schauen, ob und wie ich das umsetzen kann.
    Die Bilder vom shop kommen automatisch rein über meine API Schnittstelle. Da könnte ich angreifen und die Bilder gleich mit Höhe und Breite versehen.
    Ich muss nur mal testen, wie das mit meinem Responsive Template passt, da die Bilder dynamisch angepasst werden beim verkleinern des Frames.
    Ich halte Dich auf dem Laufenden.

  3. Frank Steiner
    1. Mai 2016

    Hallo Horst,
    da hätte ich Dir bestimmt auch helfen können. Habe einige leidvolle Erfahrung mit Apache/NginX/Mysql/HTTPS unter Linux und kenne das Problem mit lahmer Ladezeit wegen der Bildervorschau mit einem jQuery Slider… Meist hift ein ganz simpler Trick:
    Wo immer möglich muss bei den Bildern die Größe (width/height) angegeben werden. Dann wird der HTML und JS Code zuerst geladen und die Bilder danach eingefügt.

Schreibe einen Kommentar