Slide 1

Slide 1 text

High Performance Mobile Web James D Bloom http://blog.jamesdbloom.com

Slide 2

Slide 2 text

Technical  lead  of  mobile  web  at  Be2air     Focusing  on:    -­‐  High  Performance    -­‐  Reliability    -­‐  Wide  Device  Support    -­‐  Keeping  it  Simple    -­‐  Automated  TesEng   Mobile Web Expert ABOUT ME JAMES D BLOOM

Slide 3

Slide 3 text

This talk…. 1.   Why  We  Should  Care  About  Performance?   SoHware   More  Parallelism   Faster  Page  Rendering   Faster  Page  InteracEon   3.   Network   Reducing  Requests   Reducing  Bytes   Increasing  Bandwidth  Efficiency   Reducing  Latency   2.  

Slide 4

Slide 4 text

WHY WE SHOULD CARE ABOUT PERFORMANCE? 01

Slide 5

Slide 5 text

+1s -4% revenue Bing WHY CARE? -2.2s +15% downloads Firefox 0.4 -> 0.9s -25% searches Google -5s +12% revenue -50% hardware Shopzilla each -100ms +1% revenue Wallmart & Amazon

Slide 6

Slide 6 text

h"p://www.keynote.com/keynote_compe11ve_research/performance_indices/mobile/retail-­‐world   5.41   6.03   7.65   7.85   8.64   9.21   10.36   11.43   12.49   15.86   27.16   44.67   51.38   0   10   20   30   40   50   60   LOAD TIME (in seconds) 47% expect <2s 40% abandon if >3s

Slide 7

Slide 7 text

NETWORK - REDUCING REQUESTS - REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY - REDUCING LATENCY 02

Slide 8

Slide 8 text

NETWORK - REDUCING REQUESTS - REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY - REDUCING LATENCY 02

Slide 9

Slide 9 text

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 h"p://mobile.h"parchive.org/   Based  on:  Alexa  Top  1,000,000  Sites  

Slide 10

Slide 10 text

COMBINE REQUESTS - BUNDLING •  JavaScript  Bundle   –  Combine  all  files  into  single  bundle   •  CSS  Bundle   –  Combine  all  files  into  single  bundle    

Slide 11

Slide 11 text

COMBINE REQUESTS - SPRITES •  Image  Sprite   –  Combine  all  images  into  CSS  Sprite  

Slide 12

Slide 12 text

COMBINE REQUESTS - INLINING •  Inlining   –  dataURI  for  external  resources   –  Base64  larger  by  8/6  

Slide 13

Slide 13 text

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  iniEal  value  -­‐>  no  JavaScript  or  localStorage   –  return  with  resources  as  external  links   •  Bing   –  1st  request  54.9  KB   –  2nd  request  5.5  KB  

Slide 14

Slide 14 text

AVOID REQUESTS •  Avoid  redirects  –  71%  of  mobile  sites  have  3xx   –  or  at  least  cache  them   •  Images   –  CSS3   •  gradient,  rounded  corners,  drop  shadow,  text  shadow   –  Avoid  animated  gifs   •  staEc  image  +  JS   •  Load  (and  eval)  on  demand   –  Images  -­‐>  google  image  search   –  JS  -­‐>  gmail  

Slide 15

Slide 15 text

NETWORK - REDUCING REQUESTS - REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY - REDUCING LATENCY 02

Slide 16

Slide 16 text

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 h"p://mobile.h"parchive.org/   Based  on:  Alexa  Top  1,000,000  Sites  

Slide 17

Slide 17 text

REDUCING BYTES – ADAPTIVE RESOURCES •  AdapEve  Images   –  UA  sniffing  or  media  queries   –  Major  breakpoints  or  server  side  scaling   •  AdapEve  JavaScript   –  UA  sniffing  for  device  specific  JS   •  AdapEve  CSS   –  Media  queries  for  device  specific  CSS  

Slide 18

Slide 18 text

REDUCING BYTES - MINIFY •  Minify  JS  &  CSS   –  Typically  during  bundling   •  Mini  JS  framework   –  don’t  send  desktop  JS  to  mobile  

Slide 19

Slide 19 text

REDUCING BYTES •  Compression   –  Use  gzip  for  text  resources   –  Maximize  lossless  compression  for  images   •  Reduce  Upload   –  Reduce  /  remove  cookies   –  Server-­‐side  cookie   –  Cookie  Free  Domain   •  staEc  resources   •  CDN   •  HIJAX   –  Highjack  full  page  request   –  AJAX  to  replace  

Slide 20

Slide 20 text

NETWORK - REDUCING REQUESTS - REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY - REDUCING LATENCY 02

Slide 21

Slide 21 text

PARALLELIZE DOWNLOADS •  CSS  at  the  top   –  download  background  images   –  avoid  FOUC   •  JS  at  the  booom   –  avoid  SPOF  

Slide 22

Slide 22 text

PARALLELIZE DOWNLOADS •  async  or  defer  on  script  element  

Slide 23

Slide 23 text

PARALLELIZE DOWNLOADS •  Domain  Sharding   –  >  6  resources  due  to  extra  domain  lookups  

Slide 24

Slide 24 text

DELAYING DOWNLOAD •  delay  load  with  document.appendChild(node)  

Slide 25

Slide 25 text

DELAYING DOWNLOAD •  delay  load  with  document.appendChild(node)  

Slide 26

Slide 26 text

EARLY DOWNLOAD •  Eager  loading   –  Load  staEc  pages  eagerly   –  Store  in  localStorage   –  Uses  spare  bandwidth  

Slide 27

Slide 27 text

NETWORK - REDUCING REQUESTS - REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY - REDUCING LATENCY 02

Slide 28

Slide 28 text

CACHING •  Caching   –  Caching  headers   •  Cache-­‐Control,  Expires,  Vary,  Last-­‐Modified,  ETag   –  Finger  print   •  >  1y  cache   •  JS,  CSS  and  images   •  i.e.  build  2932  -­‐>  all_2932_.css   –  Make  pages  cacheable   •  Avoid  cookies  &  headers   •  Use  path  variables   •  Separate  out  variable  content   –  iframe     –  AJAX   –  How  variable  is  content?     •  Always  consider  >  1s  cache  

Slide 29

Slide 29 text

CACHING •  Types  of  Cache   –  Content  Delivery  Network  /  Edge  Cache   •  JS,  CSS  and  images   –  Reverse  Proxies   –  Browser  Cache   •  Limited  space,  regularly  fully  cycled   –  More  control  but  harder  to  use   •  ApplicaEon  Cache   •  Local  Storage   •  WebSQL  /  IndexedDB  

Slide 30

Slide 30 text

SOFTWARE - MORE PARALLELISM - FASTER PAGE RENDERING - FASTER INTERACTION 03

Slide 31

Slide 31 text

SOFTWARE - MORE PARALLELISM - FASTER PAGE RENDERING - FASTER INTERACTION 03

Slide 32

Slide 32 text

PARALLEL DOWNLOAD •  Flush  

Slide 33

Slide 33 text

PARALLEL SERVICE CALLS render view build model service & DB calls flush

Slide 34

Slide 34 text

SOFTWARE - MORE PARALLELISM - FASTER PAGE RENDERING - FASTER INTERACTION 03

Slide 35

Slide 35 text

FASTER PAGE RENDERING •  Simple  DOM   •  Efficient  CSS  selectors   –  avoid  generic  matches  on  right  side:   –  use  ids  or  specific  classes:   •  Minimize  reflows   –  CSS  in  

Slide 36

Slide 36 text

SOFTWARE - MORE PARALLELISM - FASTER PAGE RENDERING - FASTER INTERACTION 03

Slide 37

Slide 37 text

FASTER PAGE INTERACTION •  Avoid  blocking  UI  Thread   –  Split  tasks   •  Use  events   •  setTimeout   –  Web  Workers     •  data  only     •  no  UI  interacEon   execuEon   button 1 clicked button 1 onclick button 1 UI depressed button 1 UI unpressed button 2 onclick button 2 UI depressed button 2 UI unpressed button 2 clicked UI Thread UI Queue

Slide 38

Slide 38 text

FASTER PAGE INTERACTION •  SyntheEc  events   –  Touch  300ms  delay   •  Timers   –  Lots  >1s   –  Few  <500ms   –  Use  single  global  repeaEng  Emer  for  mulEple  tasks   •  Pre-­‐execute   –  Use  middle  Eer  as  much  as  possible  

Slide 39

Slide 39 text

This talk…. 1.   Why  We  Should  Care  About  Performance?   SoHware   More  Parallelism   Faster  Page  Rendering   Faster  Page  InteracEon   3.   Network   Reducing  Requests   Reducing  Bytes   Increasing  Bandwidth  Efficiency   Reducing  Latency   2.