Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Http/2 - What's it all about?

3,902 views

Published on

Published in: Technology
  • Be the first to comment

Http/2 - What's it all about?

  1. 1. https://www.flickr.com/photos/expressmonorail/3910036864 HTTP/2 - What’s it all about? @AndyDavies #RevolutionConf, Sept 2014
  2. 2. https://www.flickr.com/photos/benjreay/14713228051 Heard of HTTP/2 or SPDY?
  3. 3. What’s our greatest enemy? https://www.flickr.com/photos/54459164@N00/5218183788
  4. 4. The browser that just won’t die?
  5. 5. The explosion in device diversity? http://opensignal.com/reports/2014/android-fragmentation/
  6. 6. … or maybe latency is our greatest enemy https://www.flickr.com/photos/jjvaca/728072059
  7. 7. Backbone Round Trip Times from London http://www.vectortemplates.com BT: http://ippm.bt.net/hour/europe/lo.shtml
  8. 8. Backbone Round Trip Times from London http://www.vectortemplates.com 81ms BT: http://ippm.bt.net/hour/europe/lo.shtml 201ms 156ms 266ms 232ms 28ms
  9. 9. There’s the last mile latency too (and routers, other networking kit, mobile latencies too) https://www.flickr.com/photos/kiwanja/3170292282
  10. 10. (TCP Segments) TCP and the Lower Bound of Web Performance! John Rauser Will probably need more than one round-trip 285kB 214kB 143kB 71kB 1 2 3 4 5 6 7 8 9 10 11 Round Trips Size initcwnd = 3! many sites use 10
  11. 11. Higher latency = slower load times Page Load Time (s) 4 3 2 1 0 20 40 60 80 100 120 140 160 180 200 220 240 Round Trip Time (ms) Mike Belshe - “More Bandwidth Doesn’t Matter (much)”
  12. 12. Headers are sent with every request Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/ webp,*/*;q=0.8 Accept-Encoding:gzip,deflate,sdch Accept-Language:en-US,en;q=0.8 Cache-Control:no-cache Cookie:NTABS=B5; BBC-UID= 75620c7ca040deb7c0d3275d81c51c2361684a959e281319b3b5da4dab5958880Mozi lla%2f5%2e0%20%28Macintosh%3b%20Intel%20Mac%20OS%20X %2010%5f9%5f1%29%20AppleWebKit%2f537%2e36%20%28KHTML%2c%20like%20Gecko %29%20Chrome%2f31%2e0%2e1650%2e63%20Safari%2f537%2e36; ckns_policy=111; BGUID=55b28cbc20d2e32f221f3ed0e1be9624c960f93b1e483329c3752a6d253efd40; s1=52CC023F3812005F; BBCCOMMENTSMODULESESSID=L-k22bbkde3jkqf928himljnlkl3; ckpf_ww_mobile_js=on; ckpf_mandolin= %22footer-promo%22%3A%7B%22segment%22%3Anull%2C%22end%22%3A %221392834182609%22%7D; _chartbeat2=ol0j0uq4hkq6pumu. 1389101635322.1392285654268.0111111111111111; _chartbeat_uuniq=1; ecos.dt=1392285758216 Host:www.bbc.co.uk Pragma:no-cache User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/ 537.36 (KHTML, like Gecko) Chrome/32.0.1700.107 Safari/537.36
  13. 13. Headers are sent with every request Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/ webp,*/*;q=0.8 Accept-Encoding:gzip,deflate,sdch Accept-Language:en-US,en;q=0.8 Cache-Control:no-cache Cookie:NTABS=B5; BBC-UID= And they contain lots 75620c7ca040deb7c0d3275d81c51c2361684a959e281319b3b5da4dab5958880Mozi of repeated data lla%2f5%2e0%20%28Macintosh%3b%20Intel%20Mac%20OS%20X %2010%5f9%5f1%29%20AppleWebKit%2f537%2e36%20%28KHTML%2c%20like%20Gecko %29%20Chrome%2f31%2e0%2e1650%2e63%20Safari%2f537%2e36; ckns_policy=111; BGUID=55b28cbc20d2e32f221f3ed0e1be9624c960f93b1e483329c3752a6d253efd40; s1=52CC023F3812005F; BBCCOMMENTSMODULESESSID=L-k22bbkde3jkqf928himljnlkl3; ckpf_ww_mobile_js=on; ckpf_mandolin= %22footer-promo%22%3A%7B%22segment%22%3Anull%2C%22end%22%3A %221392834182609%22%7D; _chartbeat2=ol0j0uq4hkq6pumu. 1389101635322.1392285654268.0111111111111111; _chartbeat_uuniq=1; ecos.dt=1392285758216 Host:www.bbc.co.uk Pragma:no-cache User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/ 537.36 (KHTML, like Gecko) Chrome/32.0.1700.107 Safari/537.36
  14. 14. HTTP could use TCP more efficiently http://www.flickr.com/photos/7671591@N08/1469828976
  15. 15. We’ve been hacking around the gaps https://www.flickr.com/photos/rocketnumber9/13695281
  16. 16. Browsers support more parallel connections Old browsers - 2 parallel connections Today’s browsers - 4 plus connections
  17. 17. We split resources across domains www.bbc.co.uk! static.bbci.co.uk! news.bbcimg.co.uk! node1.bbcimg.co.uk
  18. 18. We follow recipes e.g. Reduce Requests http://www.flickr.com/photos/mrsmagic/2247364228
  19. 19. DataURIs url(data:image/ png;base64,iVBORw0KGgoAA AANSUhEUgAAABkAAAAZCAMAA ADzN3VRAAAAGXRFWHRTb2Z0d 2FyZQBBZG9iZSBJbWFnZVJlY WR5ccllPAAAAAZQTFRF/ wAAAAAAQaMSAwAAABJJREFUe NpiYBgFo2AwAIAAAwACigABt nCV2AAAAABJRU5ErkJggg==) =
  20. 20. DataURIs Larger downloads (needs gzip)! Overrides browser priorities url(data:image/ png;base64,iVBORw0KGgoAA AANSUhEUgAAABkAAAAZCAMAA ADzN3VRAAAAGXRFWHRTb2Z0d 2FyZQBBZG9iZSBJbWFnZVJlY WR5ccllPAAAAAZQTFRF/ wAAAAAAQaMSAwAAABJJREFUe NpiYBgFo2AwAIAAAwACigABt nCV2AAAAABJRU5ErkJggg==) =
  21. 21. Create CSS and JavaScript bundles + + + + = =
  22. 22. Create CSS and JavaScript bundles + + + + = = More to download and parse
  23. 23. Create CSS and JavaScript bundles + + + + = = More to download and parse +! x ! Whole bundle is invalidated if a single file changes
  24. 24. CSS Sprites
  25. 25. CSS Sprites To get just one sprite …
  26. 26. CSS Sprites To get just one sprite … Browser must download and decode the whole image
  27. 27. There’s a tension between development and delivery https://www.flickr.com/photos/domiriel/7376397968
  28. 28. Build tools and optimisation services help plug gaps and won’t be going away…
  29. 29. But couldn’t we be more efficient? https://www.flickr.com/photos/belsymington/4102783610
  30. 30. HTTP/2 (Evolved from Google’s SPDY)
  31. 31. Single multiplexed connection to host HTTP/2 HTTP/1.1
  32. 32. Multiplexing offers interesting possibilities
  33. 33. How much of an image do we need to make it usable - 5%? Experiment by John Mellor at Google
  34. 34. How much of an image do we need to make it usable - 15%?
  35. 35. How much of an image do we need to make it usable - 25%?
  36. 36. How much of an image do we need to make it usable - 80%?
  37. 37. How much of an image do we need to make it usable - 80%? There are some questions over the user experience with progressive images
  38. 38. HTTP/1.1 - browser sets priorities
  39. 39. HTTP/2 - browser hints priorities server can override them
  40. 40. Adds header compression too
  41. 41. Google and Mozilla will only support over HTTPS http://www.flickr.com/photos/forsytht/4553656244
  42. 42. Browsers pull resources from the server but … https://www.flickr.com/photos/steveweaver/2915792034
  43. 43. What if the server could push them? https://www.flickr.com/photos/christian_bachellier/582457911
  44. 44. Loading a web page Browser Server Server builds page GET index.html <html><head>… Request other page resources
  45. 45. Loading a web page Browser Server Server builds page GET index.html <html><head>… Network Idle Request other page resources
  46. 46. Browser Server Server builds page GET index.html Push critical resource e.g. CSS <html><head>… Server Push Request other page resources
  47. 47. Browser Server Server builds page GET index.html Push critical resource e.g. CSS <html><head>… Request other page resources Server Push
  48. 48. Browser Server Server builds page GET index.html Push critical resource e.g. CSS <html><head>… Request other page resources Server Push Browser can reject push
  49. 49. Other opportunities for server push? HTML CSS DOM CSSOM Render! Tree JavaScript Layout Paint
  50. 50. Other opportunities for server push? HTML CSS DOM CSSOM Render! Tree Fonts and background images discovered when render tree builds JavaScript Layout Paint
  51. 51. Other opportunities for server push? HTML CSS DOM CSSOM Render! Tree Fonts and background images discovered when render tree builds JavaScript Layout Paint Could we push them?
  52. 52. http://www.flickr.com/photos/atoach/6014917153
  53. 53. Challenges We need to get better at HTTPS! Bulletproof SSL and TLS, Ivan Rustic! https://www.ssllabs.com/ssltest/! https://istlsfastyet.com/! ! Need support in mainstream servers! ! Differing optimisations for HTTP/1.1 and HTTP/2 (and indeed other contexts e.g. mobile)
  54. 54. HTTP/2 is coming! It uses the network more efficiently! Enables server to push resources! ! It will change the way build and deliver sites! ! Go Play!
  55. 55. http://http2.github.io/
  56. 56. http://www.flickr.com/photos/auntiep/5024494612 ! @andydavies! ! andy.davies@nccgroup.com ! ! http://slideshare.net/andydavies!

×