Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Speeding Up your Mobile HTML5 Experience

firtman
June 18, 2013

Speeding Up your Mobile HTML5 Experience

Slides from the tutorial at Velocity Conference Santa Clara 2013

firtman

June 18, 2013
Tweet

Other Decks in Technology

Transcript

  1. speeding up
    your mobile
    html5
    experience
    max firtman
    @firt
    firt.mobi
    June, 18, 2013
    Santa Clara, CA
    Tuesday, June 18, 13

    View Slide

  2. mobile+web developer
    maximiliano firtman
    @ rt
    Tuesday, June 18, 13

    View Slide

  3. Tuesday, June 18, 13

    View Slide

  4. Tuesday, June 18, 13

    View Slide

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

    View Slide

  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

    View Slide

  7. DISCLAIMER
    iOS 7
    Tuesday, June 18, 13

    View Slide

  8. Tuesday, June 18, 13

    View Slide

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

    View Slide

  10. 1- mobile & performance
    - e ecosystem in 2013
    - HTML5
    - What performance means
    - Differences
    Tuesday, June 18, 13

    View Slide

  11. mobile ecosystem
    Tuesday, June 18, 13

    View Slide

  12. web platforms
    Tuesday, June 18, 13

    View Slide

  13. How many browsers do you
    know on desktop?
    web platforms
    Tuesday, June 18, 13

    View Slide

  14. 5
    web platforms
    Tuesday, June 18, 13

    View Slide

  15. How many browsers do you
    know on mobile?
    web platforms
    Tuesday, June 18, 13

    View Slide

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

    View Slide

  17. Tuesday, June 18, 13

    View Slide

  18. Android Browser
    Tuesday, June 18, 13

    View Slide

  19. Google Chrome
    Tuesday, June 18, 13

    View Slide

  20. Google Chrome Android
    Tuesday, June 18, 13

    View Slide

  21. Google Chrome iOS
    Tuesday, June 18, 13

    View Slide

  22. Safari on iOS
    Tuesday, June 18, 13

    View Slide

  23. Opera Mobile
    Mini
    Tuesday, June 18, 13

    View Slide

  24. Firefox
    Tuesday, June 18, 13

    View Slide

  25. Firefox OS
    Tuesday, June 18, 13

    View Slide

  26. Internet Explorer
    Tuesday, June 18, 13

    View Slide

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

    View Slide

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

    View Slide

  29. Silk
    Tuesday, June 18, 13

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  38. Tuesday, June 18, 13

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  45. Using the browser
    URL
    Web Server
    1- websites
    we can create
    Tuesday, June 18, 13

    View Slide

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

    View Slide

  47. Browser to install
    Full-screen
    Icon on home screen
    Web Server
    2- webapps
    we can create
    Tuesday, June 18, 13

    View Slide

  48. full screen webapps
    home screen webapps
    webapps are also known as
    (
    )
    Tuesday, June 18, 13

    View Slide

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

    View Slide

  50. Package, compile, sign
    Icon on home screen
    App Store
    No web server
    3- native webapps
    we can create
    Tuesday, June 18, 13

    View Slide

  51. hybrid apps
    packaged webapps
    native webapps are also known as
    (
    )
    Tuesday, June 18, 13

    View Slide

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

    View Slide

  53. a- native
    b- webapps
    c- native webapps
    mobile
    1- websites
    2- apps
    Tuesday, June 18, 13

    View Slide

  54. Tuesday, June 18, 13

    View Slide

  55. performance and mobile
    Tuesday, June 18, 13

    View Slide

  56. Most important feature
    Not just load time
    Perception
    Whole experience
    performance & mobile
    Tuesday, June 18, 13

    View Slide

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

    View Slide

  58. load 3s ok, I'm still there
    feedback 1s ok, I'm still there
    perception
    Tuesday, June 18, 13

    View Slide

  59. differences
    Tuesday, June 18, 13

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  65. mobify.com
    Tuesday, June 18, 13

    View Slide

  66. latency
    request
    bandwidth
    Tuesday, June 18, 13

    View Slide

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

    View Slide

  68. From Idle to Active
    cellular networks
    3G < 2.5 s
    4G < 100 ms
    Tuesday, June 18, 13

    View Slide

  69. Tuesday, June 18, 13

    View Slide

  70. 1- mobile & performance
    - Complex will change
    - not just websites
    - not just load time
    - cellular networks
    Tuesday, June 18, 13

    View Slide

  71. 2- measuring on mobile
    Tuesday, June 18, 13

    View Slide

  72. 2- measuring on mobile
    - the target
    - tools
    - HTML5 APIs
    Tuesday, June 18, 13

    View Slide

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

    View Slide

  74. simulators
    DEMO
    Tuesday, June 18, 13

    View Slide

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

    View Slide

  76. real device
    Open Device Lab
    Virtual Lab
    Your own Lab
    Tuesday, June 18, 13

    View Slide

  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

    View Slide

  78. Remote inspectors
    tools
    DEMO
    Tuesday, June 18, 13

    View Slide

  79. Proxies / Network sniffers
    • Charles Proxy
    • Fiddler
    • PCapPerf
    tools
    Tuesday, June 18, 13

    View Slide

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

    View Slide

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

    View Slide

  82. Navigation Timing API
    • Android 4.0+, Chrome, BB10, IE9+, Firefox
    • window.performance
    • Timestamps available
    html5 apis
    Tuesday, June 18, 13

    View Slide

  83. Navigation Timing API
    html5 apis
    DEMO
    Tuesday, June 18, 13

    View Slide

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

    View Slide

  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

    View Slide

  86. 2- measuring on mobile
    - measure on real devices only
    - tools: remote debuggers, proxies
    - HTML5 APIs
    Tuesday, June 18, 13

    View Slide

  87. 3- the worst
    Tuesday, June 18, 13

    View Slide

  88. 3- the worst
    - redirects
    - requests
    - design & usability
    - javascript
    - responsive web design?
    Tuesday, June 18, 13

    View Slide

  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

    View Slide

  90. Redirections
    the worst
    DEMO
    Tuesday, June 18, 13

    View Slide

  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

    View Slide

  92. Redirections
    • From 1 to 5s
    the worst
    Tuesday, June 18, 13

    View Slide

  93. the worst
    Tuesday, June 18, 13

    View Slide

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

    View Slide

  95. Requests
    • Best -> no requests
    • Remember latency and idle status
    • Keep them to the minimum, really!
    the worst
    Tuesday, June 18, 13

    View Slide

  96. Requests
    • Donate $50 per request
    the worst
    Tuesday, June 18, 13

    View Slide

  97. Usability and Design
    • Be mobile
    • Careful with blending
    • Test and measure
    • e designer is a better enemy
    the worst
    Tuesday, June 18, 13

    View Slide

  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

    View Slide

  99. Responsive Web Design
    the worst
    Tuesday, June 18, 13

    View Slide

  100. Responsive Web Design
    the worst
    Oh, do we need to talk about this?
    Tuesday, June 18, 13

    View Slide

  101. Responsive Web Design
    the worst
    DEMO
    Tuesday, June 18, 13

    View Slide

  102. Brad Frost
    "Your visitors don’t give a shit if your site is responsive."
    the worst
    Tuesday, June 18, 13

    View Slide

  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

    View Slide

  104. RWD
    the worst
    for mobile performance, the best is not always
    Tuesday, June 18, 13

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  108. 4- what to do always
    Tuesday, June 18, 13

    View Slide

  109. 4- what to do always
    - remembering last chapter
    - javascript frameworks
    - classic techniques
    - improve speed
    Tuesday, June 18, 13

    View Slide

  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

    View Slide

  111. JavaScript frameworks
    • do you need them?, really?
    • customize your build to your needs
    • use alternatives
    what to do always
    Tuesday, June 18, 13

    View Slide

  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

    View Slide

  113. Classic techniques
    • script at the bottom, or better:
    * async loading
    * use html5 new attributes
    what to do always
    HTML5
    Tuesday, June 18, 13

    View Slide

  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

    View Slide

  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

    View Slide

  116. Improve perception
    • mouse vs touch events
    • e 300ms delay
    • xed viewport?
    • FastClick solution
    what to do always
    Tuesday, June 18, 13

    View Slide

  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

    View Slide

  118. 5- what to do sometimes
    Tuesday, June 18, 13

    View Slide

  119. Most of the solutions and best
    practices are not for every kind of
    html5 project
    (
    )
    Tuesday, June 18, 13

    View Slide

  120. 5- what to do sometimes
    - improve the experience
    - server communication
    - javascript
    - media
    - responsive images
    Tuesday, June 18, 13

    View Slide

  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

    View Slide

  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

    View Slide

  123. Improve experience
    what to do sometimes
    Zombie tab for iOS
    DEMO
    Tuesday, June 18, 13

    View Slide

  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

    View Slide

  125. Network communication
    what to do sometimes
    Web Sockets
    • less overhead
    • bidirectional
    • use with care: battery, reliability
    Tuesday, June 18, 13

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  132. Network communication
    what to do sometimes
    HTTP 2.0
    • Near future
    • Today: SPDY; Chrome
    Tuesday, June 18, 13

    View Slide

  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

    View Slide

  134. JavaScript
    what to do sometimes
    • Geolocation cache
    navigator.geolocation
    .getCurrentPosition(cbOK, cbKO,
    { maximumAge: 60000 });
    JAVASCRIPT
    Tuesday, June 18, 13

    View Slide

  135. Media
    what to do sometimes
    • CSS Sprites vs. inline elements vs. JSON
    Resource library
    Tuesday, June 18, 13

    View Slide

  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

    View Slide

  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

    View Slide

  138. Media
    what to do sometimes
    • Progressive JPEGs
    • WebP
    • JPEG XR
    Alternative image formats
    Tuesday, June 18, 13

    View Slide

  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

    View Slide

  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

    View Slide

  141. Screen densities
    using vector images


    @font-face {}
    what to do sometimes
    Tuesday, June 18, 13

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  146. 5- what to do sometimes
    - improve the experience
    - server comunication
    - javascript
    - media
    - screen densities
    Tuesday, June 18, 13

    View Slide

  147. Picture from Simon Howden freedigitalphotos.net!
    uf! we've
    covered a lot!
    Tuesday, June 18, 13

    View Slide

  148. 1- Mobile & Performance
    2- Measuring
    3- e worst
    4- What to do... always
    5- What to do... sometimes
    Tuesday, June 18, 13

    View Slide

  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

    View Slide

  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

    View Slide