7 Tipps für mehr Geschwindigkeit in Onlineshops

SPO - Shop Performance Optimization

Shop Performance - Ein Top-Conversion-Killer? Was bringt ein CR optimierter Shop, wenn die Performance nicht stimmt? In Zeiten, in denen Suchmaschinen die Portale auch nach der Performance bewerten, rücken Faktoren wie Reaktions- und Ladegeschwindigkeit noch mehr in den Vordergrund. Dieser Artikel zur Performance Optimierung beschäftigt sich mit Tipps zum Shop-Frontend.

Mit den folgenden 7 Tipps, die von einander völlig unabhängig sind, lässt sich prinzipiell die Ladezeiten jedes Shops optimieren. Denn was für normale Portale gilt, trifft auch auf Shop-Systeme zu.

1. Reduzieren
2. Optimieren
3. Verteilen
4. Streamen
5. Vorhersagen
6. Asynchron laden
7. Geheimtipp: Priorisieren

1. Reduzieren

Loading Waterfall - Shop Performance Optimization

Typischer Wasserfall (Safari mit bis zu 6 Requests)

Selbst moderne Browser halten sich noch an die HTTP 1.1 Spezifikation von 1999 und setzen deshalb zwischen max. 2-6 Anfragen parallel ab. Je nach Browser können dadurch im schlimmsten Fall nur zwei Elemente parallel geladen werden. Somit blockieren sich die zu ladenden Elemente gegenseitig. Um dieser Problematik entgegen zu wirken, bieten sich folgende zwei Möglichkeiten an.

Sprites verwenden (bei Layoutgrafiken)

Sprite - Shop Performance Optimization

Die Verwendung von Sprites gehört eigentlich zum Standard – oder sollte es zumindest. Nach wie vor werden diese jedoch zu selten eingesetzt.
Was ist eine Sprite? Sprites kommen ursprünglich aus der Computerspiel-Szene. Da früher wenig Speicher zur Verfügung stand, wurden Grafiken zu einer großen Zusammengefasst. Im Web funktioniert das genau so. Eine Sprite beinhaltet zum Beispiel mehrere Button-Zustände oder einen Teilbereich des Layouts (z. B. Header oder Navigation). Die entsprechenden Elemente zeigen dann jeweils nur einen Ausschnitt dieser Grafik.

Der Vorteil, die Grafik muss nur einmal geladen werden und ist bereits im Cache, wenn ein weiterer Ausschnitt benötigt wird (z. B. keine Verzögerung beim Hover). Die Elemente stehen somit schneller zur Verfügung.
Wichtig ist hier die Gradwanderung zwischen zu großen und zu vielen Sprites.

CSS3 anstatt Grafiken
Dank moderner Browser können bereits heute einige gestalterische Elemente durch CSS erzeugt werden, und müssen nicht mehr durch Grafiken dargestellt werden.
Der Vorteil, es müssen weniger Grafiken geladen werden. Die Elemente werden direkt dargestellt.
Wichtig ist, die Verwendung auf Layoutelemente wie Buttons, Boxen etc. zu beschränken. Die blauen Browser aus Redmond interpretieren die Styles derzeit nicht, so dass zumindest das Layout auch ohne die neuen Möglichkeiten Erkennbar bleiben sollte.

In den Warenkorb ButtonIn den Warenkorb Button

Beispiel für einen mit CSS3 erzeugten Button (Links CSS3, Mitte Grafik, Rechts IE < 9)

2. Optimieren

Falsch gewählte Dateiformate und -größen führen zu unnötigen Traffic und verschlechtern die Ladezeit.

Das 1 x 1 beachten
Klingt banal, wird aber immer noch häufig nicht beachtet – unter Umständen sogar weniger als früher, da höhere Bandbreiten zur Verfügung stehen. Es sollte sowohl bei Layout- als auch Inhaltsgrafiken nach wie vor auf geeignete Dateiformate und Komprimierungen geachtet werden.

Minimierung
Ohne JavaScripts kommt kaum noch ein moderner Shop aus. Zu wichtig sind die Clientseitigen-Möglichkeiten, die Darstellung und Nutzung der Shops zu verbessern. Deshalb ist es wichtig, die Skripte auf ein Minimum zu reduzieren – zumindest in Bezug auf die Dateigröße.
Das gleiche gilt für die Stylesheets, welche sich zumindest durch entsprechende Formatierung minimieren lassen.
Wichtig ist, Skripte lediglich zu minimieren, nicht zu komprimieren. Damit wird zwar eine geringere Dateigröße erzielt, die Skripte müssen jedoch bei jedem Aufruf Clientseitig decodiert werden, was wiederum zu längerer Interpretation führt.

3. Verteilen

Bei besonders großen Shops mit vielen Elementen bietet es sich an, diese auf mehrere Systeme zu verteilen.

Asset-Domains

AssetDomains - Shop Performance Optimization

Beispiel für Aufbau Asset-Domain

Bei diesen Domains handelt es sich klassisch um Subdomains (z. B. img1.shop.de, img2.shop.de), welche nur für die Auslieferung der Inhalte zuständig sind. In der Königsdisziplin handelt es sich dabei um getrennte Server, welche speziell für die Auslieferung dieser Daten ausgelegt sind. Aber auch schon bei der gleichen Serverinstanz bietet diese Vorgehensweise einige Vorteile. Zum einen lässt sich damit die „2 Requests pro Domain“-Problematik mindern, weil pro Subdomain erneut 2 bis 6 Anfragen gestellt werden können. Zum anderen ist diese Optimierung nicht Clientbasiert und skalierbar. Der Nachteil ist die komplizierte Handhabung mit Inhalten. Der Überblick über die unterschiedlichen Inhalte und Server ist aufwendiger.

Content Delivery Networks

Content Delivery Network

Beispiel für CDN Ablauf

Eine weitere Möglichkeit die Inhalte auszuliefern ist über CDNs. Ein CDN setzt sich aus einer Vielzahl von Content-Servern zusammen, welche aufgrund optimaler Infrastruktur speziell auf das Ausliefern von Inhalten ausgelegt sind und deutlich mehr Perfomance als die eigenen Server bieten. Ein solches Netzwerk setzt sich aus einer Vielzahl Content-Servern zusammen, die an wichtigen Point of presence (POP) platziert sind.

Darüber hinaus haben CDNs naturgemäß eine andere Domain und können daher parallel geladen werden. Da die eigenen Server nicht mit dem Ausliefern der Inhalte belastet werden, lassen sich mit dem Einsatz von CDNs die Serverkosten reduzieren.

4. Streamen

Philips Online Store - Shop Performance Optimization - Streamen

Beispiel für dynmic Imaging (Philips Store mit Adobe Scene 7)

Neben Videos eignen sich auch Inhaltsgrafiken hervorragend für Streaming (Dynamic Imaging). Ähnlich wie bei CDN werden die Inhalte von schnellen Rechenzentren ausgeliefert und ermöglichen dynamischen Zoom und dynamische Skalierung. Dass heißt eine große detaillierte Grafik wird im ersten Schritt nur grob pixelig zur Verfügung gestellt, so dass diese schnell geladen wird. Es folgen x-weitere Schritte welche den Detailgrad erhöhen. Wird der Bildbereich verändert oder gezoomt, so wird dieser On-Demand nachgeladen.

Diese Vorgehensweise eignet sich besonders im Zusammenhang mit hohen Zoomfaktoren, detailreichen Produktbildern und findet meist Einsatz in Shops mit sehr vielen Produktbildern.

Häufig werden in diesem Zusammenhang neben dynamischen Skalieren von Bildern auch Funktionen zum Bearbeiten, Formatieren und Schwenken eingesetzt.

5. Vorhersagen

Xing - Shop Performance Optimization - Vorhersagen

Beispiel für das Vorhersagen von Inhalten (XING)

Überall dort, wo die nächsten Schritte klar sind, lassen sich Inhalte im voraus laden. Zum Beispiel bei linearen Abläufen wie Checkout ist klar, welche Schritte folgen. Inhalte wie beispielsweise Grafiken können bereits im voraus geladen werden. Auch Produkt-Slider oder Teaser lassen sich einfach im voraus laden. Der Vorteil ist, dass hierbei ungenutzter Leerlauf sinnvoll genutzt werden kann, sofern die Abfragen asynchron durchgeführt werden.

6. Asynchron laden

Mirapodo Asynchron Laden - SPO

Beispiel für sinnvollen AJAX Einsatz (Mirapodo – Allerdings ohne Ladeanzeige)

Standardmäßig liefern die meisten Shops per se die Inhalte klassisch aus. D.h. nach jeder Anfrage folgt die Liste mit Inhalten die nacheinander ausgeliefert werden. Dank Web 2.0 hat AJAX seine Darseinsberechtigung längst etabliert, so dass sich auch im E-Commerce die Verwendung von asynchronen Abläufen anbietet. Dabei lässt sich prinzipiell alles nachladen, was ansonsten klassisch angefordert wird. Dazu zählen besonders Produktsuche, Filternavigation, Warenkorb, Konfiguratoren bzw. Assistenten – ja sogar ganze Kategorie-Seiten.

Grundsätzlich bietet sich das Nachladen von Inhalten auch bei Produktdetails an, z. B. für technische Details, Kundenmeinungen etc. Durch das gezielte Laden der Inhalte auf Nachfrage des Nutzers spart sowohl Ladezeit als auch Traffic. Die Königsdisziplin an dieser Stelle wäre ein gut cachbarer statischer Rahmen mit voll dynamischen Content der nachgeladen wird.

Allgemein sollte dabei beachtet werden, dass der Ladevorgang entsprechend angezeigt wird, und stets die klassische Funktion als Fallback bestehen bleiben. Ein positiver Nebeneffekt ist, dass sich Inhalte durch das gezielte Nachladen ansprechend einfügen lassen und der Fokus auf bestimmt Elemente gesetzt werden kann. Außerdem werden Portale, die diese Möglichkeiten nutzen häufig als modern und innovativ wahrgenommen.

Der Hauptnutzen dieser Vorgehensweise ist, dass die Inhalte subjektiv schneller zur Verfügung stehen, da der Rahmen bereits geladen ist. Der Shop kann schon während der Ladevorgangs genutzt und Inhalte erfasst werden.

7. Geheimtipp: Priorisieren

SPO Geheimtipp - Priorisieren

1. Elemente des Viewports z. B. Produktbilder, 2. Call-to-action und Preissignale, 3. unsichtbare Elemente des Viewports und der Rest

Beim priorisierten Laden der Inhalte werden diese vorzugsweise erst nach Viewport, aber grundsätzlich nach Relevanz geladen. D.h. für den Kunden relevante Inhalte, wie z. B. Produktbild, Preissignale, Call-to-action etc. werden vor weniger wichtigen Inhalten geladen. Der Inhalt des Viewports wird dabei vor allem anderen geladen. Damit stehen die für den Kunden wichtigen und sofort sichtbaren Elemente zuerst zur Verfügung, bevor alles weitere nach geladen wird.

Unsichtbare Inhalte, welche z. B. erst per Overlay, Tooltip, Akkordeon, Slider etc. angezeigt werden, sollten entweder zum Schluss oder grundsätzlich On Demand geladen werden. Noch mehr Traffic wird eingespart, wenn der Ladevorgang der außerhalb des Viewports befindlichen Elemente erst durch weiteres Scrollen eingeleitet wird. Dies macht bei besonders großen Portalen Sinn.

Viel Spaß beim Optimieren!

Noch mehr Performance?

Mit den genannten Tipps lässt sich die Performance – zumindest im Frontend – verbessern. Auf der Serverseite gibt es eine Reihe weiterer Möglichkeiten von der Minimierung der Datenbankabfragen, Optimierung des Cache-Managements bis hin zu Datenbank-Cluster. Hier gibt es viel Spielraum für Optimierungen.

Haben wir was vergessen? Welche Erfahrungen habt Ihr schon gemacht?

  • Send to Kindle
  • https://www.konversionskraft.de/?p=4384
Manuel Brückmann Manuel Brückmann ist als Mitglied der Geschäftsleitung bei der Web Arts AG für den Bereich Technologie verantwortlich. Er beschäftigt sich neben der Beratung im Bereich Testing mit eCommerce-Entwicklung und -Optimierung. Folgen Sie ihm auf Twitter oder verlinken Sie sich auf Google+, XING oder LinkedIn.

, , , , ,

17 Reaktionen auf  “7 Tipps für mehr Geschwindigkeit in Onlineshops”

Kommentare

  1. Dirk Wiedenhaupt Dirk Wiedenhaupt

    Eine schöne einfache Zusammenfassung. Etwas detaillierter gehts dann z.B. hier weiter:
    http://developer.yahoo.com/performance/rules.html

    Wir haben sehr gute Erfahrungen gemacht, was das Verteilen der Inhalte auf verschiedene Server angeht.
    Natürlich wird es komplizierter und auch die Fehleranfälligkeit steigt. Hier bieten sich dann die Content Delivery Netzwerke an.

    Nicht zu vergessen ist aber die Peakproblematik, die wahrscheinlich jeder Shop hat. Gerade zu Weihnachten (zumindest ist das bei uns extrem) steigen die Zugriffsraten enorm. Hier muss man natürlich die Technik vorhalten, was ein großer Kostenfaktor ist.
    Hier haben wir gute Erfahrungen gemacht mit Loadbalancern, d.h. nur zu Peakzeiten werden weitere Server zugeschalten.

    Grüße, Dirk Wiedenhaupt

  2. Manuel Brückmann Manuel Brückmann

    Hallo Herr Wiedenhaupt,

    danke für Ihr Feedback.

    Ich stimme Ihnen zu, äußerliche Faktoren wie saisonale Zugriffspitzen spielen auch eine wichtige Rolle bei der Shop-Performance. Bevor der Shop bei Zugriffsspitzen in die Knie geht, sollte er zumindest im „Normalbetrieb“ schon mal performant gewesen sein! 😉

    Die Idee, weitere Server nur bei Peakzeiten hinzu zuschalten, gefällt mir.

  3. Jan Jan

    Edgecast ist der schnellste CDN aber fuer ein kleiner Shop auch teuer ab 400 dollar im Monat

    http://www.paessler.com/blog/2010/03/18 … ou-fastest

    Es gibt auch ein Reseller von Edgecast with pau for use
    http://www.gogrid.com/cloud-hosting/content-delivery-network.php

    Hat jemand den Preise von scene7 von Adobe

    Fuer Bilder arbeiete ich zur Zeit mit
    http://www.magictoolbox.com/magiczoom/ und
    http://www.magictoolbox.com/magictouch/
    Note when ich Mail adresse vergesse und zurueck gehe mit den Browser ist dieses Field lehr (bisschen aergerlich)

  4. Rene Rene

    Sprites klingt zwar auf den ersten Blick immer ganz toll … ein Problem bzw. _das_ Hauptproblem wird allerdings gern immer weggelassen.

    Die grafischen Elemente, die mit Sprites arbeiten, lassen sich nicht skalieren. Möchte man also, dass Besucher dynamisch entscheiden können, ob ihnen die Schriftgröße zu klein ist, kommt es zu Problemen, da die betreffenden Elemente pixelgenau fixiert werden.

    Bei skalierenden Elementen mit Spriteinsatz, steigt der Overhead an unnützen Placeholder HTML-Tags ins unermessliche vice versa beim CSS.

    Für Icons, Hintergrund-Gradients, etc. finde ich Sprites auf jeden Fall sinnvoll. Für Buttons bleibe ich dann doch lieber bei mehreren Grafiken, einfach weil ich damit den Content dynamisch halten kann.

    Trotzdem Danke für den interessanten Beitrag. 🙂

  5. N. Breitwieser N. Breitwieser

    Ein wirklich schöner Artikel.

    Zum Punkt 3. Verteilen möchte ich noch ergänzen, dass das Verteilen zusätzlich den Vorteil hat, dass beim Laden der Bilder keine unnötigen Cookie-Daten gesendet werden (wenn die Cookies auf die Hauptdomain beschränkt sind) — das spart auch etwas an Ladezeit ein, je nach Cookie-Nutzung.

    Punkt 6 hat allerdings den Nachteil, dass es kompliziert wird die Aufrufe im Detail zu tracken.

    Weiter so und
    viele Grüße,
    Nicolas

  6. Gert Gert

    Was sich hier ev. auch auszahlt ist, sich mal die Zugriffe genauer anzusehen – man glaubt nicht, mit welchen Frequenzen die Konkurrenz Shop-Seiten scannt, teilweise lassen sich die Harvester recht einfach eliminieren, ansonsten muss man ev. dynamische Maximal-Beschränkungen implementieren. Wenn mal von mehreren Seiten 10000 Requests pro Tag kommen, kann das das System auch ganz schön mitnehmen.

Trackbacks/Pingbacks

  1. […] Rankings. Um das zu vermeiden, sollte auch ein Online-Shop auf seine Performance optimiert werden. Sieben nützliche Tipps zur Shop Performance Optimization gibt es bei KonversionKraft. […]

  2. […] der reinen Suchmaschinenoptimierung gibt es jetzt auch die Abkürzung SPO, oder auch Shop Performance Optimization genannt. Was aber versteckt sich dahinter und wie kann man das grundlegend […]

  3. […] SPO – Shop Performance Optimization | Conversion Optimierung … […]

  4. […] ein gutes Ranking immer wichtiger geworden. Grund genug für die Jungs von konversionsKRAFT eine Checkliste mit 7 Tipps zur Performanceoptimierung zusammen […]

  5. […] mehr zum Thema Frontend Optimierung für Onlineshops wissen möchte wird in meinem Artikel SPO – Shop Performance Optimization […]

  6. […] Tools, mit denen ihr Ladezeiten messen könnt, dabei gibt es oft spannende Erkenntnisse über die Vielzahl von Stellschrauben an denen man drehen […]

  7. […] Konversionskraft.de: Shop Performance Optimierung […]

  8. […] Tools, mit denen ihr Ladezeiten messen könnt, dabei gibt es oft spannende Erkenntnisse über die Vielzahl von Stellschrauben an denen man drehen […]

Hinterlassen Sie einen Kommentar