The Case for HTTP/2
7 likes2,983 views
HTTP/2 addresses limitations in HTTP/1.x by multiplexing requests over a single TCP connection, compressing headers, and allowing servers to push responses. It leads to more efficient use of network resources and faster page loads. While browser support is good, server implementations are still maturing and need to fully support HTTP/2 features like streams, dependencies, and server push to provide optimizations. Efficient TLS is also important to avoid delays in taking advantage of HTTP/2 performance benefits.
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