Trg mobile-performance-tuning-msi campixx-22022012_pub

@MichSinn -‐ Michael Sinner 1

Mobile Performance Tuning

Michael Sinner

SEO CAMPIXX 2012

Um was geht es?


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?


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,-‐ € ?


Um was geht es?


Quelle: Steve Souders, h\p://stevesouders.com/docs/mobilism-20110513.pptx

Die Herausforderungen der Performance Op:mierung


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


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?



Fazit


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 h\p://velocityconf.com/velocity2009/public/schedule/detail/8523

Performance ist relevant!


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?


“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


ultraschnell überlegene Leistung und Geschwindigkeit

superschnell

Noch schneller


schnellere

Verdoppeln... Datengeschwindigkeit

schnelleres

schnell

Was ist Performance?


Back-‐ und Frontend bei Performance


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


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


Agenda


+ Wie Mobile Performance messen?


Fazit


„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


  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


  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


  Durch Lesezeichen FunkNonen über JS laden   Vielzahl an FunkNonen, analog zu Desktop

  Datenhaltung in der Cloud zur Auswertung möglich

Bookmarks als Tools


  HTML Inhalte auf einem Mobilgerät analysieren   CSS und HTML Elemente untersuchen und verändern

  Detaillierte Analyse

FirebugLite im Firefox Mobile


  YSlow direkt auf Smartphone ausführen   Bewertung der Performance einer Mobilversion

  Unterscheidung in viele Performancekategorien

Yslow als Webapp


  Das DataObjectModel einer Webseite analysieren   Tipps und Auswertungen im Tool

Das DOM-‐Monster bekämpfen


  Gibt Ladezeit einer Seite wieder

Ladezeiten berechnen


  HTML auf Mobile Browser anzeigen lassen   Externe Elemente anzeigen lassen

  Sinnvoll: Übertragung zu JDROP

Quelltext analysieren


  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


Agenda



+ Was sind die Best-‐Prac:ces?

Fazit


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


Im Durchschni\ 30% größere HTTP-‐Header bei Mobile!

Cloaking ist das neue Mobile SEO


  So wenige Verbindungen wie möglich erzwingen!

HTTP-‐Requests bedeuten Verbindungen


Quelle: Maximiliano Firtman, Velocity Conference Juni 2010 h\p://www.slideshare.net/firt/mobile-‐web-‐high-‐performance

Das Packet-‐System


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


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

  „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


  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


Agenda




+ Fazit


  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?


Technology

Trg mobile-performance-tuning-msi campixx-22022012_pub