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

HTTP/2 and You

Zack Tollman
July 18, 2015
Technology
1
460

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

July 18, 2015
Tweet

More Decks by Zack Tollman

See All by Zack Tollman
Defining Fast: The Hardest Problem in Performance Engineering
tollmanz
0
61
Defining Fast: The Hardest Problem in Performance Engineering
tollmanz
0
87
ReWIRED: Moving WIRED.com from WordPress to Node
tollmanz
0
160
Put an "S" on it: Moving a Large Publishing Site to HTTPS
tollmanz
1
87
Building Custom User Experiences from the Edge
tollmanz
0
79
HTTPS Migrations: The Hard Parts
tollmanz
0
150
HTTPS is Coming: Are You Prepared? (Velocity 2016)
tollmanz
0
150
Understanding HTTPS and TLS
tollmanz
0
160
HTTPS Is Coming - WP SFO
tollmanz
0
79

Other Decks in Technology

See All in Technology
Invitation to K8s-Docs ja
nasa9084
0
1k
Jotaiで作ったフォームをApollo_Clientで投げたらいい感じだった件.pdf
asazutaiga
1
230
自分のデータは自分で守る - あなたのCI/CDパイプラインをセキュアにする処方箋
jacopen
4
460
WebGLやCanvasを使ったデータ可視化コンテンツ開発/nikkei-tech-talk5-3
nikkei_engineer_recruiting
0
140
八王子からお届けするノベルティ - YAPC::Kyoto 2023
uzulla
0
400
C# と HTTP/2 と gRPC
nenonaninu
0
510
Oracle Container Engine for Kubernetes (OKE) ご紹介 / oke-overview
oracle4engineer
PRO
1
980
人生がときめく自宅ネットワークの魔法
tatematsu_san
1
600
Teamsコネクタについて（チーム、チャネル）
miyakemito
2
350
BUILD UP for Web3 engineer
aramaki
0
470
ジョブキューシステムFireworqのアーキテクチャ設計と運用時のベストプラクティス
tarao
1
820
ローコードで改革！End to Endテストの再定義！
odasho
0
140

Featured

See All Featured
Why Our Code Smells
bkeepers
PRO
326
55k
The Language of Interfaces
destraynor
149
21k
Ruby is Unlike a Banana
tanoku
93
9.6k
Writing Fast Ruby
sferik
613
58k
Principles of Awesome APIs and How to Build Them.
keavy
118
16k
The Invisible Customer
myddelton
113
12k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
500
130k
The Art of Programming - Codeland 2020
erikaheidi
36
11k
Scaling GitHub
holman
453
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
240
11k
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
Rails Girls Zürich Keynote
gr2m
87
12k

Transcript

  1. HTTP/2 and You
    Zack Tollman @tollmanz

    View Slide

  2. I am going to say
    latency a lot

    View Slide

  3. View Slide

  4. Round

    Trip Time

    View Slide

  5. Increase

    Bandwidth

    View Slide

  6. View Slide

  7. Reduce latency

    View Slide

  8. Bandwidth vs.
    Latency

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  12. TCP Connection

    View Slide

  13. TCP Connection
    SYN

    View Slide

  14. TCP Connection
    SYN
    SYN
    ACK

    View Slide

  15. TCP Connection
    SYN
    SYN
    ACK
    ACK

    View Slide

  16. TCP Connection
    SYN
    SYN
    ACK
    ACK
    50ms

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  21. HTTPS / TLS

    View Slide

  22. HTTPS / TLS
    SYN
    ACK SYN

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  28. Connections are

    costly

    View Slide

  29. That’s just a single

    TCP connection

    View Slide

  30. Six connections

    per domain

    View Slide

  31. 284 assets

    2000 ms start render

    101 connections

    8418 ms latency

    View Slide

  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

    View Slide

  33. Latency problems in
    HTTP/1.1 are

    critical flaws

    View Slide

  34. Serialization:

    a single asset at a time

    View Slide

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

    View Slide

  36. One request,

    one response

    View Slide

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

    View Slide

  38. Developers are clever

    View Slide

  39. Reduce requests with
    bundling

    View Slide

  40. JS/CSS concatenation

    View Slide

  41. Image sprites

    View Slide

  42. Bypass 6 connections
    limit per domain

    View Slide

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

    View Slide

  44. Optimize critical
    rendering path

    View Slide

  45. Inline CSS, images, JS

    View Slide

  46. “Best Practices”

    View Slide

  47. Clever Hacks

    View Slide

  48. View Slide

  49. HTTP/2 reduces latency
    by fixing the problems

    View Slide

  50. SPDY

    View Slide

  51. Multiplexing:

    one connection per
    domain

    View Slide

  52. No more bundling

    View Slide

  53. No more sharding

    View Slide

  54. Single domain

    View Slide

  55. Server push:

    one request, many
    responses

    View Slide

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

    View Slide

  57. TCP Connection
    html
    html
    style.css

    View Slide

  58. No more inlining

    View Slide

  59. Prioritization

    View Slide

  60. Important assets
    received first

    View Slide

  61. HTTPS is required…

    kinda

    View Slide

  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

    View Slide

  63. Gophertiles

    https://http2.golang.org/gophertiles

    View Slide

  64. HTTP/1.1

    View Slide

  65. HTTP/2

    View Slide

  66. 12s

    View Slide

  67. 1.7s

    View Slide

  68. HTTP/2 is available…

    today!

    View Slide

  69. Firefox 36

    Chrome 41 (iOS too!)

    Opera 28

    IE 11 (Windows 10)

    Edge

    Safari 8.1 (iOS 9/OSX 10.10)

    View Slide

  70. Apache: mod_h2

    Nginx: Q4

    View Slide

  71. Nghttp2

    https://nghttp2.org

    https://www.tollmanz.com/http2-nghttp2-nginx-tls/

    h2o

    https://calomel.org/h2o.html

    View Slide

  72. tollmanz.com/wcbos2015

    @tollmanz

    View Slide