Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Zack Tollman

October 02, 2015
Tweet

More Decks by Zack Tollman

Other Decks in Technology

Transcript

  1. HTTP/2 and You
    Zack Tollman @tollmanz

    View full-size slide

  2. Latency is the enemy

    View full-size slide

  3. Round

    Trip Time

    View full-size slide

  4. Reduce latency

    View full-size slide

  5. Bandwidth vs.
    Latency

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. “…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

    View full-size slide

  9. TCP Connection

    View full-size slide

  10. TCP Connection
    SYN

    View full-size slide

  11. TCP Connection
    SYN
    SYN
    ACK

    View full-size slide

  12. TCP Connection
    SYN
    SYN
    ACK
    ACK

    View full-size slide

  13. TCP Connection
    SYN
    SYN
    ACK
    ACK
    50ms

    View full-size slide

  14. TCP Connection
    SYN
    SYN
    ACK
    ACK
    50ms
    50ms

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. HTTPS / TLS
    SYN
    ACK SYN

    View full-size slide

  19. HTTPS / TLS
    SYN
    ACK SYN
    ACK / HELLO
    HELLO

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. HTTPS / TLS
    SYN
    ACK SYN
    ACK / HELLO
    FINISHED
    HELLO
    FINISHED
    HTTP
    1
    2
    3
    100ms
    100ms
    100ms

    View full-size slide

  24. Connections are

    costly

    View full-size slide

  25. That’s just a single

    TCP connection

    View full-size slide

  26. 284 assets

    2000 ms start render

    101 connections

    8418 ms latency

    View full-size slide

  27. “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

    View full-size slide

  28. Latency problems in
    HTTP/1.1 are

    critical flaws

    View full-size slide

  29. Serialization:

    a single asset at a time

    View full-size slide

  30. TCP Connection
    html
    html
    style.css
    style.css

    View full-size slide

  31. One request,

    one response

    View full-size slide

  32. Developers are clever

    View full-size slide

  33. Reduce requests with
    bundling

    View full-size slide

  34. JS/CSS concatenation

    View full-size slide

  35. Image sprites

    View full-size slide

  36. Bypass 6 connections
    limit per domain

    View full-size slide

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

    View full-size slide

  38. Optimize critical
    rendering path

    View full-size slide

  39. Inline CSS, images, JS

    View full-size slide

  40. “Best Practices”

    View full-size slide

  41. Clever Hacks

    View full-size slide

  42. HTTP/2 reduces latency
    by fixing the flaws

    View full-size slide

  43. Multiplexing:

    one connection per
    domain

    View full-size slide

  44. No more bundling

    View full-size slide

  45. No more sharding

    View full-size slide

  46. Single domain

    View full-size slide

  47. Server push:

    one request, many
    responses

    View full-size slide

  48. TCP Connection
    html
    html
    style.css
    style.css

    View full-size slide

  49. TCP Connection
    html
    html
    style.css

    View full-size slide

  50. No more inlining

    View full-size slide

  51. Prioritization

    View full-size slide

  52. Important assets
    received first

    View full-size slide

  53. HTTPS is required

    View full-size slide

  54. “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

    View full-size slide

  55. Gophertiles

    https://http2.golang.org/gophertiles

    View full-size slide

  56. HTTP/2 is available…

    today!

    View full-size slide

  57. Firefox 36

    Chrome 41 (iOS too!)

    Opera 28

    IE 11 (Windows 10)

    Edge

    Safari 8.1 (iOS 9/OSX 10.10)

    View full-size slide

  58. Apache

    Nginx

    Nghttp2

    https://nghttp2.org

    h2o

    https://calomel.org/h2o.html

    View full-size slide

  59. WordPress

    HTTP/2

    View full-size slide

  60. https://http2.wphttp.com

    View full-size slide

  61. HTTP/2 is a

    game changer

    View full-size slide

  62. https://www.tollmanz.com/wcyyz2015

    @tollmanz

    View full-size slide