High Performance Mobile Web

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 20 SOFTWARE - INCREASING PARALLELISM 03
21. © 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
22. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 22 PARALLEL DOWNLOAD §  Flush <head/> early –  CSS in parallel –  CSS background images (sprites) in parallel
23. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 23 Questions….