Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
SEO	  CAMPIXX	  2012	  Mobile	  Performance	  Tuning	                      Michael	  Sinner	               @MichSinn	  -­‐...
Um	  was	  geht	  es?	                      Technologische	  Verbreitung,	  gemessen	  nach	  Penetra:on	  im	            ...
Um	  was	  geht	  es?	                                              2011	  verkauEe	  Einheiten	  in	  Mio.	              ...
Was	  bekomme	  ich	  heute	  für	  500,-­‐	  €	  ?	                        Desktop	                 Laptop	              ...
Um	  was	  geht	  es?	      Quelle:	  Steve	  Souders,	  hp://stevesouders.com/docs/mobilism-20110513.pptx	               ...
Die	  Herausforderungen	  der	  Performance	  Op:mierung	                                                                 ...
Performance	  Op:mierung	  bei	  amazon.com	           Was	  tun,	  wenn	  man	  nicht	  amazon.com	  ist?	    Quelle:	  J...
Agenda	  Was	  ist	  (Mobile)	  Performance?	  Wie	  Mobile	  Performance	  messen?	  Was	  sind	  die	  Best-­‐PracNces?	...
Agenda	  +	  Was	  ist	  (Mobile)	  Performance?	  Wie	  Mobile	  Performance	  messen?	  Was	  sind	  die	  Best-­‐PracNc...
Ist	  Performance	  wich:g?	                 Was	  tun,	  wenn	  man	  nicht	  Amazon.com	  ist?	     Quelle:	  Jake	  Bru...
Performance	  ist	  relevant!	     Quelle:	  Jake	  Brutlag	  (Google),	  Eric	  Schuman	  (bing)	  –	  Velocity	  Confere...
Performance,	  der	  relevanteste	  Faktor?	                                                                           “Fi...
Ultraschnell	  ist	  wich:g	                                                                                              ...
Noch	  schneller	                          Verdoppeln...	  Datengeschwindigkeit	                                          ...
Was	  ist	  Performance?	                                   @MichSinn	  -­‐	  Michael	  Sinner	     15	  
Back-­‐	  und	  Frontend	  bei	  Performance	                                                                     Backend	...
Performance	  berechnen	                                                             Dynamische	  Inhalte?	               ...
Erste	  Learnings	    Performance	  ist	  Basis	  für	  Erfolg	     Oder:	  Performance	  (vortäuschen)	  macht	  erfolgr...
Agenda	  Was	  ist	  (Mobile)	  Performance?	  +	  Wie	  Mobile	  Performance	  messen?	  Was	  sind	  die	  Best-­‐PracNc...
Kennzahlen	  zur	  Op:mierung	  „Das	  Op2mum	  ist	  die	  Lösung,	  die	  unter	    mehreren	  Op2mierungszielen	  op2ma...
Herausforderungen	  bei	  der	  Mobile	  Performancemessung	    Hürden:	        Datenübertragungsrate	  schwankt	  sehr	...
Mobil	  Daten	  sammeln,	  lokal	  auswerten	      Auswertungen	  aus	  Tools	  auf	  dem	  Mobilgerät	  im	  Browser	  s...
Bookmarks	  als	  Tools	      Durch	  Lesezeichen	  FunkNonen	  über	  JS	  laden	      Vielzahl	  an	  FunkNonen,	  ana...
FirebugLite	  im	  Firefox	  Mobile	      HTML	  Inhalte	  auf	  einem	  Mobilgerät	  analysieren	      CSS	  und	  HTML...
Yslow	  als	  Webapp	      YSlow	  direkt	  auf	  Smartphone	  ausführen	      Bewertung	  der	  Performance	  einer	  M...
Das	  DOM-­‐Monster	  bekämpfen	      Das	  DataObjectModel	  einer	  Webseite	  analysieren	      Tipps	  und	  Auswert...
Ladezeiten	  berechnen	      Gibt	  Ladezeit	  einer	  Seite	  wieder	                                                   ...
Quelltext	  analysieren	      HTML	  auf	  Mobile	  Browser	  anzeigen	  lassen	      Externe	  Elemente	  anzeigen	  la...
PCAPPerf.appspot.com	      Bryan	  McQuade	  vom	  Google	  Page	  Speed	  Team	      P(acket)Capture	  Format	  sammelt...
Agenda	  Was	  ist	  (Mobile)	  Performance?	  Wie	  Mobile	  Performance	  messen?	  +	  Was	  sind	  die	  Best-­‐Prac:c...
Auf	  Umleitungen	  verzichten	  Alle	  machen	  Umleitungen!	  Wieso?	  GET	  hp://www.beispiel.de/	  DNS-­‐Lookup	  HTTP...
Cloaking	  ist	  das	  neue	  Mobile	  SEO	                                           @MichSinn	  -­‐	  Michael	  Sinner	 ...
HTTP-­‐Requests	  bedeuten	  Verbindungen	    So	  wenige	  Verbindungen	  wie	  möglich	  erzwingen!	     Quelle:	  Maxi...
Das	  Packet-­‐System	          Inline	  Grafiken	  im	  HTML	  	          CSS-­‐Sprite	  Grafiken	          Libraries	  (Ja...
Minimierung	  der	  Rohdaten	    Keep	  It	  (Short	  and)	  Simple,	  Stupid	     KISS	    KEINE	  iFrames!	    Mehr	 ...
Komprimierung	     Alle	  Inhalte	  stärker	  komprimieren	  als	  für	  Breitband	              Bilder	              Vide...
Inhalte	  dynamisch	  nachladen	    „lazy	  load“-­‐Modus	  für	  Dateien	     (keine	  „naNve“	  Lösung,	  aber	  JS	  t...
Mache	  Caching	  zu	  deinem	  Freund	    Simple	  Browser	  unterstützen	  expires-­‐header	  InformaNonen	     Immer	 ...
Agenda	  Was	  ist	  (Mobile)	  Performance?	  Wie	  Mobile	  Performance	  messen?	  Was	  sind	  die	  Best-­‐PracNces?	...
Was	  haben	  wir	  heute	  gelernt?	    Performance	  ist	  mehr	  als	  bloß	  nackte	  Zahlen	    Mobile	  Performanc...
Nächste SlideShare
Wird geladen in …5
×

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

1.228 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
  • Als Erste(r) kommentieren

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

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  

×