Mobile Web Performance optimieren. Was ist Performance, wie kann ich diese bei Mobile messen und was sind die Best Practices?

1. SEO
CAMPIXX
2012
Mobile
Performance
Tuning
Michael
Sinner
@MichSinn
-­‐
Michael
Sinner
1

2. Um
was
geht
es?
Technologische
Verbreitung,
gemessen
nach
Penetra:on
im
Endnutzersegment
in
den
USA
Radio
TV
Internet
Mobile
Internet
100,00%
80,00%
60,00%
40,00%
20,00%
0,00%
1920
1925
1930
1935
1940
1945
1950
1955
1960
1965
1970
1975
1980
1985
1990
1995
2000
2005
2010
In
Anlehnung
an
Mary
Meeker,
PräsentaNon
„Internet
Trends
2011“
Internet
Trends
–
Web
2.0
Summit
San
Francisco,
CA
–
18.10.2011
@MichSinn
-­‐
Michael
Sinner
2

3. Um
was
geht
es?
2011
verkauEe
Einheiten
in
Mio.
Smartphones
Tablet-­‐Computer
Netbooks
Notebooks
Desktops
StaNonäre
Systeme
Smartphones
Notebooks
46
%
54
%
Netbooks
Desktops
Tablet-­‐Computer
Quelle:
CanalysesNmates
©
Canalys
2012
hp://www.canalys.com/staNc/press_release/2012/canalys-­‐press-­‐release-­‐030212-­‐smart-­‐phones-­‐overtake-­‐client-­‐pcs-­‐2011_0.pdf
@MichSinn
-­‐
Michael
Sinner
3

4. Was
bekomme
ich
heute
für
500,-­‐
€
?
Desktop
Laptop
Tablet
Smartphone
CPU
Quad
2.1
Ghz
Dual
2.1
Ghz
Dual
1.2
Ghz
Dual
1
Ghz
RAM-­‐Speicher
4GB
2GB
1GB
512MB
HDD
1
Terrabyte
420
GB
32GB
8GB
Verbindung
1Gbps
54Mbps
54Mbps
10Mbps
@MichSinn
-­‐
Michael
Sinner
4

5. Um
was
geht
es?
Quelle:
Steve
Souders,
hp://stevesouders.com/docs/mobilism-20110513.pptx
@MichSinn
-­‐
Michael
Sinner
5

6. Die
Herausforderungen
der
Performance
Op:mierung
W3C
mobile
page
size
limit
Quelle:
Jon
Jenkins
(amazon.com),
Velocity
Conference
Berlin
–
8.11.2011
hp://assets.en.oreilly.com/1/event/74/Introducing%20the%20Amazon%20Silk%20Web%20Browser%20PresentaNon.pdf
@MichSinn
-­‐
Michael
Sinner
6

7. Performance
Op:mierung
bei
amazon.com
Was
tun,
wenn
man
nicht
amazon.com
ist?
Quelle:
Jon
Jenkins
(amazon.com),
Velocity
Conference
Berlin
–
8.11.2011
hp://assets.en.oreilly.com/1/event/74/Introducing%20the%20Amazon%20Silk%20Web%20Browser%20PresentaNon.pdf
@MichSinn
-­‐
Michael
Sinner
7

8. Agenda
Was
ist
(Mobile)
Performance?
Wie
Mobile
Performance
messen?
Was
sind
die
Best-­‐PracNces?
Fazit
@MichSinn
-­‐
Michael
Sinner
8

9. Agenda
+
Was
ist
(Mobile)
Performance?
Wie
Mobile
Performance
messen?
Was
sind
die
Best-­‐PracNces?
Fazit
@MichSinn
-­‐
Michael
Sinner
9

10. Ist
Performance
wich:g?
Was
tun,
wenn
man
nicht
Amazon.com
ist?
Quelle:
Jake
Brutlag
(Google),
Eric
Schuman
(bing)
–
Velocity
Conference,
San
Jose
CA
23.6.2011
hp://velocityconf.com/velocity2009/public/schedule/detail/8523
@MichSinn
-­‐
Michael
Sinner
10

11. Performance
ist
relevant!
Quelle:
Jake
Brutlag
(Google),
Eric
Schuman
(bing)
–
Velocity
Conference,
San
Jose
CA
23.6.2011
hp://velocityconf.com/velocity2009/public/schedule/detail/8523
@MichSinn
-­‐
Michael
Sinner
11

12. Performance,
der
relevanteste
Faktor?
“First and foremost, we believe that speed
is more than a feature. Speed is the most
important feature.”
Quelle:
Fred
Wilson
–
Future
Web
Apps
Conference,
Miami
FL,
Feb.
2010
hp://vimeo.com/10510576
@MichSinn
-­‐
Michael
Sinner
12

13. Ultraschnell
ist
wich:g
ultraschnell
überlegene
Leistung
und
Geschwindigkeit
superschnell
@MichSinn
-­‐
Michael
Sinner
13

14. Noch
schneller
Verdoppeln...
Datengeschwindigkeit
schnelleres
schnellere
schnell
@MichSinn
-­‐
Michael
Sinner
14

15. Was
ist
Performance?
@MichSinn
-­‐
Michael
Sinner
15

16. Back-­‐
und
Frontend
bei
Performance
Backend
Frontend
“80-­‐90%
of
the
end-­‐userresponse
2me
is
spent
on
the
frontend.
Start
there.”
@MichSinn
-­‐
Michael
Sinner
16

17. Performance
berechnen
Dynamische
Inhalte?
InformaNonsdarstellung?
Übertragungszeit/-­‐Störung
der
Verbindung?
p (w) = d * t
d: Summe
der
zu
übertragenden
Datenmenge
t: Zeit
@MichSinn
-­‐
Michael
Sinner
17

18. Erste
Learnings
 Performance
ist
Basis
für
Erfolg
Oder:
Performance
(vortäuschen)
macht
erfolgreich
 Keine
harten
Zahlen
für
Vergleichbarkeit
möglich
Schon
gar
nicht
bei
Mobile
 QuanNtaNve
Faktoren
genauso
wichNg
wie
qualitaNve
Faktoren
Zum
Beispiel:
 Dateigröße
(Gesamt
oder
einzelne
Einheiten)
 BenöNgte
Verbindungen
(HTTP-­‐Requests,
Lookups)
 Übertragungszeit
 Übersichtlichkeit
 InformaNonsdarstellung
 ...
@MichSinn
-­‐
Michael
Sinner
18

19. Agenda
Was
ist
(Mobile)
Performance?
+
Wie
Mobile
Performance
messen?
Was
sind
die
Best-­‐PracNces?
Fazit
@MichSinn
-­‐
Michael
Sinner
19

20. Kennzahlen
zur
Op:mierung
„Das
Op2mum
ist
die
Lösung,
die
unter
mehreren
Op2mierungszielen
op2mal
ist.“
 Das
Ziel
ist
nicht
eindeuNg.
Und
nicht
für
jeden
gleich.
@MichSinn
-­‐
Michael
Sinner
20

21. Herausforderungen
bei
der
Mobile
Performancemessung
 Hürden:
 Datenübertragungsrate
schwankt
sehr
stark
 Geringe
Vergleichbarkeit
der
Ergebnisse
 Datenerhebung
aufwändiger
 Erste
Ansätze:
Auf
staNonären
Rechnern
mit
User-­‐Agent
Daten
sammeln?
Wie
eine
vergleichbare
Systemlandschat
schaffen?
 Lösungen:
 Mobil
Daten
sammeln,
lokal
auswerten
 Lokal
Daten
sammeln
durch
Emulatoren/Proxies
@MichSinn
-­‐
Michael
Sinner
21

22. Mobil
Daten
sammeln,
lokal
auswerten
 Auswertungen
aus
Tools
auf
dem
Mobilgerät
im
Browser
sammeln
 In
der
Cloud
verwalten
als
.JSON-­‐File
 Auf
lokalem
Rechner
auswerten
@MichSinn
-­‐
Michael
Sinner
22

23. Bookmarks
als
Tools
 Durch
Lesezeichen
FunkNonen
über
JS
laden
 Vielzahl
an
FunkNonen,
analog
zu
Desktop
 Datenhaltung
in
der
Cloud
zur
Auswertung
möglich
@MichSinn
-­‐
Michael
Sinner
23

24. FirebugLite
im
Firefox
Mobile
 HTML
Inhalte
auf
einem
Mobilgerät
analysieren
 CSS
und
HTML
Elemente
untersuchen
und
verändern
 Detaillierte
Analyse
@MichSinn
-­‐
Michael
Sinner
24

25. Yslow
als
Webapp
 YSlow
direkt
auf
Smartphone
ausführen
 Bewertung
der
Performance
einer
Mobilversion
 Unterscheidung
in
viele
Performancekategorien
@MichSinn
-­‐
Michael
Sinner
25

26. Das
DOM-­‐Monster
bekämpfen
 Das
DataObjectModel
einer
Webseite
analysieren
 Tipps
und
Auswertungen
im
Tool
@MichSinn
-­‐
Michael
Sinner
26

27. Ladezeiten
berechnen
 Gibt
Ladezeit
einer
Seite
wieder
@MichSinn
-­‐
Michael
Sinner
27

28. Quelltext
analysieren
 HTML
auf
Mobile
Browser
anzeigen
lassen
 Externe
Elemente
anzeigen
lassen
 Sinnvoll:
Übertragung
zu
JDROP
@MichSinn
-­‐
Michael
Sinner
28

29. PCAPPerf.appspot.com
 Bryan
McQuade
vom
Google
Page
Speed
Team
 P(acket)Capture
Format
sammelt
Bewegungsdaten
im
Netzwerk
(z.B.
über
Wireshark)
 Daten
Sammeln
über
ein
eigenes
WLAN-­‐Netz
 PCAP-­‐Datei
über
hp://pcapperf.appspot.com/
(Google
Page
Speed)
auswerten
lassen
@MichSinn
-­‐
Michael
Sinner
29

30. Agenda
Was
ist
(Mobile)
Performance?
Wie
Mobile
Performance
messen?
+
Was
sind
die
Best-­‐Prac:ces?
Fazit
@MichSinn
-­‐
Michael
Sinner
30

31. Auf
Umleitungen
verzichten
Alle
machen
Umleitungen!
Wieso?
GET
hp://www.beispiel.de/
DNS-­‐Lookup
HTTP-­‐Request
Im
Durchschni
30%
größere
HTTP-­‐Header
Redirect
hp://m.beispiel.de/
GET
hp://m.beispiel.de/
bei
Mobile!
HTTP-­‐Request
301
Redirect
hp://m.beispiel.de/iphone
GET
hp://m.beispiel.de/iphone
200
OK
@MichSinn
-­‐
Michael
Sinner
31

32. Cloaking
ist
das
neue
Mobile
SEO
@MichSinn
-­‐
Michael
Sinner
32

33. HTTP-­‐Requests
bedeuten
Verbindungen
 So
wenige
Verbindungen
wie
möglich
erzwingen!
Quelle:
Maximiliano
Firtman,
Velocity
Conference
Juni
2010
hp://www.slideshare.net/firt/mobile-­‐web-­‐high-­‐performance
@MichSinn
-­‐
Michael
Sinner
33

34. Das
Packet-­‐System
Inline
Grafiken
im
HTML
CSS-­‐Sprite
Grafiken
Libraries
(JavaScript,
etc.)
Font-­‐Pictogramme
hp://www.thebuzzmedia.com/cat-­‐box-­‐sizng-­‐is-­‐a-­‐law-­‐of-­‐nature/
@MichSinn
-­‐
Michael
Sinner
34

35. Minimierung
der
Rohdaten
 Keep
It
(Short
and)
Simple,
Stupid
KISS
 KEINE
iFrames!
 Mehr
CSS
 Weniger
aufwendigen
Schnickschnack
@MichSinn
-­‐
Michael
Sinner
35

36. Komprimierung
Alle
Inhalte
stärker
komprimieren
als
für
Breitband
Bilder
Videos
Audio
Animierte
Grafiken
in
GIF-­‐Format
sta
Flash
(oder
gleich
HTML5
für
AnimaNonen)
GZip
im
Server
akNvieren,
auch
„beschränkte“
Browser
können
es!
Nicht
nur
HTML,
sondern
alle
per
HTTP-­‐Request
angeforderten
Inhalte
GZip‘en
@MichSinn
-­‐
Michael
Sinner
36

37. Inhalte
dynamisch
nachladen
 „lazy
load“-­‐Modus
für
Dateien
(keine
„naNve“
Lösung,
aber
JS
tut
sein
bestes)
 Zusätzliche
Dateien
von
Driparteien
immer
mit
2.
Priorität
versehen
–
zuerst
kommt
der
Nutzer!
 Nicht
relevante
Inhalte
(below-­‐the-­‐fold)
bei
InterakNon
laden
 Immer
einen
Schri
voraus
laden
(„Ich
weiß
was
du
letzten
Sommer
geklickt
hast“)
 Direkt
benöNgte
Dateien
entsprechend
laden:
 CSS
zu
Anfang
 Script-­‐Elemente
zum
Schluss
(können
parallelen
Au|au
verhindern)
@MichSinn
-­‐
Michael
Sinner
37

38. Mache
Caching
zu
deinem
Freund
 Simple
Browser
unterstützen
expires-­‐header
InformaNonen
Immer
angeben!
 (weitestgehend)
StaNsche
Elemente
immer
mit
„Mindesthaltbarkeitsdatum“
ausliefern
 Cache-­‐RestrikNonen
beachten
(iPhone:
ca.
25kb
je
Datei,
500kb
Gesamt)
 Mehr
Kontrolle
über
Cache
in
HTML5
Nutze
es!
@MichSinn
-­‐
Michael
Sinner
38

39. Agenda
Was
ist
(Mobile)
Performance?
Wie
Mobile
Performance
messen?
Was
sind
die
Best-­‐PracNces?
+
Fazit
@MichSinn
-­‐
Michael
Sinner
39

40. Was
haben
wir
heute
gelernt?
 Performance
ist
mehr
als
bloß
nackte
Zahlen
 Mobile
Performance
ist
„unberechenbar“
 Quick-­‐Win:
Keine
unnöNgen
Redirects
 Im
Zweifel
immer
lieber
ein
HTTP-­‐Request
weniger
als
zuviel
 HTML
5
rockt!
@MichSinn
-­‐
Michael
Sinner
40