Slides von der E-Commerce Conference 2008 Frühjahrstour in Hamburg, Frankfurt und München.

1. E-Shop on Steroids
E-Commerce Conference| München
Björn Schotte

2. Oh Techie, where are thou?
(Bitte melde dich)
„E-Shop on Steroids“
© MAYFLOWER GmbH 2008 2

3. Agenda
❙ Social Commerce
❙ Begriffserklärung
❙ Auswirkung auf Ihre Shop-Serverstruktur
❙ Performance
❙ Web2.0, AJAX
❙ Serverseitige Performance-Messungen
❙ Clientseitige Performance-Messungen
❙ Skaliermethoden
❙ Webserver-Struktur
❙ Memory Caching
❙ Compute Clouds
❙ Sonstige Steroide
„E-Shop on Steroids“
© MAYFLOWER GmbH 2008 3

4. Social Commerce - Begriffsdefinition
❙ „Unter Social Commerce (Empfehlungshandel) wird eine
konkrete Ausprägung des elektronischen Handels (bzw.
Electronic Commerce) verstanden, bei der die aktive
Beteiligung (z. B. Kommunikation untereinander) der
Kunden und die persönliche Beziehung der Kunden
untereinander im Vordergrund stehen.“ (de.wikipedia.org)
❙ Blogs
❙ Wishlists
❙ Widgets, RSS Feeds
❙ Produktbewertungen
❙ Community, offen oder private clubs (Vente Privée)
❙ „Long Tail“
❙ Live Shopping
Lesenswertes Weblog: http://ecommerce.typepad.com/ „E-Shop on Steroids“
© MAYFLOWER GmbH 2008 4

5. Beispiel für Performance:
Swoodoo.de Flugsuchmaschine
„E-Shop on Steroids“
© MAYFLOWER GmbH 2008 5

6. Social Commerce mit der Technik-Brille
❙ AJAXifiziert (bunt, laut, fluffig)
❙ Web-Zwo-Nullig = runde Ecken
❙ erhöhte Nutzeraktivitäten
❙ Shop ist nicht mehr nur Nase-an-der-Scheibe-plattdrücken
und auch keine Festung mehr, die dem Shopbetreiber
gehört
❙ „Mami, ich will auch mitspielen!“ (Widgets, Community-
Integration, …)
❙ Widgets als Traffictreiber
„E-Shop on Steroids“
© MAYFLOWER GmbH 2008 6

7. Widgets explained … zazzle.com
„E-Shop on Steroids“
© MAYFLOWER GmbH 2008 7

8. Zazzle Widget im Blog …
„E-Shop on Steroids“
© MAYFLOWER GmbH 2008 8

9. Preisbock Widget bei A-Bloggern …
„E-Shop on Steroids“
© MAYFLOWER GmbH 2008 9

10. Widgets …
❙ Entführen Produktdetails auf fremde Seiten,
zum Beispiel externe Blogs
❙ Traffic wird unter Umständen massiv erhöht
❙ Nicht einfach Widgets auf die bestehende Shop-
Plattform aufsetzen, sondern konsequent und gut
planen
❙ Plattformen: Caching Elemente nutzen wo möglich,
es sei denn Widgets sind volldynamisch
„E-Shop on Steroids“
© MAYFLOWER GmbH 2008 10

11. AJAX?
„E-Shop on Steroids“
© MAYFLOWER GmbH 2008 11

12. AJAX!
❙ „Asynchronous JavaScript and XML“
❙ Web-Anwendung fühlt sich wie Desktop-Anwendung an
❙ Kein stumpfes Request-Response mehr
❙ Dynamische Aktualisierung der Anwendung ohne Browser-
Reload
❙ weniger Datenmengen in der Einzel-Übertragung
❙ viel mehr Anfragen pro Zeiteinheit an die Server
Liebe Shop-Plattformen, packt Ihr das??
„E-Shop on Steroids“
© MAYFLOWER GmbH 2008 12

13. „Scotty, du hast 2 Stunden“
„Okay Captain, ich mach‘s dir in einer!“
❙ Aus dem Ingenieurs-Handbuch:
❙ Optimiere deine Datenbanken
❙ Vielhilftviel(.de) AKA „Mehr Blech!“
❙ Nutze Caches, wo möglich
❙ Systemsprache + Datenbank
❙ Content Caches
❙ RAM-basierte Caches (memcached)
❙ Optimiere statische Dateien (Produktbilder?)
❙ Sorge dich um den Browser (Client Performance)
❙ Kilometerweise JavaScript, muss das sein?
❙ Räum‘ mal den Saustall (HTML) auf
❙ Denke an Shared Nothing Architektur
❙ Mess‘ mal die Serverseite durch
„E-Shop on Steroids“
© MAYFLOWER GmbH 2008 13

14. Serverseitige Performance-Messung…
❙ „… the ab way“
❙ ab = Apache Bench
❙ Feuert n Requests in Parallelität m ab und zeigt mir die
Ergebnisse (durchschnittliche Antwortzeit des Servers etc.)
❙ Wenig aussagekräftig
❙ Bildet kein echtes Nutzerverhalten ab
❙ Seriöse Tests lassen sich damit nicht fahren
„E-Shop on Steroids“
© MAYFLOWER GmbH 2008 14

15. Serverseitige Performance-Messung
… in schlau (I)
❙ JMeter, WinLoad, …
❙ Virtuelle Nutzersimulationen
❙ „Blaupausen“-Design der Bewegungen der
Nutzer
❙ Importieren des Webserver Logs
❙ Oder Interview mit Fachabteilung über
erwartetes Nutzerverhalten
„E-Shop on Steroids“
© MAYFLOWER GmbH 2008 15

16. Serverseitige Performance-Messung
… in schlau (II)
❙ Design der Blaupause, manuell oder per Proxy
❙ „Anfahren“ von virtuellen Nutzern in Breite und Tiefe
❙ Mit Think Time!
❙ Use Cases
❙ TV-Spot für meinshopistgut.de: hält der das aus?
❙ Newsletter-Versand mit Sommer-Aktion: Peaks!
❙ Christmas Time
„E-Shop on Steroids“
© MAYFLOWER GmbH 2008 16

17. Clientseitige Performance-Messungen
❙ Üblich: nur serverseitige Optimierungen
❙ DB Optimierung
❙ Mehr Blech
❙ Serverseitiges Caching
❙ …
❙ Jedoch: Clientseitige Optimierungen
❙ Optimieren der Webanwendung auf Schnelligkeit
der Darstellung im Browser
❙ Wieso das?
„E-Shop on Steroids“
© MAYFLOWER GmbH 2008 17

18. Clientseitige Performance-Messung
Wozu denn das?
Beispiel: Wasserfalldiagramm www.mayflower.de Startseite
Backend ~5% Frontend ~95%
„E-Shop on Steroids“
© MAYFLOWER GmbH 2008 18

19. Clientseitige Performance-Messung
… in schlau
„Studies have shown that response time can be improved by
25-50% by following these rules.“
❙ Y!Slow, Plugin für Firebug
❙ Firebug ist ein Plugin für Firefox
❙ 13 simple, but golden rules
❙ Vom größten Portal der Welt: Yahoo!
(http://developer.yahoo.com/yslow/)
❙ Auszüge:
❙ CSS an den Anfang
❙ GZip mich
❙ JavaScript ans Ende
❙ …
„E-Shop on Steroids“
© MAYFLOWER GmbH 2008 19

20. Stylesheets (CSS) an den Anfang
❙ Stylesheets sollten im <head> der Seite definiert werden
(und bitte extern einbinden!)
❙ Einbindung möglichst weit oben erlaubt progressives
Darstellen (Rendern) der Seite im Browser
❙ Subjektiv schnellerer Aufbau der Seite für den Nutzer
„E-Shop on Steroids“
© MAYFLOWER GmbH 2008 20

21. JavaScripts ans Ende
❙ Erlaubt progressives Rendern der Seite
❙ Progressives Rendern wird blockiert für alles, was nach
dem (Java)Script kommt
❙ Browser können pro Domain maximal 2 Downloads
parallel
❙ Solange der Browser ein Script lädt, werden
diese anderen Downloads blockiert!
„E-Shop on Steroids“
© MAYFLOWER GmbH 2008 21

22. Sie GZipt mich, sie GZipt mich nicht …
❙ GZIP = Kompressionsalgorithmus
❙ Inhalt wird auf Serverseite komprimiert
❙ Inhalt wird an den Client (Browser geschickt)
❙ Client dekomprimiert Inhalt und stellt ihn dar
❙ Konsequenz:
❙ Datenvolumen von Server zu Browser sinkt
❙ Daten gelangen schneller zum Browser
❙ Lässt sich im Webserver bequem konfigurieren
„E-Shop on Steroids“
© MAYFLOWER GmbH 2008 22

23. Weitere Y!Slow Regeln …
❙ … auf den Developer Pages von Y!Slow
im Yahoo! Developer Network
❙ Es lohnt sich, nicht nur die Serverseite zu betrachten,
sondern auch die Darstellung im Webbrowser zu
optimieren
❙ Steigerung des Abverkaufs Ihrer Produkte!
„E-Shop on Steroids“
© MAYFLOWER GmbH 2008 23

24. AJAX Aufrufe cachen
❙ Best Practice Beispiel: SXBATCH
❙ Sammeln von AJAX Anfragen im Client
❙ Verteilung der Responses vom Server
❙ Reduzierung der Anfragen an den Server (vgl. Folie 6)
❙ Mehr Aufwand bei Planung der Anfragen in der
Anwendungslogik im Browser (JS) und auf
Serverseite
„E-Shop on Steroids“
© MAYFLOWER GmbH 2008 24

25. Lighttpd: fly light!
❙ Kleiner, schlanker Webserver (single process)
❙ Spezialisiert auf ultra-schnelle Auslieferung statischer
Dateien (Bilder, CSS, JS, …)
❙ Spezielles Streaming-Modul für Flash Videos (flv)
❙ Strategie z.B.: Separieren statischen Contents auf
eigenen lighttpd Webserver
❙ Nutzer u.a.:
❙ Wikipedia (Download Page)
❙ YouTube, sevenload, Clipfish, …
❙ Diverse mp3 Sites
„E-Shop on Steroids“
© MAYFLOWER GmbH 2008 25

26. Compute Clouds / Logistik per Webservice
❙ Amazon EC2 (Elastic Compute Cloud), Amazon S3
❙ Verteilung der Anwendung in einer elastischen,
dynamischen Rechnerwolke
❙ Abrechnung nach verbrauchter CPU Zeit
❙ Hinzufügen/Wegnehmen von virtualisierten Servern on
demand
❙ Nachteil bei Amazon: aktuell noch keine vernünftigen
SLAs
❙ NEU: Logistik-Services durch Amazon per Webservice
„E-Shop on Steroids“
© MAYFLOWER GmbH 2008 26

27. Weitere Steroide
❙ Sharding im Datenbank Bereich (Partitioning + Dictionary)
❙ Shared Nothing Architektur (Distributed Computing,
Dezentralisierung der Architektur, DB Scaleout)
❙ memcached
❙ Weitere Rezepte gerne auf Anfrage.
„E-Shop on Steroids“
© MAYFLOWER GmbH 2008 27

28. Vielen Dank für Ihre Aufmerksamkeit
Björn Schotte
Mayflower GmbH
Pleichertorstr. 2
97070 Würzburg
+49 (931) 35 9 65 - 0
bjoern.schotte@mayflower.de