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

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 schaﬀen?   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/ﬁrt/mobile-‐web-‐high-‐performance @MichSinn -‐ Michael Sinner 33

34. Das Packet-‐System Inline Graﬁken im HTML CSS-‐Sprite Graﬁken 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 Graﬁken 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

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

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

Recommended

More Related Content

Viewers also liked

Viewers also liked(17)

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