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

1.113 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.113
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
41
Aktionen
Geteilt
0
Downloads
26
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

  1. 1. SEO  CAMPIXX  2012  Mobile  Performance  Tuning   Michael  Sinner   @MichSinn  -­‐  Michael  Sinner   1  
  2. 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. 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. 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. 5. Um  was  geht  es?   Quelle:  Steve  Souders,  hp://stevesouders.com/docs/mobilism-20110513.pptx   @MichSinn  -­‐  Michael  Sinner   5  
  6. 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. 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. 8. Agenda  Was  ist  (Mobile)  Performance?  Wie  Mobile  Performance  messen?  Was  sind  die  Best-­‐PracNces?  Fazit   @MichSinn  -­‐  Michael  Sinner   8  
  9. 9. Agenda  +  Was  ist  (Mobile)  Performance?  Wie  Mobile  Performance  messen?  Was  sind  die  Best-­‐PracNces?  Fazit   @MichSinn  -­‐  Michael  Sinner   9  
  10. 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. 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. 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. 13. Ultraschnell  ist  wich:g   ultraschnell   überlegene  Leistung  und  Geschwindigkeit   superschnell   @MichSinn  -­‐  Michael  Sinner   13  
  14. 14. Noch  schneller   Verdoppeln...  Datengeschwindigkeit   schnelleres   schnellere   schnell   @MichSinn  -­‐  Michael  Sinner   14  
  15. 15. Was  ist  Performance?   @MichSinn  -­‐  Michael  Sinner   15  
  16. 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. 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. 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. 19. Agenda  Was  ist  (Mobile)  Performance?  +  Wie  Mobile  Performance  messen?  Was  sind  die  Best-­‐PracNces?  Fazit   @MichSinn  -­‐  Michael  Sinner   19  
  20. 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. 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. 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. 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. 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. 25. Yslow  als  Webapp    YSlow  direkt  auf  Smartphone  ausführen    Bewertung  der  Performance  einer  Mobilversion    Unterscheidung  in  viele  Performancekategorien   @MichSinn  -­‐  Michael  Sinner   25  
  26. 26. Das  DOM-­‐Monster  bekämpfen    Das  DataObjectModel  einer  Webseite  analysieren    Tipps  und  Auswertungen  im  Tool   @MichSinn  -­‐  Michael  Sinner   26  
  27. 27. Ladezeiten  berechnen    Gibt  Ladezeit  einer  Seite  wieder   @MichSinn  -­‐  Michael  Sinner   27  
  28. 28. Quelltext  analysieren    HTML  auf  Mobile  Browser  anzeigen  lassen    Externe  Elemente  anzeigen  lassen    Sinnvoll:  Übertragung  zu  JDROP   @MichSinn  -­‐  Michael  Sinner   28  
  29. 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. 30. Agenda  Was  ist  (Mobile)  Performance?  Wie  Mobile  Performance  messen?  +  Was  sind  die  Best-­‐Prac:ces?  Fazit   @MichSinn  -­‐  Michael  Sinner   30  
  31. 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. 32. Cloaking  ist  das  neue  Mobile  SEO   @MichSinn  -­‐  Michael  Sinner   32  
  33. 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. 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. 35. Minimierung  der  Rohdaten    Keep  It  (Short  and)  Simple,  Stupid   KISS    KEINE  iFrames!    Mehr  CSS    Weniger  aufwendigen   Schnickschnack   @MichSinn  -­‐  Michael  Sinner   35  
  36. 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. 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. 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. 39. Agenda  Was  ist  (Mobile)  Performance?  Wie  Mobile  Performance  messen?  Was  sind  die  Best-­‐PracNces?  +  Fazit   @MichSinn  -­‐  Michael  Sinner   39  
  40. 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  

×