HTTP/2 and You

HTTP/2 and You

You may have missed it; the biggest update to the HTTP protocol in over 15 years was finalized this year. The long awaited HTTP/2 update is finally here and you can take advantage of it now, but what does this change mean for you, a builder of the web? In my talk, I will break down the important aspects of the new HTTP/2 protocol, how it differs from HTTP/1.1, and ways in which you can take advantage of the HTTP/2 performance improvements today. Whether you realize it or not, HTTP/2 will affect your life in the near future and I will help you understand what it all means.

980df66b142b2a067b3f8b67b04352de?s=128

Zack Tollman

July 18, 2015
Tweet

Transcript

  1. HTTP/2 and You Zack Tollman @tollmanz

  2. I am going to say latency a lot

  3. None
  4. Round Trip Time

  5. Increase Bandwidth

  6. None
  7. Reduce latency

  8. Bandwidth vs. Latency

  9. https://docs.google.com/a/chromium.org/viewer?a=v&pid=sites&srcid=Y2hyb21pdW0ub3JnfGRldnxneDoxMzcyOWI1N2I4YzI3NzE2

  10. https://docs.google.com/a/chromium.org/viewer?a=v&pid=sites&srcid=Y2hyb21pdW0ub3JnfGRldnxneDoxMzcyOWI1N2I4YzI3NzE2

  11. “However, decreasing RTT, regardless of current bandwidth always helps make

    web browsing faster.” — Mike Belshe https://docs.google.com/a/chromium.org/viewer? a=v&pid=sites&srcid=Y2hyb21pdW0ub3JnfGRldnxneDoxMzcyOWI1N2I4YzI3NzE2
  12. TCP Connection

  13. TCP Connection SYN

  14. TCP Connection SYN SYN ACK

  15. TCP Connection SYN SYN ACK ACK

  16. TCP Connection SYN SYN ACK ACK 50ms

  17. TCP Connection SYN SYN ACK ACK 50ms 50ms

  18. TCP Connection SYN SYN ACK ACK 50ms 50ms 50ms

  19. TCP Connection SYN SYN ACK ACK 50ms 50ms 50ms 150ms

  20. TCP Connection SYN SYN ACK ACK 50ms 50ms 50ms HTTP

  21. HTTPS / TLS

  22. HTTPS / TLS SYN ACK SYN

  23. HTTPS / TLS SYN ACK SYN ACK / HELLO HELLO

  24. HTTPS / TLS SYN ACK SYN ACK / HELLO FINISHED

    HELLO FINISHED
  25. HTTPS / TLS SYN ACK SYN ACK / HELLO FINISHED

    HELLO FINISHED HTTP
  26. HTTPS / TLS SYN ACK SYN ACK / HELLO FINISHED

    HELLO FINISHED HTTP 1 2 3
  27. HTTPS / TLS SYN ACK SYN ACK / HELLO FINISHED

    HELLO FINISHED HTTP 1 2 3 100ms 100ms 100ms
  28. Connections are costly

  29. That’s just a single TCP connection

  30. Six connections per domain

  31. 284 assets 2000 ms start render 101 connections 8418 ms

    latency
  32. “To speed up the Internet at large, we should look

    for more ways to bring down RTT.” — Mike Belshe https://docs.google.com/a/chromium.org/viewer? a=v&pid=sites&srcid=Y2hyb21pdW0ub3JnfGRldnxneDoxMzcyOWI1N2I4YzI3NzE2
  33. Latency problems in HTTP/1.1 are critical flaws

  34. Serialization: a single asset at a time

  35. TCP Connection html html style.css style.css

  36. One request, one response

  37. TCP Connection html html style.css style.css

  38. Developers are clever

  39. Reduce requests with bundling

  40. JS/CSS concatenation

  41. Image sprites

  42. Bypass 6 connections limit per domain

  43. images1.cdn.com images2.cdn.com images3.cdn.com Domain sharding

  44. Optimize critical rendering path

  45. Inline CSS, images, JS

  46. “Best Practices”

  47. Clever Hacks

  48. None
  49. HTTP/2 reduces latency by fixing the problems

  50. SPDY

  51. Multiplexing: one connection per domain

  52. No more bundling

  53. No more sharding

  54. Single domain

  55. Server push: one request, many responses

  56. TCP Connection html html style.css style.css

  57. TCP Connection html html style.css

  58. No more inlining

  59. Prioritization

  60. Important assets received first

  61. HTTPS is required… kinda

  62. “HTTP/2 is (or will be soon) supported by all of

    the ‘major’ browsers, and if you want them to use it with your Web site, you’ll need to have HTTPS URLs” — Mark Nottingham https://www.mnot.net/blog/2015/06/15/http2_implementation_status
  63. Gophertiles https://http2.golang.org/gophertiles

  64. HTTP/1.1

  65. HTTP/2

  66. 12s

  67. 1.7s

  68. HTTP/2 is available… today!

  69. Firefox 36 Chrome 41 (iOS too!) Opera 28 IE 11

    (Windows 10) Edge Safari 8.1 (iOS 9/OSX 10.10)
  70. Apache: mod_h2 Nginx: Q4

  71. Nghttp2 https://nghttp2.org https://www.tollmanz.com/http2-nghttp2-nginx-tls/ h2o https://calomel.org/h2o.html

  72. tollmanz.com/wcbos2015 @tollmanz