E Commerce Conference 2008

E-Shop on Steroids

E-Commerce

Conference| München

Björn Schotte

© MAYFLOWER GmbH 2008 2

„E-Shop on Steroids“

Oh Techie, where are thou?(Bitte melde dich)



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



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/

http://de.wikipedia.org/wiki/Elektronischer_Handel

http://de.wikipedia.org/wiki/Kommunikation



Beispiel für Performance: Swoodoo.de

Flugsuchmaschine



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



Widgets

explained

… zazzle.com



Zazzle

Widget

im Blog

…



Preisbock Widget

bei A-Bloggern

…



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



AJAX?



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??



„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



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



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



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



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?



Clientseitige Performance-Messung Wozu denn das?

Beispiel: Wasserfalldiagramm www.mayflower.de

Startseite

Backend ~5% Frontend

~95%

http://www.mayflower.de/



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

❙

…



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



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!



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



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!



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



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



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



Weitere Steroide

❙

Sharding

im Datenbank Bereich (Partitioning

+ Dictionary)

❙

Shared

Nothing

Architektur (Distributed

Computing, Dezentralisierung der Architektur, DB Scaleout)

❙

memcached

❙

Weitere Rezepte gerne auf Anfrage.

Vielen Dank für Ihre Aufmerksamkeit

Björn SchotteMayflower GmbH

Pleichertorstr. 2 97070 Würzburg

+49 (931) 35 9 65 -

[email protected]

E Commerce Conference 2008

Technology

Transcript of E Commerce Conference 2008