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

High Performance Mobile Web

High Performance Mobile Web

James D Bloom

July 15, 2013
Tweet

More Decks by James D Bloom

Other Decks in Technology

Transcript

  1. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 1
    High Performance Mobile Web
    James D Bloom
    http://blog.jamesdbloom.com

    View full-size slide

  2. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 2
    This talk….
    §  Why We Should Care About Performance?
    §  Network
    –  Reducing Requests
    –  Reducing Bytes
    –  Increasing Bandwidth Efficiency
    §  Software
    –  Increasing Parallelism

    View full-size slide

  3. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 3
    WHY
    - WE SHOULD CARE ABOUT PERFORMANCE?
    01

    View full-size slide

  4. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 4
    -2.2s
    +15% downloads
    Firefox
    0.4 -> 0.9s
    -25% searches
    Google
    -5s
    +12% revenue
    -50% hardware
    Shopzilla
    each -100ms
    +1% revenue
    Wallmart & Amazon
    Premature optimization is the root of all evil (or at least most of it) in programming.
    – Donald Knuth
    +1s
    -4% revenue
    Bing
    But…
    40% abandon
    if >3s

    View full-size slide

  5. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 5
    NETWORK
    - REDUCING REQUESTS
    - REDUCING BYTES
    - INCREASING BANDWIDTH EFFICIENCY
    02

    View full-size slide

  6. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 6
    CORELATION TO LOAD TIME
    Total
    Requests
    Image
    Requests
    Total Xfer
    Size
    Image Xfer
    Size
    Domains
    TOTAL REQUESTS 0.46
    IMAGE REQUESTS 0.44
    TOTAL XFER SIZE 0.40
    IMAGE XFER SIZE 0.37
    Reduce
    Requests
    DOMAINS 0.37
    http://mobile.httparchive.org/ Based on: Alexa Top 1,000,000 Sites

    View full-size slide

  7. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 7
    COMBINE REQUESTS - BUNDLING
    §  JavaScript Bundle
    –  Combine all files into single bundle
    §  CSS Bundle
    –  Combine all files into single bundle
    §  Image Sprite
    –  Combine all images into CSS Sprite

    View full-size slide

  8. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 8
    COMBINE REQUESTS - INLINING
    §  Inlining
    –  dataURI for external resources
    –  Base64 larger by 8/6

    View full-size slide

  9. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 9
    COMBINE REQUESTS - INLINING
    §  First  Load:  
    –  inline  resources  and  set  cookie  
    –  put  resources  in  localStorage  and  update  cookie  
    §  Subsequent  Load:  
    –  check  cookie  
    •  if  updated  
    –  load  resources  from  localStorage  (at  top  of  page)  
    •  if  ini>al  value  -­‐>  no  JavaScript  or  localStorage  
    –  return  with  resources  as  external  links  
    §  Bing  
    –  1st  request  54.9  KB  
    –  2nd  request  5.5  KB  

    View full-size slide

  10. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 10
    NETWORK
    - REDUCING REQUESTS
    - REDUCING BYTES
    - INCREASING BANDWIDTH EFFICIENCY
    02

    View full-size slide

  11. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 11
    RESPONSE SIZE (in kB)
    358
    112
    33 23
    10
    Images Scripts HTML Stylesheets Other
    IMAGES 67%
    SCRIPTS 21%
    HTML 6%
    STYLESHEETS 4%
    OTHER 2%
    Reduce
    Image Size
    http://mobile.httparchive.org/ Based on: Alexa Top 1,000,000 Sites

    View full-size slide

  12. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 12
    REDUCING BYTES – ADAPTIVE RESOURCES
    §  Adaptive Images
    –  UA sniffing or media queries
    –  Major breakpoints or server side scaling
    §  Adaptive JavaScript
    –  UA sniffing for device specific JS
    §  Adaptive CSS
    –  Media queries for device specific CSS

    View full-size slide

  13. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 13
    REDUCING BYTES - MINIFY
    §  Minify JS & CSS
    –  Typically during bundling
    §  Mini JS framework
    –  don’t send desktop JS to mobile

    View full-size slide

  14. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 14
    REDUCING BYTES
    §  Compression
    –  Use gzip for text resources
    –  Maximize lossless compression for images
    §  Reduce Upload
    –  Reduce / remove cookies
    –  Server-side cookie
    –  Cookie Free Domain
    •  static resources
    •  CDN
    §  HIJAX
    –  Highjack full page request
    –  AJAX to replace

    View full-size slide

  15. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 15
    NETWORK
    - REDUCING REQUESTS
    - REDUCING BYTES
    - INCREASING BANDWIDTH EFFICIENCY
    02

    View full-size slide

  16. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 16
    PARALLELIZE DOWNLOADS
    §  CSS at the top
    –  download background images
    –  avoid FOUC
    §  JS at the bottom
    –  avoid SPOF

    View full-size slide

  17. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 17
    PARALLELIZE DOWNLOADS
    §  Domain Sharding
    –  > 6 resources due to extra domain lookups

    View full-size slide

  18. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 18
    DELAYING DOWNLOAD
    §  delay load with document.appendChild(node)

    View full-size slide

  19. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 19
    EARLY DOWNLOAD
    §  Eager loading
    –  Load static pages eagerly
    –  Store in localStorage
    –  Uses spare bandwidth

    View full-size slide

  20. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 20
    SOFTWARE
    - INCREASING PARALLELISM
    03

    View full-size slide

  21. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 21
    PARALLEL SERVICE CALLS
    render view
    build model
    service & DB calls
    flush

    View full-size slide

  22. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 22
    PARALLEL DOWNLOAD
    §  Flush

    View full-size slide

  23. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 23
    Questions….

    View full-size slide