SPDY and HTTP2

Transcript

1. HTTP/2.0   [SPeeDY]   Andreas Bjärlestam (@bjarlestam)! 2013-03-15!
2. Something  strange  happened  last  year  
3. You  know  HTTP?  
4. It  has  been  replaced!*   *at  several  of  the  biggest  sites  on  the  web  
5. And  no-­‐one  has  noJced  
6. Why  the  hell  would  you  want  to   replace  HTTP?  
7. HTTP  is  fantasJc   it  has  totally  changed  the  world  
8. but…  
9. HTTP  is  over  20  years  old   HTTP  1.1  is  12  years  old  
10. Webpages  in  1999  
12. Webpages  in  2013  
14. Mobile    internet  usage   source:  svenskarna  och  internet  2012  hRps://www.iis.se/docs/SOI2012.pdf  
15. This  is  how  more  and  more  of  us   consume  the  web…  
16. OTen  it  feels  a  lot  like…  
17. People  no  longer  have  paJence  to   wait  for  slow  pages  
18. $peed   Performance  ==  $$  
19. Being  slow  has  a  strong  negaJve   impact  on  business   The  cost  of  being  slow  increases  over   Jme  and  persists  
20. Myth:  If  your  site  loads  in  under  4   seconds  you  are  ok   Actually:  The  negaJve  impact  of  being   slow  increases  linearly!  
21. Bounce  rate  increases  linearly  with   page  load  Jme   Search  engines  rank  faster  sites  higher  
22. Bandwidth  doesn’t  maRer  much   anymore   Latency  does  
23. Bandwidth   Page  Load  Time   1Mbps   3Mbps   9Mbps   Latency   Page  Load  Time   240ms   120ms   20ms  
24. Web  pages  March  2013   •  www.facebook.com  -­‐  ca  170  hRp  requests   •  www.bostonglobe.com  -­‐  ca  150  hRp  requests   •  www.svtplay.se  -­‐  ca  50  hRp  requests   •  www.aTonbladet.se  -­‐  ca  450  hRp  requests   source:  hRp://hRparchive.org/    
25. What  does  it  look  like  over  the   network  fetching  150  resources?  
27. Can  you  spot  the  problem?  
28. Its  all  synchronous  
29. How  come  an  advanced  page  like   facebook.com  loads  in  under  4   seconds  when  its  all  synchronous?  
30. Hacky  opJmizaJons   CSS  sprites   base64  images  in  data-­‐urls   CSS  concatenaJon   JavaScript  concatenaJon  
31. HTTP/TCP   HTTP/TCP   HTTP/TCP   HTTP/TCP   HTTP/TCP   HTTP/TCP   6  x  HTTP  connecJons  
32. Domain  sharding   •  www.bostonglobe.com  -­‐  25  domains   •  www.svtplay.se  -­‐  9  domains   •  www.aTonbladet.se  -­‐  42  domains   source:    hRp://www.webpagetest.org  
33. What  is  the  problem  with  this?  Why   not  even  more  connecJons?  
34. We  kind  of  abuse  TCP   when  we  open  more   connecJons  
35. 2  connecJons  per  host  recommended   by  HTTP  1.1  spec   6  connecJons  in  most  browsers    
36. and…  
37. New  TCP  connecJons  are  slow  
38. 3  way  handshake  
39. On  my  macbook   Ping  20ms  ≈  30ms  to  set  up  a   connecJon   On  my  mobile  (3G)   Ping  300ms  ≈  450ms  to  set  up  a   connecJon  
40. HTTP/TCP   HTTP/TCP   HTTP/TCP   HTTP/TCP   HTTP/TCP   TCP  Slow  start   HTTP/TCP  
41. Window  size   1  2  3  4  5  6  7  8  roundtrips   TCP  Slow  start   Packet  loss  
42. So…  we  need  to  uJlize  our  TCP   connecJons  beRer  
43. Enter  
44. Don’t  we  break  the  web  if  we  replace   HTTP?  
45. Nope  
46. The  semanJcs  of  HTTP  is  kept  
47. HTTP  -­‐>  SPDY   GET   PUT   POST   …   HEADERS   Use  of  URLs   Use  of  TCP   GET   PUT   POST   …   HEADERS   Use  of  URLs   Use  of  TCP  
48. You  can  switch  to  SPDY  with  no   changes  to  your  web  applicaJon  
49. Example…  
50. Designed  with   speed  as   primary  goal  
51. 1  TCP  connecJon   HTTP/TCP  
52. HTTP/TCP   But  it  will  be  on  fire!  
53. SPDY  is  mulJplexed  
54. This  is  a  typical  HTTP  session   GET   GET   GET   200  OK   200  OK   200  OK  
55. MulJplexing   GET  1   GET  2   GET  3   200  OK  2   200  OK  3   200  OK  1  
56. Stream  prioriJes  
57. SPDY  is  binary  
58. HTTP  -­‐>  SPDY  
59. Will  be  difficult  to  just  fire  up  telnet   and  hack  away  
60. Every  decent  site  will  be  encrypted   and  gzipped    anyways  
61. curl  and  wireshark  will  sJll  be  your   friend  
62. TLS/SSL  is  mandatory   ✗  
63. Simplest  way  to  avoid   problems  with  intermediaries  
64. Headers  are  compressed  
65. Server  Push  
66. Server  Push  
67. So  is  it  worth  it?  
68. Many  studies  with  slightly  different   results   Most  of  them  indicate  a  significant   speedup  (10%  –  60%)   hRps://code.google.com/p/mod-­‐spdy  
69. SPDY  could  make  your  life  easier   No  more  hacky  opJmizaJons  like   CSS  sprites,  file  concatenaJons,   domain  sharding  etc  
70. We  need  to  unlearn  some  habits   unshard  
71. ImplementaJons   •  Apache  mod_spdy   •  Nginx   •  node_spdy   •  NeRy   •  JeRy   •  HAProxy   •  more…  
72. Browsers   •  Chrome  6+   •  Firefox  13+   •  Opera  12.10+   •  Amazon  silk   >  50%  of  browsers   support  SPDY  
73. Google   •  Support  SPDY  on  all  their  services  (gmail  etc)   •  Most  of  their  SSL  traffic  is  over  SPDY  
74. Others   •  Akamai  (Contendo)   •  Strangeloop   •  F5  BIG-­‐IP   •  TwiRer   •  Facebook   •  Wordpress   •  Amazon  (kindle  fire  silkbrowser)  
75. Amazon  silk   Silk   Browser   SPDY   Gateway   The   Internet   SPDY   HTTP   Google  has  introduced  a  similar  thing   in  chrome  for  android  (beta  version)  
76. The  spec   •  DraT  spec,  version  4   •  IETF  has  started  to  work  on  HTTP/2.0   •  SPDY  has  been  agreed  to  be  the  starJng  point   for  HTTP/2.0  
77. Roundup   •  Faster  page  loads  than  HTTP   •  Backwards  compaJble  with  HTTP   •  BeRer  uJlizaJon  of  TCP   •  Secured  by  default   •  Binary  +  compressed  
78. ARribuJons   •  hRp://en.wikipedia.org/wiki/ File:US_RoboJcs_56K_Modem_Front.JPG   •  hRps://www.iis.se/docs/SOI2012.pdf   •  hRp://www.flickr.com/photos/howi/6366423373/   •  hRp://www.flickr.com/photos/wwarby/5110037138/   •  hRp://www.flickr.com/photos/alicetragedy/ 4977295298/   •  hRp://www.flickr.com/photos/koltregaskes/ 624914973/in/photostream/  
79. Backup  slides  
80. HTTP  Pipelining   •  Not  as  effecJve  as  mulJplexing   •  Hard  to  implement  in  browser   •  Opera  is  the  only  desktop  browser  that  has  a   full  implementaJon  enabled  by  default   •  Android,  IOS5  and  Opera  mobile  browsers  do   some  amount  of  pipelining   •  Not  used  by  most  proxies  
81. Pipelining   GET  1   GET  2   GET  3   200  OK  1   200  OK  2   200  OK  3   GET  1   GET  2   GET  3   200  OK  2   200  OK  3   200  OK  1   MulJplexing   GET   GET   GET   200  OK   200  OK   200  OK   Synchronous