Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Case for HTTP/2 - Internetdagarna 2015 - Stockholm

2,019 views

Published on

HTTP/2 is here but why do we need it, how is it different to HTTP/1.1 and what does the mean for developers?

Slides from my talk at Internetdagarna 2015, Stockholm

Published in: Technology
  • Be the first to comment

The Case for HTTP/2 - Internetdagarna 2015 - Stockholm

  1. 1. http://www.flickr.com/photos/arnybo/2679622216 The Case for HTTP/2 @AndyDavies Internetdagarna, Nov 2015
  2. 2. 1999 RFC 2616 - HTTP/1.1
  3. 3. The Web of 1999…
  4. 4. …is not the Web of 2015
  5. 5. http://www.flickr.com/photos/7671591@N08/1469828976 HTTP/1.x doesn’t use the network efficiently
  6. 6. and we’ve been hacking around some of the limitations https://www.flickr.com/photos/rocketnumber9/13695281
  7. 7. Each TCP connection only supports one request at a time* https://www.flickr.com/photos/39551170@N02/5621408218 *HTTP Pipelining is broken in practice
  8. 8. So browsers allowed us to make more requests in parallel Very old browsers - 2 parallel connections Today’s browsers - 4 plus connections
  9. 9. 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
  10. 10. Increasing the risk of network congestion and packet loss https://www.flickr.com/photos/dcmaster/4585119705
  11. 11. Every request has an overhead https://www.flickr.com/photos/tholub/9488778040
  12. 12. 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)”
  13. 13. 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
  14. 14. And small responses may not fill the TCP Congestion Window Could have sent more segments in this round-trip Small response
  15. 15. So we follow recipes e.g. Reduce Requests https://www.flickr.com/photos/nonny/116902484
  16. 16. Create CSS and JavaScript bundles ++++ = =
  17. 17. Create CSS and JavaScript bundles ++++ = = x+ Whole bundle is invalidated if a single file changes More to download and parse
  18. 18. and mush images together as sprites
  19. 19. and mush images together as sprites Browser must download and decode the whole image To get just one sprite …
  20. 20. We override the browser’s priorities https://www.flickr.com/photos/skoupidiaris/5025176923
  21. 21. 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
  22. 22. 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; }
  23. 23. There’s a tension between development and delivery https://www.flickr.com/photos/domiriel/7376397968
  24. 24. Build tools and optimisation services help plug gaps and won’t be going away…
  25. 25. But what if we could use the network more efficiently? https://www.flickr.com/photos/belsymington/4102783610
  26. 26. HTTP/2
  27. 27. HTTP/1.1 HTTP/2 https://http2.golang.org/gophertiles
  28. 28. HTTP/1.1 HTTP/2 https://http2.golang.org/gophertiles
  29. 29. HTTP/1.1 HTTP/2 https://http2.golang.org/gophertiles Impressive! But is it a real world test?
  30. 30. • HTTP methods, status codes and semantics remain the same • Binary headers • Header compression • Multiplexed • Server can push resources HTTP/2
  31. 31. Each request becomes a stream
  32. 32. 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
  33. 33. Frames are multiplexed over a TCP connection … Stream 1 DATA Stream 2 HEADERS Stream 2 DATA Stream 1 DATA … Stream 4 DATA Client Server
  34. 34. TCP connection comparison HTTP/2 vs HTTP/1.1 HTTP/1.1 HTTP/2
  35. 35. 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
  36. 36. 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
  37. 37. What is the optimal order… Does it change as page loads? https://www.flickr.com/photos/add1sun/4993432274
  38. 38. Header compression https://http2.github.io/http2-spec/compression.html
  39. 39. Does it make any difference? Host: Ireland, Test Agent: Singapore, Cable
  40. 40. Does it make any difference? Host: Ireland, Test Agent: Singapore, Cable
  41. 41. Does it make any difference? Host: Ireland, Test Agent: Singapore, Cable
  42. 42. Does it make any difference? Host: Ireland, Test Agent: Singapore, Cable
  43. 43. What about when server and client are close? Host: Ireland, Test Agent: Ireland, Cable HTTP/1.1 HTTP/2
  44. 44. and evenly matched when server and client are close Host: Ireland, Test Agent: Ireland, Cable HTTP/1.1 HTTP/2
  45. 45. and evenly matched when server and client are close Host: Ireland, Test Agent: Ireland, Cable HTTP/1.1 HTTP/2
  46. 46. h2 capable h2 enabled h2 unsupported 7,200 ms 5,325 ms 6,160 ms Time to mobile load event Sample is 1 month of data on https://next.ft.com https://speakerdeck.com/surma/2-101
  47. 47. Opportunities for new kinds of optimisations https://www.flickr.com/photos/inucara/14981917985
  48. 48. Browser Server Server builds page GET index.html <html><head>… Network Idle Request other page resources Server push
  49. 49. Browser Server Server builds page GET index.html <html><head>… Request other page resources Push critical resources e.g. CSS Server push
  50. 50. Browser Server Server builds page GET index.html <html><head>… Request other page resources Push critical resources e.g. CSS Server push
  51. 51. Browser Server Server builds page GET index.html <html><head>… Request other page resources Push critical resources e.g. CSS Browser can reject push but may have already received data Server push
  52. 52. 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?
  53. 53. Multiplexing offers interesting possibilities too
  54. 54. How much of an image do we need to make it usable - 5%? Experiment by John Mellor at Google
  55. 55. Parallel version looks usable with just 15% of bytes
  56. 56. And almost complete with 25% of the image bytes!
  57. 57. There are some questions over the user experience with progressive images Sequential version needs 80% of bytes to match up…
  58. 58. When do we kill off some HTTP/1.1 optimisation techniques? http://www.flickr.com/photos/tonyjcase/7183556158
  59. 59. 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
  60. 60. Server Support https://github.com/http2/http2-spec/wiki/Implementations Server implementations are getting there
  61. 61. 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?
  62. 62. Implementations are still young… Resources pushed in reverse order (Fixed in h2o 1.5.3)
  63. 63. And sometimes browsers have unexpected behaviour… 1.6s 1.7s 1.8s 1.9s 2.0s 2.1s 1.6
  64. 64. with push without push
  65. 65. with push without push 300ms gap in waterfall
  66. 66. http://webpagetest.org Shows pushed resources in Firefox tests
  67. 67. chrome://net-internals
  68. 68. chrome://net-internals GET request
  69. 69. chrome://net-internals Received header frame
  70. 70. chrome://net-internals Received data frame
  71. 71. chrome://net-internals Server pushed resource
  72. 72. chrome://net-internals Pushed resource matched to page request
  73. 73. https://github.com/tatsuhiro-t/nghttp2
  74. 74. Check server conformance with h2spec https://github.com/summerwind/h2spec
  75. 75. Server Support https://github.com/bradfitz/http2/tree/master/h2i Missing telnet for debugging?
  76. 76. 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
  77. 77. Efficient TLS is Important istlsfastyet.com www.ssllabs.com/ssltestBulletproof SSL and TLS Ivan Ristic
  78. 78. Balancing HTTP/1.1 & HTTP/2 https://www.flickr.com/photos/kyletaylor/589628071
  79. 79. Some good practices remain constant across HTTP/1.1 and HTTP/2 Shrinking content - compression, minification, image optimisation Reducing re-redirects Effective caching Reducing latency e.g. using a CDN Reducing DNS lookups and TCP connections
  80. 80. Others need to vary to make the most of each Replace inlining with server push Reduce CSS/JS concatenation and image spriting Avoiding sharding
  81. 81. HTTP/2 combines connections for shards When: Refer to same IP address Use same certificate (wildcard, or SAN) (Can also check in Network Tab in Chrome DevTools)
  82. 82. HTTP/2 combines connections for shards When: Refer to same IP address Use same certificate (wildcard, or SAN) DNS lookup, but no new TCP connection or TLS negotiation (Can also check in Network Tab in Chrome DevTools)
  83. 83. Will the complexity be the end of hand crafted optimisations? http://www.flickr.com/photos/simeon_barkas/2557059247
  84. 84. Will automation be the only sane way to manage this? https://www.flickr.com/photos/skynoir/12342499794
  85. 85. https://www.flickr.com/photos/mariachily/3335708242 Still plenty of challenges…
  86. 86. Use of Third-Parties is still growing Requests by Domain Bytes by Domain
  87. 87. W3C Resource Hints should help <link rel="dns-prefetch" href=“//example.com”> <link rel="preconnect" href=“//example.com”> <link rel="preload" href=“//example.com/font.woff” as=“font”>
  88. 88. If you want to learn more… hpbn.co/http2 http://daniel.haxx.se/http2
  89. 89. Go explore! http://www.flickr.com/photos/atoach/6014917153
  90. 90. http://www.flickr.com/photos/auntiep/5024494612 @andydavies andy.davies@nccgroup.trust http://slideshare.net/andydavies

×