Trg mobile-performance-tuning-msi campixx-22022012_pub
-
Upload
mischasinner -
Category
Technology
-
view
776 -
download
0
description
Transcript of Trg mobile-performance-tuning-msi campixx-22022012_pub
![Page 1: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/1.jpg)
@MichSinn -‐ Michael Sinner 1
Mobile Performance Tuning
Michael Sinner
SEO CAMPIXX 2012
![Page 2: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/2.jpg)
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
![Page 3: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/3.jpg)
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 %
![Page 4: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/4.jpg)
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
![Page 5: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/5.jpg)
Um was geht es?
@MichSinn -‐ Michael Sinner 5
Quelle: Steve Souders, h\p://stevesouders.com/docs/mobilism-20110513.pptx
![Page 6: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/6.jpg)
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
![Page 7: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/7.jpg)
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?
![Page 8: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/8.jpg)
Agenda
Was ist (Mobile) Performance?
Wie Mobile Performance messen?
Was sind die Best-‐PracNces?
Fazit
8 @MichSinn -‐ Michael Sinner
![Page 9: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/9.jpg)
Agenda
+ Was ist (Mobile) Performance?
Wie Mobile Performance messen?
Was sind die Best-‐PracNces?
Fazit
9 @MichSinn -‐ Michael Sinner
![Page 10: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/10.jpg)
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
![Page 11: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/11.jpg)
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
![Page 12: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/12.jpg)
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
![Page 13: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/13.jpg)
Ultraschnell ist wich:g
@MichSinn -‐ Michael Sinner 13
ultraschnell überlegene Leistung und Geschwindigkeit
superschnell
![Page 14: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/14.jpg)
Noch schneller
@MichSinn -‐ Michael Sinner 14
schnellere
Verdoppeln... Datengeschwindigkeit
schnelleres
schnell
![Page 15: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/15.jpg)
Was ist Performance?
@MichSinn -‐ Michael Sinner 15
![Page 16: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/16.jpg)
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.”
![Page 17: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/17.jpg)
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?
![Page 18: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/18.jpg)
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
![Page 19: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/19.jpg)
Agenda
Was ist (Mobile) Performance?
+ Wie Mobile Performance messen?
Was sind die Best-‐PracNces?
Fazit
19 @MichSinn -‐ Michael Sinner
![Page 20: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/20.jpg)
„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
![Page 21: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/21.jpg)
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
![Page 22: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/22.jpg)
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
![Page 23: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/23.jpg)
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
![Page 24: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/24.jpg)
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
![Page 25: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/25.jpg)
YSlow direkt auf Smartphone ausführen Bewertung der Performance einer Mobilversion
Unterscheidung in viele Performancekategorien
Yslow als Webapp
@MichSinn -‐ Michael Sinner 25
![Page 26: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/26.jpg)
Das DataObjectModel einer Webseite analysieren Tipps und Auswertungen im Tool
Das DOM-‐Monster bekämpfen
@MichSinn -‐ Michael Sinner 26
![Page 27: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/27.jpg)
Gibt Ladezeit einer Seite wieder
Ladezeiten berechnen
@MichSinn -‐ Michael Sinner 27
![Page 28: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/28.jpg)
HTML auf Mobile Browser anzeigen lassen Externe Elemente anzeigen lassen
Sinnvoll: Übertragung zu JDROP
Quelltext analysieren
@MichSinn -‐ Michael Sinner 28
![Page 29: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/29.jpg)
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
![Page 30: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/30.jpg)
Agenda
Was ist (Mobile) Performance?
Wie Mobile Performance messen?
+ Was sind die Best-‐Prac:ces?
Fazit
30 @MichSinn -‐ Michael Sinner
![Page 31: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/31.jpg)
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!
![Page 32: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/32.jpg)
Cloaking ist das neue Mobile SEO
@MichSinn -‐ Michael Sinner 32
![Page 33: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/33.jpg)
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
![Page 34: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/34.jpg)
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/
![Page 35: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/35.jpg)
Keep It (Short and) Simple, Stupid KISS
KEINE iFrames!
Mehr CSS
Weniger aufwendigen Schnickschnack
Minimierung der Rohdaten
@MichSinn -‐ Michael Sinner 35
![Page 36: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/36.jpg)
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
![Page 37: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/37.jpg)
„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
![Page 38: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/38.jpg)
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
![Page 39: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/39.jpg)
Agenda
Was ist (Mobile) Performance?
Wie Mobile Performance messen?
Was sind die Best-‐PracNces?
+ Fazit
39 @MichSinn -‐ Michael Sinner
![Page 40: Trg mobile-performance-tuning-msi campixx-22022012_pub](https://reader034.fdocuments.net/reader034/viewer/2022052623/559a06841a28abdf208b4585/html5/thumbnails/40.jpg)
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