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

October 02, 2015
Tweet

Transcript

  1. HTTP/2 and You Zack Tollman @tollmanz

  2. Latency is the enemy

  3. None
  4. Round Trip Time

  5. Reduce latency

  6. Bandwidth vs. Latency

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

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

  9. “…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
  10. TCP Connection

  11. TCP Connection SYN

  12. TCP Connection SYN SYN ACK

  13. TCP Connection SYN SYN ACK ACK

  14. TCP Connection SYN SYN ACK ACK 50ms

  15. TCP Connection SYN SYN ACK ACK 50ms 50ms

  16. TCP Connection SYN SYN ACK ACK 50ms 50ms 50ms

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

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

  19. HTTPS / TLS

  20. HTTPS / TLS SYN ACK SYN

  21. HTTPS / TLS SYN ACK SYN ACK / HELLO HELLO

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

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

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

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

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

  27. That’s just a single TCP connection

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

    latency
  29. “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
  30. Latency problems in HTTP/1.1 are critical flaws

  31. Serialization: a single asset at a time

  32. TCP Connection html html style.css style.css

  33. One request, one response

  34. Developers are clever

  35. Reduce requests with bundling

  36. JS/CSS concatenation

  37. Image sprites

  38. Bypass 6 connections limit per domain

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

  40. Optimize critical rendering path

  41. Inline CSS, images, JS

  42. “Best Practices”

  43. Clever Hacks

  44. None
  45. HTTP/2 reduces latency by fixing the flaws

  46. SPDY

  47. HTTP/2

  48. Multiplexing: one connection per domain

  49. No more bundling

  50. No more sharding

  51. Single domain

  52. Server push: one request, many responses

  53. TCP Connection html html style.css style.css

  54. TCP Connection html html style.css

  55. No more inlining

  56. Prioritization

  57. Important assets received first

  58. HTTPS is required

  59. “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
  60. Gophertiles https://http2.golang.org/gophertiles

  61. HTTP/1.1

  62. HTTP/2

  63. 12s

  64. 1.7s

  65. HTTP/2 is available… today!

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

    (Windows 10) Edge Safari 8.1 (iOS 9/OSX 10.10)
  67. Apache Nginx Nghttp2 https://nghttp2.org h2o https://calomel.org/h2o.html

  68. WordPress ❤ HTTP/2

  69. https://http2.wphttp.com

  70. #core-http

  71. HTTP/2 is a game changer

  72. https://www.tollmanz.com/wcyyz2015 @tollmanz