http/2 - what's it all about?
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!