http/2 - what's it all about?

Download Http/2  - What's it all about?

If you can't read please download the document

Upload: andy-davies

Post on 28-Nov-2014

358 views

Category:

Technology


1 download

DESCRIPTION

 

TRANSCRIPT

  • 1. https://www.flickr.com/photos/expressmonorail/3910036864 HTTP/2 - Whats it all about? @AndyDavies #RevolutionConf, Sept 2014
  • 2. https://www.flickr.com/photos/benjreay/14713228051 Heard of HTTP/2 or SPDY?
  • 3. Whats our greatest enemy? https://www.flickr.com/photos/54459164@N00/5218183788
  • 4. The browser that just wont die?
  • 5. The explosion in device diversity? http://opensignal.com/reports/2014/android-fragmentation/
  • 6. or maybe latency is our greatest enemy https://www.flickr.com/photos/jjvaca/728072059
  • 7. Backbone Round Trip Times from London http://www.vectortemplates.com BT: http://ippm.bt.net/hour/europe/lo.shtml
  • 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. Theres the last mile latency too (and routers, other networking kit, mobile latencies too) https://www.flickr.com/photos/kiwanja/3170292282
  • 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. 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 Doesnt Matter (much)
  • 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. 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. HTTP could use TCP more efficiently http://www.flickr.com/photos/7671591@N08/1469828976
  • 15. Weve been hacking around the gaps https://www.flickr.com/photos/rocketnumber9/13695281
  • 16. Browsers support more parallel connections Old browsers - 2 parallel connections Todays browsers - 4 plus connections
  • 17. We split resources across domains www.bbc.co.uk! static.bbci.co.uk! news.bbcimg.co.uk! node1.bbcimg.co.uk
  • 18. We follow recipes e.g. Reduce Requests http://www.flickr.com/photos/mrsmagic/2247364228
  • 19. DataURIs url(data:image/ png;base64,iVBORw0KGgoAA AANSUhEUgAAABkAAAAZCAMAA ADzN3VRAAAAGXRFWHRTb2Z0d 2FyZQBBZG9iZSBJbWFnZVJlY WR5ccllPAAAAAZQTFRF/ wAAAAAAQaMSAwAAABJJREFUe NpiYBgFo2AwAIAAAwACigABt nCV2AAAAABJRU5ErkJggg==) =
  • 20. DataURIs Larger downloads (needs gzip)! Overrides browser priorities url(data:image/ png;base64,iVBORw0KGgoAA AANSUhEUgAAABkAAAAZCAMAA ADzN3VRAAAAGXRFWHRTb2Z0d 2FyZQBBZG9iZSBJbWFnZVJlY WR5ccllPAAAAAZQTFRF/ wAAAAAAQaMSAwAAABJJREFUe NpiYBgFo2AwAIAAAwACigABt nCV2AAAAABJRU5ErkJggg==) =
  • 21. Create CSS and JavaScript bundles + + + + = =
  • 22. Create CSS and JavaScript bundles + + + + = = More to download and parse
  • 23. Create CSS and JavaScript bundles + + + + = = More to download and parse +! x ! Whole bundle is invalidated if a single file changes
  • 24. CSS Sprites
  • 25. CSS Sprites To get just one sprite
  • 26. CSS Sprites To get just one sprite Browser must download and decode the whole image
  • 27. Theres a tension between development and delivery https://www.flickr.com/photos/domiriel/7376397968
  • 28. Build tools and optimisation services help plug gaps and wont be going away
  • 29. But couldnt we be more efficient? https://www.flickr.com/photos/belsymington/4102783610
  • 30. HTTP/2 (Evolved from Googles SPDY)
  • 31. Single multiplexed connection to host HTTP/2 HTTP/1.1
  • 32. Multiplexing offers interesting possibilities
  • 33. How much of an image do we need to make it usable - 5%? Experiment by John Mellor at Google
  • 34. How much of an image do we need to make it usable - 15%?
  • 35. How much of an image do we need to make it usable - 25%?
  • 36. How much of an image do we need to make it usable - 80%?
  • 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. HTTP/1.1 - browser sets priorities
  • 39. HTTP/2 - browser hints priorities server can override them
  • 40. Adds header compression too
  • 41. Google and Mozilla will only support over HTTPS http://www.flickr.com/photos/forsytht/4553656244
  • 42. Browsers pull resources from the server but https://www.flickr.com/photos/steveweaver/2915792034
  • 43. What if the server could push them? https://www.flickr.com/photos/christian_bachellier/582457911
  • 44. Loading a web page Browser Server Server builds page GET index.html Request other page resources
  • 45. Loading a web page Browser Server Server builds page GET index.html Network Idle Request other page resources
  • 46. Browser Server Server builds page GET index.html Push critical resource e.g. CSS Server Push Request other page resources
  • 47. Browser Server Server builds page GET index.html Push critical resource e.g. CSS Request other page resources Server Push
  • 48. Browser Server Server builds page GET index.html Push critical resource e.g. CSS Request other page resources Server Push Browser can reject push
  • 49. Other opportunities for server push? HTML CSS DOM CSSOM Render! Tree JavaScript Layout Paint
  • 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. 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. http://www.flickr.com/photos/atoach/6014917153
  • 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. 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. http://http2.github.io/
  • 56. http://www.flickr.com/photos/auntiep/5024494612 ! @andydavies! ! [email protected] ! ! http://slideshare.net/andydavies!