trg mobile-performance-tuning-msi campixx-22022012_pub
Post on 06-Jul-2015
774 Views
Preview:
DESCRIPTION
TRANSCRIPT
@MichSinn -‐ Michael Sinner 1
Mobile Performance Tuning
Michael Sinner
SEO CAMPIXX 2012
Um was geht es?
@MichSinn -‐ Michael Sinner 2
0,00%
20,00%
40,00%
60,00%
80,00%
100,00%
1920 1925 1930 1935 1940 1945 1950 1955 1960 1965 1970 1975 1980 1985 1990 1995 2000 2005 2010
Technologische Verbreitung, gemessen nach Penetra:on im Endnutzersegment in den USA
Radio TV Internet Mobile Internet
In Anlehnung an Mary Meeker, PräsentaNon „Internet Trends 2011“ Internet Trends – Web 2.0 Summit San Francisco, CA – 18.10.2011
Smartphones
Tablet-‐Computer
Netbooks
Notebooks
Desktops
StaNonäre Systeme
2011 verkauEe Einheiten in Mio.
Smartphones Tablet-‐Computer Netbooks Notebooks Desktops
Um was geht es?
@MichSinn -‐ Michael Sinner 3
Quelle: CanalysesNmates © Canalys 2012 h\p://www.canalys.com/staNc/press_release/2012/canalys-‐press-‐release-‐030212-‐smart-‐phones-‐overtake-‐client-‐pcs-‐2011_0.pdf
54 % 46 %
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
Was bekomme ich heute für 500,-‐ € ?
@MichSinn -‐ Michael Sinner 4
Um was geht es?
@MichSinn -‐ Michael Sinner 5
Quelle: Steve Souders, h\p://stevesouders.com/docs/mobilism-20110513.pptx
Die Herausforderungen der Performance Op:mierung
@MichSinn -‐ Michael Sinner 6
Quelle: Jon Jenkins (amazon.com), Velocity Conference Berlin – 8.11.2011 h\p://assets.en.oreilly.com/1/event/74/Introducing%20the%20Amazon%20Silk%20Web%20Browser%20PresentaNon.pdf
W3C mobile page size limit
Performance Op:mierung bei amazon.com
@MichSinn -‐ Michael Sinner 7
Quelle: Jon Jenkins (amazon.com), Velocity Conference Berlin – 8.11.2011 h\p://assets.en.oreilly.com/1/event/74/Introducing%20the%20Amazon%20Silk%20Web%20Browser%20PresentaNon.pdf
Was tun, wenn man nicht amazon.com ist?
Agenda
Was ist (Mobile) Performance?
Wie Mobile Performance messen?
Was sind die Best-‐PracNces?
Fazit
8 @MichSinn -‐ Michael Sinner
Agenda
+ Was ist (Mobile) Performance?
Wie Mobile Performance messen?
Was sind die Best-‐PracNces?
Fazit
9 @MichSinn -‐ Michael Sinner
Ist Performance wich:g?
@MichSinn -‐ Michael Sinner 10
Was tun, wenn man nicht Amazon.com ist?
Quelle: Jake Brutlag (Google), Eric Schuman (bing) – Velocity Conference, San Jose CA 23.6.2011 h\p://velocityconf.com/velocity2009/public/schedule/detail/8523
Performance ist relevant!
@MichSinn -‐ Michael Sinner 11
Quelle: Jake Brutlag (Google), Eric Schuman (bing) – Velocity Conference, San Jose CA 23.6.2011 h\p://velocityconf.com/velocity2009/public/schedule/detail/8523
Performance, der relevanteste Faktor?
@MichSinn -‐ Michael Sinner 12
“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 h\p://vimeo.com/10510576
Ultraschnell ist wich:g
@MichSinn -‐ Michael Sinner 13
ultraschnell überlegene Leistung und Geschwindigkeit
superschnell
Noch schneller
@MichSinn -‐ Michael Sinner 14
schnellere
Verdoppeln... Datengeschwindigkeit
schnelleres
schnell
Was ist Performance?
@MichSinn -‐ Michael Sinner 15
Back-‐ und Frontend bei Performance
@MichSinn -‐ Michael Sinner 16
Backend Frontend
“80-‐90% of the end-‐userresponse 2me is spent on the frontend. Start there.”
p (w) = d * t
d: Summe der zu übertragenden Datenmenge
t: Zeit
Performance berechnen
@MichSinn -‐ Michael Sinner 17
Dynamische Inhalte? InformaNonsdarstellung? Übertragungszeit/-‐Störung der Verbindung?
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 ...
Erste Learnings
@MichSinn -‐ Michael Sinner 18
Agenda
Was ist (Mobile) Performance?
+ Wie Mobile Performance messen?
Was sind die Best-‐PracNces?
Fazit
19 @MichSinn -‐ Michael Sinner
„Das Op2mum ist die Lösung, die unter mehreren Op2mierungszielen op2mal ist.“
Das Ziel ist nicht eindeuNg. Und nicht für jeden gleich.
Kennzahlen zur Op:mierung
@MichSinn -‐ Michael Sinner 20
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
Herausforderungen bei der Mobile Performancemessung
@MichSinn -‐ Michael Sinner 21
Auswertungen aus Tools auf dem Mobilgerät im Browser sammeln In der Cloud verwalten als .JSON-‐File
Auf lokalem Rechner auswerten
Mobil Daten sammeln, lokal auswerten
@MichSinn -‐ Michael Sinner 22
Durch Lesezeichen FunkNonen über JS laden Vielzahl an FunkNonen, analog zu Desktop
Datenhaltung in der Cloud zur Auswertung möglich
Bookmarks als Tools
@MichSinn -‐ Michael Sinner 23
HTML Inhalte auf einem Mobilgerät analysieren CSS und HTML Elemente untersuchen und verändern
Detaillierte Analyse
FirebugLite im Firefox Mobile
@MichSinn -‐ Michael Sinner 24
YSlow direkt auf Smartphone ausführen Bewertung der Performance einer Mobilversion
Unterscheidung in viele Performancekategorien
Yslow als Webapp
@MichSinn -‐ Michael Sinner 25
Das DataObjectModel einer Webseite analysieren Tipps und Auswertungen im Tool
Das DOM-‐Monster bekämpfen
@MichSinn -‐ Michael Sinner 26
Gibt Ladezeit einer Seite wieder
Ladezeiten berechnen
@MichSinn -‐ Michael Sinner 27
HTML auf Mobile Browser anzeigen lassen Externe Elemente anzeigen lassen
Sinnvoll: Übertragung zu JDROP
Quelltext analysieren
@MichSinn -‐ Michael Sinner 28
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 h\p://pcapperf.appspot.com/ (Google Page Speed) auswerten lassen
PCAPPerf.appspot.com
@MichSinn -‐ Michael Sinner 29
Agenda
Was ist (Mobile) Performance?
Wie Mobile Performance messen?
+ Was sind die Best-‐Prac:ces?
Fazit
30 @MichSinn -‐ Michael Sinner
Alle machen Umleitungen! Wieso?
GET h\p://www.beispiel.de/ DNS-‐Lookup HTTP-‐Request
Redirect h\p://m.beispiel.de/
GET h\p://m.beispiel.de/ HTTP-‐Request
301 Redirect h\p://m.beispiel.de/iphone
GET h\p://m.beispiel.de/iphone
200 OK
Auf Umleitungen verzichten
@MichSinn -‐ Michael Sinner 31
Im Durchschni\ 30% größere HTTP-‐Header bei Mobile!
Cloaking ist das neue Mobile SEO
@MichSinn -‐ Michael Sinner 32
So wenige Verbindungen wie möglich erzwingen!
HTTP-‐Requests bedeuten Verbindungen
@MichSinn -‐ Michael Sinner 33
Quelle: Maximiliano Firtman, Velocity Conference Juni 2010 h\p://www.slideshare.net/firt/mobile-‐web-‐high-‐performance
Das Packet-‐System
@MichSinn -‐ Michael Sinner 34
Inline Grafiken im HTML
CSS-‐Sprite Grafiken
Libraries (JavaScript, etc.)
Font-‐Pictogramme
h\p://www.thebuzzmedia.com/cat-‐box-‐sizng-‐is-‐a-‐law-‐of-‐nature/
Keep It (Short and) Simple, Stupid KISS
KEINE iFrames!
Mehr CSS
Weniger aufwendigen Schnickschnack
Minimierung der Rohdaten
@MichSinn -‐ Michael Sinner 35
Komprimierung
@MichSinn -‐ Michael Sinner 36
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
„lazy load“-‐Modus für Dateien (keine „naNve“ Lösung, aber JS tut sein bestes)
Zusätzliche Dateien von Dri\parteien 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)
Inhalte dynamisch nachladen
@MichSinn -‐ Michael Sinner 37
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!
Mache Caching zu deinem Freund
@MichSinn -‐ Michael Sinner 38
Agenda
Was ist (Mobile) Performance?
Wie Mobile Performance messen?
Was sind die Best-‐PracNces?
+ Fazit
39 @MichSinn -‐ Michael Sinner
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!
Was haben wir heute gelernt?
@MichSinn -‐ Michael Sinner 40
top related