The Case for HTTP/2
•
7 likes•2,968 views
Slides to accompany my introduction to HTTP/2 talk from Texas JavaScript 2015
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to The Case for HTTP/2
Similar to The Case for HTTP/2 (20)
More from Andy Davies
More from Andy Davies (17)
Recently uploaded
Recently uploaded (20)
The Case for HTTP/2
- 1. http://www.flickr.com/photos/arnybo/2679622216 The Case for HTTP/2 @AndyDavies #TXJS, July 2015
- 2. http://www.flickr.com/photos/7671591@N08/1469828976 HTTP/1.x doesn’t use the network efficiently
- 3. We’ve been hacking around some of the limitations https://www.flickr.com/photos/rocketnumber9/13695281
- 4. Each TCP connection only supports one request at a time* https://www.flickr.com/photos/39551170@N02/5621408218 *HTTP Pipelining is broken in practice
- 5. So browsers allowed us to make more requests in parallel Very Old browsers - 2 parallel connections Today’s browsers - 4 plus connections
- 6. To make even more parallel requests we split resources across hosts www.bbc.co.uk! static.bbci.co.uk! news.bbcimg.co.uk! node1.bbcimg.co.uk
- 7. Increasing the risk of network congestion and packet loss https://www.flickr.com/photos/dcmaster/4585119705
- 8. Every request has an overhead https://www.flickr.com/photos/tholub/9488778040
- 9. HTTP 1.x - Higher latency = slower load times PageLoadTime(s) 1 2 3 4 Round Trip Time (ms) 0 20 40 60 80 100 120 140 160 180 200 220 240 Mike Belshe - “More Bandwidth Doesn’t Matter (much)”
- 10. 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=75620c7ca040deb7c0d3275d81c51c2361684a959e281319b3b5da4dab5958880Mozilla %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 Headers sent with every request Contain lots of repeated data! and aren’t compressed
- 11. And small responses may not fill the TCP Congestion Window Could have sent more segments in this round-trip Small response
- 12. So we follow recipes e.g. Reduce Requests https://www.flickr.com/photos/nonny/116902484
- 13. Create CSS and JavaScript bundles ++++ = =
- 14. Create CSS and JavaScript bundles ++++ = =More to download and parse
- 15. Create CSS and JavaScript bundles ++++ = =More to download and parse x+! ! Whole bundle is invalidated if a single file changes
- 16. and mush images together as sprites
- 17. and mush images together as sprites To get just one sprite …
- 18. and mush images together as sprites Browser must download and decode the whole image To get just one sprite …
- 19. We override the browser’s priorities https://www.flickr.com/photos/skoupidiaris/5025176923
- 20. Embed binary* data using DataURIs url(data:image/ png;base64,iVBORw0KGgoAA AANSUhEUgAAABkAAAAZCAMAA ADzN3VRAAAAGXRFWHRTb2Z0d 2FyZQBBZG9iZSBJbWFnZVJlY WR5ccllPAAAAAZQTFRF/ wAAAAAAQaMSAwAAABJJREFUe NpiYBgFo2AwAIAAAwACigABt nCV2AAAAABJRU5ErkJggg==) = *dataURIs can be text too e.g. SVG
- 21. and inline ‘critical resources’ <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' typ <link rel="alternate" href="http://blog.yoav.ws/index.xml" type="application/rss+xml" title="Y <style> body { font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif; color: rgb(72, 7 img { max-width: 100%; } .li-page-header { color: rgb(255, 255, 255); padding: 16px 0px; background-color: #8a1e1b; .container { position: relative; width: 90vw; max-width: 760px; margin: 0px auto; padding: .clearfix:before, .clearfix:after, .row:before, .row:after { content: '0020'; display: bl .row:after, .clearfix:after { clear: both; } .row, .clearfix { zoom: 1; }
- 22. There’s a tension between development and delivery https://www.flickr.com/photos/domiriel/7376397968
- 23. Build tools and optimisation services help plug gaps and won’t be going away…
- 24. But what if we could use the network more efficiently? https://www.flickr.com/photos/belsymington/4102783610
- 25. HTTP/2
- 27. HTTP/1.1 HTTP/2 Impressive! But is it a real world test? https://http2.golang.org/gophertiles
- 28. • HTTP methods, status codes and semantics remain the same! • Binary headers! • Header compression! • Multiplexed! • Server can push resources HTTP/2
- 29. Each request becomes a stream
- 30. That’s multiplexed over a single TCP connection to host HTTP/1.1 HTTP/2
- 31. Streams are divided into frames … Stream 1 DATA Stream 2 HEADERS Stream 2 DATA Stream 1 DATA … Stream 4 DATA Client Server
- 32. and prioritised using Weights and Dependencies https://nghttp2.org/blog/2014/04/27/how-dependency-based-prioritization-works/ Weight: 200 id: 2 Weight: 100 id: 4 Weight: 1 id: 6 Weight: 100 id: 12 Weight: 100 id: 8 Weight: 100 id: 10
- 33. and prioritised using Weights and Dependencies https://nghttp2.org/blog/2014/04/27/how-dependency-based-prioritization-works/ Weight: 200 id: 2 Weight: 100 id: 4 Weight: 1 id: 6 Weight: 100 id: 12 Weight: 100 id: 8 Weight: 100 id: 10 2/3 1/3 Low priority
- 35. Does it make any difference? Host: Ireland, Test Agent: Singapore, Cable
- 36. Does it make any difference? Host: Ireland, Test Agent: Singapore, Cable
- 37. What about when server and client are close? Host: Ireland, Test Agent: Ireland, Cable
- 38. and evenly matched when server and client are close Host: Ireland, Test Agent: Ireland, Cable
- 39. and evenly matched when server and client are close Host: Ireland, Test Agent: Ireland, Cable
- 40. Opportunities for new kinds of optimisations https://www.flickr.com/photos/inucara/14981917985
- 41. Browser Server Server! builds! page GET index.html <html><head>… Network! Idle Request other page resources Server push
- 42. Browser Server Server! builds! page GET index.html <html><head>… Request other page resources Push critical resources e.g. CSS Server push
- 43. Browser Server Server! builds! page GET index.html <html><head>… Request other page resources Push critical resource e.g. CSS Server push
- 44. Browser Server Server! builds! page GET index.html <html><head>… Request other page resources Push critical resource e.g. CSS Browser can reject push! but ! may have already received data Server push
- 45. Many opportunities for server push HTML CSS DOM CSSOM Render! Tree Layout PaintJavaScript Fonts and background images discovered when render tree builds Could we push them?
- 46. Multiplexing offers interesting possibilities too
- 47. How much of an image do we need to make it usable - 5%? Experiment by John Mellor at Google
- 48. Parallel version looks usable with just 15% of bytes
- 49. And almost complete with 25% of the image bytes!
- 50. Sequential version needs 80% of bytes to match up…
- 51. There are some questions over the user experience with progressive images Sequential version needs 80% of bytes to match up…
- 52. When do we kill off some HTTP/1.1 optimisation techniques? http://www.flickr.com/photos/tonyjcase/7183556158
- 53. Browser support for HTTP/2 is relatively good 40 Edge 9b39 30a a. Opera Mini doesn’t support HTTP/2 b. Server-Push not supported in beta
- 54. Server Support https://github.com/http2/http2-spec/wiki/Implementations Server implementations are getting there
- 55. Choose your server carefully… Does it respect stream and connection flow?! Does it support dependencies and weights?! Does it support server-push?! ! How does it help optimisation?
- 56. No content until DNS, TCP and TLS negotiation complete Efficient TLS is Important Session Resumption, Certificate Stapling and improvements in TLS v1.3 all help
- 57. Efficient TLS is Important istlsfastyet.com www.ssllabs.com/ssltestBulletproof SSL and TLS Ivan Ristic