$30 off During Our Annual Pro Sale. View Details »

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
  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
  3. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 3

    WHY - WE SHOULD CARE ABOUT PERFORMANCE? 01
  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
  5. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 5

    NETWORK - REDUCING REQUESTS - REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY 02
  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
  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
  8. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 8

    COMBINE REQUESTS - INLINING §  Inlining –  dataURI for external resources –  Base64 larger by 8/6
  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  
  10. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 10

    NETWORK - REDUCING REQUESTS - REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY 02
  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
  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
  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
  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 <body/> –  Avoids reloading CSS, JS, background images §  Images –  Avoid animated gifs •  static image + JS
  15. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 15

    NETWORK - REDUCING REQUESTS - REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY 02
  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
  17. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 17

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

    DELAYING DOWNLOAD §  delay load with document.appendChild(node)
  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
  20. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 21

    PARALLEL SERVICE CALLS render view build model service & DB calls flush <head/> controller task executor view flush <body/> §  Parallelize service calls / DB queries §  Render view (and flush <head/>) in parallel
  21. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 22

    PARALLEL DOWNLOAD §  Flush <head/> early –  CSS in parallel –  CSS background images (sprites) in parallel