Speeding Up your Mobile HTML5 Experience

868aa64e3911e387b8703aea57c3b26d?s=47 firtman
June 18, 2013

Speeding Up your Mobile HTML5 Experience

Slides from the tutorial at Velocity Conference Santa Clara 2013

868aa64e3911e387b8703aea57c3b26d?s=128

firtman

June 18, 2013
Tweet

Transcript

  1. speeding up your mobile html5 experience max firtman @firt firt.mobi

    June, 18, 2013 Santa Clara, CA Tuesday, June 18, 13
  2. mobile+web developer maximiliano firtman @ rt Tuesday, June 18, 13

  3. Tuesday, June 18, 13

  4. Tuesday, June 18, 13

  5. questions yes, please QA at the end Tuesday, June 18,

    13
  6. performance + mobile + html5 1- Mobile & Performance 2-

    Measuring 3- e worst - with examples! :) 4- What to do... always 5- What to do... sometimes Tuesday, June 18, 13
  7. DISCLAIMER iOS 7 Tuesday, June 18, 13

  8. Tuesday, June 18, 13

  9. 1- mobile & performance Tuesday, June 18, 13

  10. 1- mobile & performance - e ecosystem in 2013 -

    HTML5 - What performance means - Differences Tuesday, June 18, 13
  11. mobile ecosystem Tuesday, June 18, 13

  12. web platforms Tuesday, June 18, 13

  13. How many browsers do you know on desktop? web platforms

    Tuesday, June 18, 13
  14. 5 web platforms Tuesday, June 18, 13

  15. How many browsers do you know on mobile? web platforms

    Tuesday, June 18, 13
  16. ... web platforms Tuesday, June 18, 13

  17. Tuesday, June 18, 13

  18. Android Browser Tuesday, June 18, 13

  19. Google Chrome Tuesday, June 18, 13

  20. Google Chrome Android Tuesday, June 18, 13

  21. Google Chrome iOS Tuesday, June 18, 13

  22. Safari on iOS Tuesday, June 18, 13

  23. Opera Mobile Mini Tuesday, June 18, 13

  24. Firefox Tuesday, June 18, 13

  25. Firefox OS Tuesday, June 18, 13

  26. Internet Explorer Tuesday, June 18, 13

  27. BlackBerry Browser 5-7.x PlayBook BB10 Tuesday, June 18, 13

  28. Nokia Browser MeeGo Symbian Series 40 Tuesday, June 18, 13

  29. Silk Tuesday, June 18, 13

  30. should I continue? ( ) Tuesday, June 18, 13

  31. Cloud-based browsers web platforms Tuesday, June 18, 13

  32. And it’s not just browsers! web platforms Tuesday, June 18,

    13
  33. Web View web platforms Tuesday, June 18, 13

  34. Web View web platforms Tuesday, June 18, 13

  35. Web View web platforms Tuesday, June 18, 13

  36. Web View web platforms Tuesday, June 18, 13

  37. e web view is different web platforms Tuesday, June 18,

    13
  38. Tuesday, June 18, 13

  39. “change is the only constant“ Heraclitus Tuesday, June 18, 13

  40. what can we do with html5 Tuesday, June 18, 13

  41. mobile 1- websites 2- apps Tuesday, June 18, 13

  42. mobile 1- websites 2- apps Tuesday, June 18, 13

  43. mobile 1- websites 2- apps Tuesday, June 18, 13

  44. we can create 1- websites Tuesday, June 18, 13

  45. Using the browser URL Web Server 1- websites we can

    create Tuesday, June 18, 13
  46. we can create 2- webapps Tuesday, June 18, 13

  47. Browser to install Full-screen Icon on home screen Web Server

    2- webapps we can create Tuesday, June 18, 13
  48. full screen webapps home screen webapps webapps are also known

    as ( ) Tuesday, June 18, 13
  49. we can create 3- native webapps Tuesday, June 18, 13

  50. Package, compile, sign Icon on home screen App Store No

    web server 3- native webapps we can create Tuesday, June 18, 13
  51. hybrid apps packaged webapps native webapps are also known as

    ( ) Tuesday, June 18, 13
  52. mobile 1- websites 2- apps Tuesday, June 18, 13

  53. a- native b- webapps c- native webapps mobile 1- websites

    2- apps Tuesday, June 18, 13
  54. Tuesday, June 18, 13

  55. performance and mobile Tuesday, June 18, 13

  56. Most important feature Not just load time Perception Whole experience

    performance & mobile Tuesday, June 18, 13
  57. load 1s fast feedback 100ms fast perception Tuesday, June 18,

    13
  58. load 3s ok, I'm still there feedback 1s ok, I'm

    still there perception Tuesday, June 18, 13
  59. differences Tuesday, June 18, 13

  60. CPU and GPU Memory Networks: cellular vs wi differences Tuesday,

    June 18, 13
  61. We have 4G! We don't need to worry about performance...

    ( ) Tuesday, June 18, 13
  62. Bandwidth (Mbps) cellular networks 2G 0.1-0.4 3G 0.7-5 4G 1-50

    Tuesday, June 18, 13
  63. Latency (ms) cellular networks 2G 300 - 1000 3G 150

    - 450 4G 100 - 180 Tuesday, June 18, 13
  64. Latency (ms) cellular networks 2G 300 - 1000 3G 4G

    150 - 450 100 - 180 Home wired connections in US: 20-45 Tuesday, June 18, 13
  65. mobify.com Tuesday, June 18, 13

  66. latency request bandwidth Tuesday, June 18, 13

  67. Active Pending Idle radio state Tuesday, June 18, 13

  68. From Idle to Active cellular networks 3G < 2.5 s

    4G < 100 ms Tuesday, June 18, 13
  69. Tuesday, June 18, 13

  70. 1- mobile & performance - Complex will change - not

    just websites - not just load time - cellular networks Tuesday, June 18, 13
  71. 2- measuring on mobile Tuesday, June 18, 13

  72. 2- measuring on mobile - the target - tools -

    HTML5 APIs Tuesday, June 18, 13
  73. Simulator Emulator Real device target Tuesday, June 18, 13

  74. simulators DEMO Tuesday, June 18, 13

  75. emulators http://emulato.rs Tuesday, June 18, 13

  76. real device Open Device Lab Virtual Lab Your own Lab

    Tuesday, June 18, 13
  77. Remote inspectors • BlackBerry Smartphones 7/10 • Google Chrome for

    Android • Opera Mobile • Safari on iOS 6+ • Firefox (Android / FFOS) tools Tuesday, June 18, 13
  78. Remote inspectors tools DEMO Tuesday, June 18, 13

  79. Proxies / Network sniffers • Charles Proxy • Fiddler •

    PCapPerf tools Tuesday, June 18, 13
  80. Proxies on the device • jsHybugger for Android • HttpWatch

    for iOS tools Tuesday, June 18, 13
  81. Connection simulators • Charles Proxy • Net Limiter for Windows

    • SlowyApp tools Tuesday, June 18, 13
  82. Navigation Timing API • Android 4.0+, Chrome, BB10, IE9+, Firefox

    • window.performance • Timestamps available html5 apis Tuesday, June 18, 13
  83. Navigation Timing API html5 apis DEMO Tuesday, June 18, 13

  84. Resource Timing API • Chrome only html5 apis Tuesday, June

    18, 13
  85. Network Information API • Old spec: navigator.connection.type Android Browser /

    Apache Cordova • New spec: navigator.connection.bandwidth BlackBerry 10 / Firefox html5 apis Tuesday, June 18, 13
  86. 2- measuring on mobile - measure on real devices only

    - tools: remote debuggers, proxies - HTML5 APIs Tuesday, June 18, 13
  87. 3- the worst Tuesday, June 18, 13

  88. 3- the worst - redirects - requests - design &

    usability - javascript - responsive web design? Tuesday, June 18, 13
  89. Redirects • From 150 to 1000 ms per redirect •

    mydomain.com -> m.mydomain.com • URL shorteners • It can be worst! the worst Tuesday, June 18, 13
  90. Redirections the worst DEMO Tuesday, June 18, 13

  91. Redirections the worst aa.com -> www.aa.com -> www.aa.com/homePage.do -> mobile.aa.com

    -> www.aa.com/mt -> www.aa.com/mt/homePage.do Tuesday, June 18, 13
  92. Redirections • From 1 to 5s the worst Tuesday, June

    18, 13
  93. the worst Tuesday, June 18, 13

  94. idontwantyourfuckingapp.tumblr.com Tuesday, June 18, 13

  95. Requests • Best -> no requests • Remember latency and

    idle status • Keep them to the minimum, really! the worst Tuesday, June 18, 13
  96. Requests • Donate $50 per request the worst Tuesday, June

    18, 13
  97. Usability and Design • Be mobile • Careful with blending

    • Test and measure • e designer is a better enemy the worst Tuesday, June 18, 13
  98. JavaScript • Really expensive • Blocks downloads and responsiveness •

    Repaint and DOM manipulation, the worst • Too frequent timers? mmmm • Frameworks... oh, frameworks.... the worst Tuesday, June 18, 13
  99. Responsive Web Design the worst Tuesday, June 18, 13

  100. Responsive Web Design the worst Oh, do we need to

    talk about this? Tuesday, June 18, 13
  101. Responsive Web Design the worst DEMO Tuesday, June 18, 13

  102. Brad Frost "Your visitors don’t give a shit if your

    site is responsive." the worst Tuesday, June 18, 13
  103. Responsive Web Design • Don't use it just because it's

    cool • RWD is great on some situations • RWD is terrible on other situations • Add some server-side logic -> RESS the worst Tuesday, June 18, 13
  104. RWD the worst for mobile performance, the best is not

    always Tuesday, June 18, 13
  105. AWD the worst for mobile performance, the best is Tuesday,

    June 18, 13
  106. Agressive Web Design the worst for mobile performance, the best

    is Tuesday, June 18, 13
  107. 3- the worst - don't redirect, don't stop your user

    - avoid requests at all cost - balance design, get a new enemy - keep javascript at the minimum - responsive web design? Tuesday, June 18, 13
  108. 4- what to do always Tuesday, June 18, 13

  109. 4- what to do always - remembering last chapter -

    javascript frameworks - classic techniques - improve speed Tuesday, June 18, 13
  110. Remembering... • don´t redirect • keep your requests to the

    minimum • cool not always goes with performance what to do always Tuesday, June 18, 13
  111. JavaScript frameworks • do you need them?, really? • customize

    your build to your needs • use alternatives what to do always Tuesday, June 18, 13
  112. Classic techniques • Enable GZIP for text-based les • Compress

    CSS & JS • Only the CSS and JS you are using • reduce DNS lookup • stylesheets at the top what to do always Tuesday, June 18, 13
  113. Classic techniques • script at the bottom, or better: *

    async loading * use html5 new attributes what to do always <script async defer src=""></script> HTML5 Tuesday, June 18, 13
  114. Reduce the DOM • Keep it really simple • For

    in nite scrolling • Use object pools • Use iframes what to do always Tuesday, June 18, 13
  115. Improve perception • Flush early, be ready asap • If

    you have an external CSS, ush aer it • Hide URL bar asap • Pre-fetch and batch requests on progressive loading what to do always Tuesday, June 18, 13
  116. Improve perception • mouse vs touch events • e 300ms

    delay • xed viewport? • FastClick solution what to do always Tuesday, June 18, 13
  117. 4- what to do always - follow classic techniques, use

    desktop tools - create a perception of speed - measure, test, measure test Tuesday, June 18, 13
  118. 5- what to do sometimes Tuesday, June 18, 13

  119. Most of the solutions and best practices are not for

    every kind of html5 project ( ) Tuesday, June 18, 13
  120. 5- what to do sometimes - improve the experience -

    server communication - javascript - media - responsive images Tuesday, June 18, 13
  121. Improve experience what to do sometimes use Application Cache •

    perception of immediate loading • only for html and basic resources • updating is still a problem • buggy Tuesday, June 18, 13
  122. Improve experience what to do sometimes HD / SD version

    • make a decision based on the context • allow the user to switch to a light version • copy YouTube idea Tuesday, June 18, 13
  123. Improve experience what to do sometimes Zombie tab for iOS

    DEMO Tuesday, June 18, 13
  124. Network communication what to do sometimes Server-side events • keep

    an HTTP request opened • re-connects automatically • send contents in batch (in JSON/XML) Tuesday, June 18, 13
  125. Network communication what to do sometimes Web Sockets • less

    overhead • bidirectional • use with care: battery, reliability Tuesday, June 18, 13
  126. Network communication what to do sometimes Data URI • embrace

    embedded content • use it with storage APIs for caching • much better than a request Tuesday, June 18, 13
  127. Network communication what to do sometimes Custom Cache • Up

    to 5x faster than standard browser cache • Cookies for server-side detection or a light JS detection framework • Up to 2.5Mb safe (4Mb using compression) Tuesday, June 18, 13
  128. Custom cache browser server request (no cookies) response full html

    inline images css styles javascript code stores resources in localStorage and create cookie Tuesday, June 18, 13
  129. Custom cache first load browser server request (no cookies) response

    full html inline images css styles javascript code stores resources in localStorage and create cookie Tuesday, June 18, 13
  130. Custom cache browser server request (with cookies) response basic html

    basic javascript updated resources Tuesday, June 18, 13
  131. Custom cache second load browser server request (with cookies) response

    basic html basic javascript updated resources Tuesday, June 18, 13
  132. Network communication what to do sometimes HTTP 2.0 • Near

    future • Today: SPDY; Chrome Tuesday, June 18, 13
  133. JavaScript what to do sometimes • Web Workers var w

    = new Worker("worker.js"); w.addEventListener("message", function(e) { }); w.postMessage("Hi Worker!") JAVASCRIPT Tuesday, June 18, 13
  134. JavaScript what to do sometimes • Geolocation cache navigator.geolocation .getCurrentPosition(cbOK,

    cbKO, { maximumAge: 60000 }); JAVASCRIPT Tuesday, June 18, 13
  135. Media what to do sometimes • CSS Sprites vs. inline

    elements vs. JSON Resource library Tuesday, June 18, 13
  136. Media what to do sometimes • Always use CSS transitions/animations

    when possible • On games and user-based animations, ask for Animation Timing API (requestAnimationFrame) • Use Page Visibility API to pause/resume Animations Tuesday, June 18, 13
  137. Media what to do sometimes • Using a 3D transform

    • Be careful; the GPU is also limited • Apple is not recommending this hack anymore Hardware acceleration Tuesday, June 18, 13
  138. Media what to do sometimes • Progressive JPEGs • WebP

    • JPEG XR Alternative image formats Tuesday, June 18, 13
  139. Media what to do sometimes • Blocks rendering -> performance

    issue • Remove characters from the font le • Use a web font loader • Fonts in Data URI on some platforms Custom fonts Tuesday, June 18, 13
  140. Screen densities 300 CSS pixels 300 1.00 390 1.30 450

    1.50 600 2.00 672 2.24 900 3.00 device px px ratio what to do sometimes Tuesday, June 18, 13
  141. Screen densities using vector images <img src="photo.svg" width="300"> <svg></svg> @font-face

    {} what to do sometimes Tuesday, June 18, 13
  142. Screen densities using javascript if (window.devicePixelRatio > 1.5) { //

    change URL } what to do sometimes Tuesday, June 18, 13
  143. Screen densities using css extensions #photoContainer { background-image: -webkit-image-set(url('photo-lo.png') 1x,

    url('photo-hi.png') 2x); width: 300px; height: 200px; } what to do sometimes Tuesday, June 18, 13
  144. Screen densities using css media queries @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio:

    1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { } what to do sometimes Tuesday, June 18, 13
  145. Screen densities • transfer, decoding time and memory usage •

    try and measure • For 1x, always image of 1x • For 2x: image of 2x, 1.5x? • For 3x: image of 2x? 3x?? what to do sometimes Tuesday, June 18, 13
  146. 5- what to do sometimes - improve the experience -

    server comunication - javascript - media - screen densities Tuesday, June 18, 13
  147. Picture from Simon Howden freedigitalphotos.net! uf! we've covered a lot!

    Tuesday, June 18, 13
  148. 1- Mobile & Performance 2- Measuring 3- e worst 4-

    What to do... always 5- What to do... sometimes Tuesday, June 18, 13
  149. performance and mobile - learn to measure - be simple,

    be aggressive - test every technique - keep measuring - change is the only constant Tuesday, June 18, 13
  150. you can reach a good experience Pictures)from)freedigitalphotos.net) thank you! firt.mobi

    twitter: @firt www.mobilexweb.com rt.mobi/pmw Tuesday, June 18, 13