Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

© 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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

© 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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

© 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

Slide 7

Slide 7 text

© 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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

© 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  

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

© 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

Slide 12

Slide 12 text

© 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

Slide 13

Slide 13 text

© 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

Slide 14

Slide 14 text

© 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 –  Avoids reloading CSS, JS, background images §  Images –  Avoid animated gifs •  static image + JS

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

© 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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 22 PARALLEL DOWNLOAD §  Flush early –  CSS in parallel –  CSS background images (sprites) in parallel

Slide 23

Slide 23 text

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