High Performance Mobile Web

This talk explains best practices and techniques use to build high performance mobile sites. The talk covers a wide range of different topics centred on how to improve performance over the network and how to improve performance in the software (including both server side & client side).

Transcript

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

   View Slide

2. 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
   

   View Slide

3. 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.  
   

   View Slide

4. WHY
   WE SHOULD CARE ABOUT PERFORMANCE?
   01
   

   View Slide

5. +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
   

   View Slide

6. 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
   

   View Slide

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

   View Slide

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

   View Slide

9. 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  
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. 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  
    

    View Slide

14. 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  
    

    View Slide

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

    View Slide

16. 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  
    

    View Slide

17. 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  
    

    View Slide

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

    View Slide

19. 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  

    View Slide

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

    View Slide

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

    View Slide

22. PARALLELIZE DOWNLOADS
    •  async  or  defer  on  script  element  
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

28. 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  
    

    View Slide

29. 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  
    

    View Slide

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

    View Slide

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

    View Slide

32. PARALLEL DOWNLOAD
    •  Flush  

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

37. 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
    

    View Slide

38. 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  
    

    View Slide

39. 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.  
    

    View Slide