$30 off During Our Annual Pro Sale. View Details »

HTTP/2 101

Surma
November 20, 2015

HTTP/2 101

Surma

November 20, 2015
Tweet

More Decks by Surma

Other Decks in Technology

Transcript

  1. View Slide

  2. HTTP2 101
    Surma
    @surmair

    View Slide

  3. TL;DR: SWITCH!
    HTTP/2 ≥ HTTP/1

    View Slide

  4. TL;DR Performance
    If you invest, you can squeeze out lots of Δt

    View Slide

  5. History HTTP
    HTTP/0.9
    HTTP/1.0
    HTTP/1.1
    SPDY/2
    HTTP/2
    1991 1995 1997 2012 2015

    View Slide

  6. HTTP/0.9

    View Slide

  7. History HTTP
    HTTP/0.9
    HTTP/1.0
    HTTP/1.1
    SPDY/2
    HTTP/2
    1991 1996 1997 2012 2015

    View Slide

  8. HTTP/0.9
    GET
    POST
    HEAD
    PUT
    DELETE
    LINK
    UNLINK
    HTTP/1.0

    View Slide

  9. History HTTP
    HTTP/0.9
    HTTP/1.0
    HTTP/1.1
    SPDY/2
    HTTP/2
    1991 1996 1997 2012 2015

    View Slide

  10. View Slide

  11. HTTP/1.x
    Best Practices
    Write it, concatenate it, minify it, inline it,
    sprite it, shard it, vulcanize it, gzip it
    Workarounds
    Hacks

    View Slide

  12. Flaw #1 HOL Blocking
    aka one-resource-at-a-time syndrome

    View Slide

  13. http2.golang.org/gophertiles

    View Slide

  14. View Slide

  15. h1
    h2

    View Slide

  16. Flaw #2 Meta Data
    GET /index.html
    User-Agent: Mozilla/5.0…
    Cookie: session_id=deadbeef

    POST /comment
    User-Agent: Mozilla/5.0…
    GET /logo.jpg
    User-Agent: Mozilla/5.0…
    GET /script.js
    User-Agent: Mozilla/5.0…
    Cookie: session_id=deadbeef

    View Slide

  17. Flaw #2 Meta Data
    200 OK
    Set-Cookie: …
    Content-Type: text/html
    Content-Encoding: gzip

    ?

    View Slide

  18. History HTTP
    HTTP/0.9
    HTTP/1.0
    HTTP/1.1
    SPDY/2
    HTTP/2
    1991 1996 1997 2012 2015

    View Slide

  19. Welcome to the glorious era of
    ✨HTTP/2✨
    …but what is it?

    View Slide

  20. HTTP/1.1 Upgrade to h2
    ✨HTTP/2✨

    View Slide

  21. ✨HTTP/2✨
    TLS encrypted

    View Slide

  22. ✨HTTP/2✨
    Single TCP connection

    View Slide

  23. ✨HTTP/2✨

    View Slide

  24. ✨HTTP/2✨
    Single TCP connection

    View Slide

  25. HTTP/2
    Concatenation
    Inlining
    Vulcanize
    Spriting

    View Slide

  26. View Slide

  27. h1 h2

    View Slide

  28. h1 h2

    View Slide

  29. h2
    h1

    View Slide

  30. 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

    View Slide

  31. ✨HTTP/2✨

    View Slide

  32. HPACK
    Header compression specifically for HTTP

    View Slide

  33. ✨HPACK✨
    Header compression specifically for HTTP
    glorious

    View Slide

  34. ✨HPACK✨
    2 :method GET
    3 :method POST
    5 :path /index.html
    8 :status 200
    35 Host
    61 www-authenticate
    62



    GET /index.html
    Host: www.example.org
    2, 5, 35,
    Huffman(“www.example.org”)

    View Slide

  35. ✨HPACK✨
    2 :method GET
    3 :method POST
    5 :path /index.html
    8 :status 200
    35 Host
    61 www-authenticate
    62 Host www.example.org



    GET /index.html
    Host: www.example.org
    2, 5, 35,
    Huffman(“www.example.org”)

    View Slide

  36. ✨HPACK✨
    2 :method GET
    3 :method POST
    5 :path /index.html
    8 :status 200
    35 Host
    61 www-authenticate
    62 Host www.example.org
    63


    POST /something
    Host: www.example.org
    3, Huffman(“/something”), 62

    View Slide

  37. HPACK
    Sharding
    Multiple CDNs

    View Slide

  38. But wait
    theres more…
    Squeeze out the last bits of performance

    View Slide

  39. ✨PUSH✨
    Can I interest you in some complementary
    resources to your resources?

    View Slide

  40. ✨PUSH✨
    GET /index.html
    /index.html
    /style.css
    /script.js
    GET /style.css
    GET /script.js

    View Slide

  41. View Slide

  42. with push without push
    Don’t push mindlessly!

    View Slide

  43. Still
    needed
    GZIP/Deflate
    First Render
    CDNs/DNS lookup
    Cache-Control

    View Slide

  44. 47% of HTML
    36% of CSS
    26% of JS
    are still uncompressed
    without gzip
    with gzip
    bit.ly/uncompressed-resources

    View Slide

  45. Now?

    View Slide

  46. Now?
    (browsers)

    View Slide

  47. Now?
    (servers)
    ✔ ✔ ✔

    View Slide

  48. Now?
    (languages)
    bit.ly/http2implementations

    View Slide

  49. bit.ly/http2implementations

    View Slide

  50. Now?
    github.com/GoogleChrome/simplehttp2server
    (local dev)
    HTTP/2 & Push

    View Slide

  51. View Slide

  52. View Slide

  53. Now!
    Your Production Environment

    View Slide

  54. Now!
    (Tier 1)
    Put your static assets on a h2 CDN

    View Slide

  55. Now!
    (Tier 1)
    8.41s
    vs
    1.84s
    over 3G

    View Slide

  56. Now!
    (Tier 1)
    10% less data
    0.15% faster

    View Slide

  57. Now!
    (Tier 2)
    h2 reverse proxy

    View Slide

  58. Now!
    (Tier 3)
    h2

    View Slide

  59. Future?
    Manifest for static hosters and CDNs
    manifest.json

    View Slide

  60. {
    "index.html": {
    "/css/app.css": {
    "type": "style"
    },
    ...
    },
    "page.html": {
    "/css/page.css": {
    "type": "style"
    },
    ...
    }
    }

    View Slide

  61. $ http2-push-manifest -f index.html -f page.html

    View Slide

  62. WebSockets – Maybe not a Thing
    Future?

    View Slide

  63. Now? Yes
    Why? #PerfMatters
    How? JUST DO IT
    HTTP/2

    View Slide

  64. Thank you!
    Surma
    @surmair

    View Slide