• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Trg mobile-performance-tuning-msi campixx-22022012_pub
 

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

on

  • 851 views

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

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

Statistics

Views

Total Views
851
Views on SlideShare
830
Embed Views
21

Actions

Likes
0
Downloads
21
Comments
0

3 Embeds 21

http://www.mindtheweb.de 19
http://www.google.com&_=1331589835400 HTTP 1
http://www.google.com&_=1331627830295 HTTP 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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