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.093 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.093
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
40
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  

×