The Case for HTTP/2 - EpicFEL Sept 2015
•
3 likes•1,953 views
HTTP/2 is here but why do we need it, and how is it different to HTTP/1.1? Video - https://www.youtube.com/watch?v=ob-CnA9YmiI These are the slides from my talk at Front-End London's one day conference, EpicFEL
Recommended
More Related Content
What's hot
What's hot (20)
Similar to The Case for HTTP/2 - EpicFEL Sept 2015
Similar to The Case for HTTP/2 - EpicFEL Sept 2015 (20)
More from Andy Davies
More from Andy Davies (15)
Recently uploaded
Recently uploaded (20)
The Case for HTTP/2 - EpicFEL Sept 2015
- 1. http://www.flickr.com/photos/arnybo/2679622216 The Case for HTTP/2 @AndyDavies EpicFEL, September 2015
- 2. 1999 RFC 2616 - HTTP/1.1
- 3. The Web of 1999…
- 4. …is not the Web of 2015
- 5. …is not the Web of 2015
- 6. http://www.flickr.com/photos/7671591@N08/1469828976 HTTP/1.x doesn’t use the network efficiently
- 7. and we’ve been hacking around some of the limitations https://www.flickr.com/photos/rocketnumber9/13695281
- 8. Each TCP connection only supports one request at a time* https://www.flickr.com/photos/39551170@N02/5621408218 *HTTP Pipelining is broken in practice
- 9. So browsers allowed us to make more requests in parallel Very Old browsers - 2 parallel connections Today’s browsers - 4 plus connections
- 10. 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
- 11. Increasing the risk of network congestion and packet loss https://www.flickr.com/photos/dcmaster/4585119705
- 12. Every request has an overhead https://www.flickr.com/photos/tholub/9488778040
- 13. 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)”
- 14. 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
- 15. And small responses may not fill the TCP Congestion Window Could have sent more segments in this round-trip Small response
- 16. So we follow recipes e.g. Reduce Requests https://www.flickr.com/photos/nonny/116902484
- 17. Create CSS and JavaScript bundles ++++ = =More to download and parse x+ Whole bundle is invalidated if a single file changes
- 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
- 28. HTTP/1.1 HTTP/2 Impressive! But is it a real world test? https://http2.golang.org/gophertiles
- 29. • HTTP methods, status codes and semantics remain the same • Binary headers • Header compression • Multiplexed • Server can push resources HTTP/2
- 30. Each request becomes a stream
- 31. DATA frame HEADERS frame HTTP/1.1 200 OK Date: Mon, 07 Sep 2015 17:39:33 GMT Expires: -1 Cache-Control: private, max-age=0 Content-Type: text/html; charset=UTF-8 Content-Encoding: gzip X-XSS-Protection: 1; mode=block X-Frame-Options: SAMEORIGIN Transfer-Encoding: chunked <!doctype html> <html> <head> <meta charset="utf-8"> <title>This is my title<title> <link rel="stylesheet" href="styles.css" type="text/css" /> HTTP/2HTTP/1.1 Streams are divided into frames } } DATA frame DATA frame
- 32. Frames are multiplexed over a TCP connection … Stream 1 DATA Stream 2 HEADERS Stream 2 DATA Stream 1 DATA … Stream 4 DATA Client Server
- 33. TCP connection comparison HTTP/2 vs HTTP/1.1 HTTP/1.1 HTTP/2
- 34. 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
- 36. Does it make any difference? Host: Ireland, Test Agent: Singapore, Cable
- 37. Does it make any difference? Host: Ireland, Test Agent: Singapore, Cable
- 38. Does it make any difference? Host: Ireland, Test Agent: Singapore, Cable
- 39. What about when server and client are close? Host: Ireland, Test Agent: Ireland, Cable HTTP/1.1 HTTP/2
- 40. and evenly matched when server and client are close Host: Ireland, Test Agent: Ireland, Cable HTTP/1.1 HTTP/2
- 41. and evenly matched when server and client are close Host: Ireland, Test Agent: Ireland, Cable HTTP/1.1 HTTP/2
- 42. Opportunities for new kinds of optimisations https://www.flickr.com/photos/inucara/14981917985
- 43. Browser Server Server builds page GET index.html <html><head>… Network Idle Request other page resources Server push
- 44. Browser Server Server builds page GET index.html <html><head>… Request other page resources Push critical resources e.g. CSS Server push
- 45. 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
- 46. 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?
- 47. Multiplexing offers interesting possibilities too
- 48. How much of an image do we need to make it usable - 5%? Experiment by John Mellor at Google
- 49. Parallel version looks usable with just 15% of bytes
- 50. And almost complete with 25% of the image bytes!
- 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 yet
- 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