HTTP/2 101

Chrome Dev Summit 2015
https://www.youtube.com/watch?v=r5oT_2ndjms

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