HTTP/2: What no one is telling you

Hooman Beheshti VP Technology

HTTP/2: What no one’s telling you

some people are starting to tell you!

Hooman Beheshti VP Technology

HTTP/2: What no one’s telling you

Everything will be much faster!

You don’t need to change anything!

Google said so!

You can stop doing

optimizations!

2 > 1.1

Goals •  Take an objective look at the protocol •  Practical considerations •  Share data •  Better understand the good –  And the bad?

HTTP/2 RFC 7540

Binary protocol

Connection

connection

A single connection •  single, long-lasting TCP connection

•  Theoretically, this means better congestion management between peers

•  TLS (with ALPN)

•  Connection reuse across domains (same IP and cert)

Streams

connection

stream

stream

stream

…

Streams •  Virtual channels for communication

–  Translate roughly to a request/response exchange –  Client or server can initiate or terminate

•  Stream IDs:

–  Client: odd; server: even; 0: reserved –  Each ID has to be larger than the ones before it initiated

by the endpoint –  Cannot be reused

Frames

connection

stream

stream

stream

…

frame frame frame frame

frame frame frame frame

frame frame frame

frame frame frame

frame frame

frame frame frame

GET /thing HTTP/1.1Host: www.example.comUser-Agent: Some_user_agent

HTTP/1.1 200 OKServer: some_serverContent-Type: text/htmlContent-Length: 1000

html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html

Request Response




HEADERS

Request Response




HEADERS HEADERS

Request Response




DATA

DATA

DATA

DATA

DATA

DATA

HEADERS HEADERS

Request Response

DATA Carries request or response data

HEADERS Carries request/response headers/trailers; can initiate a stream

PRIORITY Indicates priority of a stream

RST_STREAM Terminates a stream

SETTINGS Defines parameters for the connection only

PUSH_PROMISE Signals peer for server push

PING Maintenance frame for checking RTT, connection, etc

GOAWAY For shutting down a connection

WINDOW_UPDATE Frame responsible for flow control adjustments

CONTINUATION Extends a HEADERS frame and can carry more headers

DATA Carries request or response data

HEADERS Carries request/response headers/trailers; can initiate a stream

PRIORITY Indicates priority of a stream

RST_STREAM Terminates a stream

SETTINGS Defines parameters for the connection only

PUSH_PROMISE Signals peer for server push

PING Maintenance frame for checking RTT, connection, etc

GOAWAY For shutting down a connection

WINDOW_UPDATE Frame responsible for flow control adjustments

CONTINUATION Extends a HEADERS frame and can carry more headers

Protocol flow

HTTP/1

connection

request response

HTTP/2 connection

(sid=1)DATA

(sid=1)DATA

(sid=1)DATA

(sid=1)HEADERS

(sid=1)HEADERS

HTTP/1

connection

request response

connection

request response

HTTP/1

connection

request response

connection

request response

connection

request response

HTTP/2 connection

(sid=3)DATA

(sid=1)DATA

(sid=5)HEADERS

(sid=3)DATA

(sid=1)HEADERS

(sid=3)HEADERS

(sid=11)HEADERS

(sid=13)HEADERS

(sid=15)HEADERS

(sid=13)DATA

(sid=13)DATA

(sid=17)HEADERS

HTTP/1.1

HTTP/1.1 HTTP/2

http://caniuse.com/#search=http2

Servers •  Apache & Nginx

•  h2o –  https://h2o.examp1e.net/

•  https://en.wikipedia.org/wiki/HTTP/2

•  Talk to your CDNs

Performance

The perfect page

Private WebpageTest

5Mbps/1Mbps; 40ms latency

Chrome; h1 vs h2

Private WebpageTest

5Mbps/1Mbps; 40ms latency

Chrome; h1 vs h2

~270 runs each!!

Packet Loss!

Firefox

Slow 3G: 780Kbps/330Kbps

200ms latency

Firefox; Slow 3G: 780Kbps/330Kbps, 200ms latency

Firefox; 5Mbps/1Mbps, 40ms latency

5Mbps/1Mbps, 40ms latency

0% PLR 2% PLR

5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms

DocComplete h2 h2 h2 h2 h1 h1 h1 h1

Keeping score…

0% PLR 2% PLR

5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms

DocComplete h2 h2 h2 h2 h1 h1 h1 h1

DCL Start h1 h1 h2 h1 h1 h1 h2 h1

Speed Index h2/h1 h2 h2 h2 h1 h1 h2 h2

Keeping score…

Why?

Head of line blocking in TCP

Real pages

Real pages •  8 pages (from 8 real sites)

•  16 bandwidth/latency combinations –  Each with 0%, 0.5%, 1%, 2% PLR

•  Firefox and Chrome, TLS only, collect all metrics

•  300-400 runs with each combination

Real pages •  8 pages (from 8 real sites)

•  16 bandwidth/latency combinations –  Each with 0%, 0.5%, 1%, 2% PLR

•  Firefox and Chrome, TLS only, collect all metrics

•  300-400 runs with each combination

Analysis •  3 Types of pages, # of resources h1àh2:

–  ~75% or higher –  ~half –  ~25% or lower

•  2 profiles (0%, 0.5%, 1%, 2% PLR): –  “Broadband”: 5Mbps/1Mbps/40ms –  “Slow 3G”: 780Kbps/330Kbps/200ms

•  3 Metrics –  Document Complete –  DOM Content Loaded Start –  Speed Index

Site1: Fastly customers page

130-135 requests to onload (~3MB)

~99 requests h1àh2 (2.5MB)

Site1; DocComplete; 5Mbps/1Mbps/40ms

Site1; DCL; 5Mbps/1Mbps/40ms

Site1; Speed Index; 5Mbps/1Mbps/40ms

Site1; DocComplete; 780Kbps/330Kbps/200ms

Site1; DCL; 780Kbps/330Kbps/200ms ***

Site1; Speed Index; 780Kbps/330Kbps/200ms

0% PLR 2% PLR5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms

Site1(Fastly)

DocComplete h2 h2 h2 h1 h1 h1 h1 h1DCL Start h2 h1 h2 h2 h2/h1 h1 h2 h2

Speed Index h1 h2 h2 h2 h1 h2/h1 h2/h1 h2

Site2

90-100 requests to onload (~1.7MB)

~47 requests h1àh2 (1.2MB)

Site2; DocComplete; 5Mbps/1Mbps/40ms




Site2; DCL; 780Kbps/330Kbps/200ms

Site2; Speed Index; 780Kbps/330Kbps/200ms ***


Site1(Fastly)



Site2DocComplete h2 h2 h2 h2 h1 h2/h1 h1 h1

DCL Start h2 h2 h2 h2 h1 h1 h1 h1Speed Index h1 h2 h1 h2 h1 h2 h1 h2

Site3

176-212 requests to onload (~3.5MB)

~45-55 requests h1àh2 (2MB)

Site3; DocComplete; 5Mbps/1Mbps/40ms ***




Site3; DCL; 780Kbps/330Kbps/200ms

Site3; Speed Index; 780Kbps/330Kbps/200ms


Site1(Fastly)



Site2DocComplete h2 h2 h2 h2 h1 h2/h1 h1 h1


Site3DocComplete h2 h2 h1 h2 h2 h2 h1 h1

DCL Start h2 h2 h2 h2 h2 h2 h2 h2Speed Index h2 h2 h1 h1 h1/h2 h1/h2 h1 h1


Site1a(Fastly)



Site1bDocComplete h2/h1 h2 h2 h2 h1 h2 h1 h2/h1

DCL Start h1 h2 h1 h1 h1 h2/h1 h1 h1Speed Index h1 h2 h2 h1 h1 h2/h1 h1 h1

Site1cDocComplete h1/h2 h2 h2 h2 h1 h1 h1 h1

DCL Start h1 h1/h2 h1 h1 h1 h2 h1 h1Speed Index h2 h2 h1 h2 h1 h2 h1 h1

Site2aDocComplete h2 h2 h2 h2 h1 h2/h1 h1 h1


Site2bDocComplete h2 h2 h2 h2 h1 h1/h2 h1 h1

DCL Start h2 h2 h1 h2 h1 h2 h1 h2Speed Index h2 h1/h2 h1 h1/h2 h2 h2 h1 h1

Site3aDocComplete h2 h2 h1 h2 h2 h2 h1 h1


Site3bDocComplete h2 h2 h2 h1/h2 h2 h2/h1 h2 h2


Site3cDocComplete h1 h2 h2 h2 h1 h2 h2 h2

DCL Start h1/h2 h2 h1 h1/h2 h2/h1 h2 h1 h2/h1Speed Index h1 h2 h2 h2 h2 h2 h2 h2


Site1a(Fastly)


















Site1a(Fastly)


















Site1a(Fastly)

















Trends? •  Metrics later in the page seem to get affected more

by packet loss (?)

•  Lots of exceptions –  Sometimes h2 holds up even under loss conditions –  Sometimes h1 wins even when there’s no loss

•  Firefox and Chrome don’t always behave the same

PLR in the real world

Some reading… •  http://c3lab.poliba.it/images/3/3b/QUIC_SAC15.pdf

•  https://www.usenix.org/system/files/conference/nsdi14/nsdi14-paper-wang_xiao_sophia.pdf

•  http://arxiv.org/pdf/1507.06562v1.pdf

•  http://nl.cs.montana.edu/lab/publications/Goel_H2_extended.pdf

•  https://99designs.com.au/tech-blog/blog/2016/07/14/real-world-http-2-400gb-of-images-per-day/

Now what?

Caution! •  we’re not going to draw big conclusions, other than:

–  Packet loss seems to matter –  h2 isn’t always faster!

•  This was all simulated –  PLR is different in the real world –  Users have a mix of connection profiles –  Nothing beats real world data

•  Your mileage may (and will) vary

Don’t listen to anyone!!

Don’t listen to anyone!!

https://speakerdeck.com/patrickhamann/http2-what-where-why-and-when-smashing-conference-march-2016

https://speakerdeck.com/patrickhamann/http2-what-where-why-and-when-smashing-conference-march-2016

https://github.com/fastlyhoo/wpt_h1vsh2

https://github.com/fastlyhoo/wpt_h1vsh2

QUIC

Server push

Server push basics •  Ability to “push” a resource to the client before

the client requests it –  And before the client knows it needs it –  Only servers can push

•  Hop-by-hop

SETTINGS

PUSH_PROMISE

connection

HEADERS (sid=1)GET /index.html

time

DATA (sid=2) DATA (sid=1) DATA (sid=2)

DATA (sid=2) DATA (sid=2)HEADERS (sid=2)

PUSH_PROMISE(sid=1)Promised sid=2GET /css1.css

<request headers>

DATA (sid=1) DATA (sid=1) DATA (sid=1)HEADERS (sid=1)

Server Push •  What do we push? –  Outside the scope of the protocol

•  Push and browser caches don’t necessarily play well together –  RST_STREAM ? –  Even if the browser rejected, it’s too late

No push – first view

No push – repeat view

Push – first view

Pushed

Push – repeat view

Pushed

Use cases

Essential resources for this page •  Similar to <Link rel=“preload”>

•  Save 1xRTT

Push:

No Push:

Push during server think time •  Push assets to the browser while the server is

“thinking” –  Backend processing –  Time to deliver HTML from origin through a CDN

Push during server think time •  Push assets to the browser while the server is

“thinking” –  Backend processing –  Time to deliver HTML from origin through a CDN

•  https://blog.yoav.ws/being_pushy/ •  This isn’t a trivial thing to do; ask your CDN

about support

Next navigation?

h$ps://w3c.github.io/resource-hints/

We still have some questions •  What do we push?

–  Still unclear… –  https://docs.google.com/document/d/

1K0NykTXBbbbTlv60t5MyJvXjqKGsCVNYHyLEXIxYMv0/edit

•  What if it’s already in the browser cache? –  H2O: CASPER –  Cache Digests:

•  https://tools.ietf.org/html/draft-ietf-httpbis-cache-digest-00

Other use cases?

h$ps://www.facebook.com/atscaleevents/videos/1775942979345465/

HPACK

HPACK (RFC 7541) •  Addresses the header bloat problem

•  Two primary mechanisms –  All headers (name=value) are Huffman encoded –  Indexed tables at each peer

Tables •  Static table –  Defined by the RFC, never changes

•  Dynamic table –  Built during the connection and maintained by each

side –  FIFO

+-------+-----------------------------+---------------+ | Index | Header Name | Header Value | +-------+-----------------------------+---------------+ | 1 | :authority | | | 2 | :method | GET | | 3 | :method | POST | | 4 | :path | / | | 5 | :path | /index.html | | 6 | :scheme | http | | 7 | :scheme | https | | 8 | :status | 200 | | 9 | :status | 204 | | 10 | :status | 206 | | 11 | :status | 304 | | 12 | :status | 400 | | 13 | :status | 404 | | 14 | :status | 500 | | 15 | accept-charset | | | 16 | accept-encoding | gzip, deflate | | 17 | accept-language | | | 18 | accept-ranges | | | 19 | accept | | | 20 | access-control-allow-origin | | | 21 | age | | | 22 | allow | | | 23 | authorization | | | 24 | cache-control | | | 25 | content-disposition | | | 26 | content-encoding | | | 27 | content-language | | | 28 | content-length | | | 29 | content-location | | | 30 | content-range | | +-------+-----------------------------+---------------+

Table 1: Static Table Entries

+-------+-----------------------------+---------------+ | Index | Header Name | Header Value | +-------+-----------------------------+---------------+ | 31 | content-type | | | 32 | cookie | | | 33 | date | | | 34 | etag | | | 35 | expect | | | 36 | expires | | | 37 | from | | | 38 | host | | | 39 | if-match | | | 40 | if-modified-since | | | 41 | if-none-match | | | 42 | if-range | | | 43 | if-unmodified-since | | | 44 | last-modified | | | 45 | link | | | 46 | location | | | 47 | max-forwards | | | 48 | proxy-authenticate | | | 49 | proxy-authorization | | | 50 | range | | | 51 | referer | | | 52 | refresh | | | 53 | retry-after | | | 54 | server | | | 55 | set-cookie | | | 56 | strict-transport-security | | | 57 | transfer-encoding | | | 58 | user-agent | | | 59 | vary | | | 60 | via | | | 61 | www-authenticate | | +-------+-----------------------------+---------------+

Table 1: Static Table Entries

Performance benefits


Bytes BrowseràServer




https://blogs.dropbox.com/tech/2016/05/enabling-http2-for-dropbox-web-services-experiences-and-observations/

HPACK – things to know •  Default size is 4K

–  For the entire dynamic table –  Site-wide headers proposal:

•  https://tools.ietf.org/html/draft-nottingham-site-wide-headers-00

•  Compression context is set per connection –  New connection starts from scratch with static table and builds new dynamic table

•  An attack vector –  https://www.imperva.com/docs/Imperva_HII_HTTP2.pdf

•  Can’t turn it off –  Without it, pipelining would be very difficult

content-security-policy: script-src https://connect.facebook.net https://cm.g.doubleclick.net https://ssl.google-analytics.com https://graph.facebook.com https://twitter.com 'unsafe-eval' https://*.twimg.com https://api.twitter.com https://analytics.twitter.com https://publish.twitter.com https://ton.twitter.com 'unsafe-inline' https://syndication.twitter.com https://www.google.com https://t.tellapart.com https://platform.twitter.com https://www.google-analytics.com 'self'; font-src https://twitter.com https://*.twimg.com data: https://ton.twitter.com https://fonts.gstatic.com https://maxcdn.bootstrapcdn.com https://netdna.bootstrapcdn.com 'self'; media-src https://twitter.com https://*.twimg.com https://ton.twitter.com blob: 'self'; connect-src https://graph.facebook.com https://*.giphy.com https://*.twimg.com https://api.twitter.com https://pay.twitter.com https://analytics.twitter.com https://media.riffsy.com https://upload.twitter.com https://api.mapbox.com 'self'; style-src https://fonts.googleapis.com https://twitter.com https://*.twimg.com https://translate.googleapis.com https://ton.twitter.com 'unsafe-inline' https://platform.twitter.com https://maxcdn.bootstrapcdn.com https://netdna.bootstrapcdn.com 'self'; object-src https://twitter.com https://pbs.twimg.com; default-src 'self'; frame-src https://staticxx.facebook.com https://twitter.com https://*.twimg.com https://5415703.fls.doubleclick.net https://player.vimeo.com https://pay.twitter.com https://www.facebook.com https://ton.twitter.com https://syndication.twitter.com https://vine.co twitter: https://www.youtube.com https://platform.twitter.com https://upload.twitter.com https://s-static.ak.facebook.com 'self' https://donate.twitter.com; img-src https://graph.facebook.com https://*.giphy.com https://twitter.com https://*.twimg.com data: https://lumiere-a.akamaihd.net https://fbcdn-profile-a.akamaihd.net https://www.facebook.com https://ton.twitter.com https://*.fbcdn.net https://syndication.twitter.com https://media.riffsy.com https://www.google.com https://stats.g.doubleclick.net https://*.tiles.mapbox.com https://www.google-analytics.com blob: 'self'; report-uri https://twitter.com/i/csp_report?a=NVQWGYLXFVZXO2LGOQ%3D%3D%3D%3D%3D%3D&ro=false;

content-security-policy: script-src https://connect.facebook.net https://cm.g.doubleclick.net https://ssl.google-analytics.com https://graph.facebook.com https://twitter.com 'unsafe-eval' https://*.twimg.com https://api.twitter.com https://analytics.twitter.com https://publish.twitter.com https://ton.twitter.com 'unsafe-inline' https://syndication.twitter.com https://www.google.com https://t.tellapart.com https://platform.twitter.com https://www.google-analytics.com 'self'; font-src https://twitter.com https://*.twimg.com data: https://ton.twitter.com https://fonts.gstatic.com https://maxcdn.bootstrapcdn.com https://netdna.bootstrapcdn.com 'self'; media-src https://twitter.com https://*.twimg.com https://ton.twitter.com blob: 'self'; connect-src https://graph.facebook.com https://*.giphy.com https://*.twimg.com https://api.twitter.com https://pay.twitter.com https://analytics.twitter.com https://media.riffsy.com https://upload.twitter.com https://api.mapbox.com 'self'; style-src https://fonts.googleapis.com https://twitter.com https://*.twimg.com https://translate.googleapis.com https://ton.twitter.com 'unsafe-inline' https://platform.twitter.com https://maxcdn.bootstrapcdn.com https://netdna.bootstrapcdn.com 'self'; object-src https://twitter.com https://pbs.twimg.com; default-src 'self'; frame-src https://staticxx.facebook.com https://twitter.com https://*.twimg.com https://5415703.fls.doubleclick.net https://player.vimeo.com https://pay.twitter.com https://www.facebook.com https://ton.twitter.com https://syndication.twitter.com https://vine.co twitter: https://www.youtube.com https://platform.twitter.com https://upload.twitter.com https://s-static.ak.facebook.com 'self' https://donate.twitter.com; img-src https://graph.facebook.com https://*.giphy.com https://twitter.com https://*.twimg.com data: https://lumiere-a.akamaihd.net https://fbcdn-profile-a.akamaihd.net https://www.facebook.com https://ton.twitter.com https://*.fbcdn.net https://syndication.twitter.com https://media.riffsy.com https://www.google.com https://stats.g.doubleclick.net https://*.tiles.mapbox.com https://www.google-analytics.com blob: 'self'; report-uri https://twitter.com/i/csp_report?a=NVQWGYLXFVZXO2LGOQ%3D%3D%3D%3D%3D%3D&ro=false;

2.2KB

HPACK – things to know •  Default size is 4K

–  For the entire dynamic table –  Site-wide headers proposal:

•  https://tools.ietf.org/html/draft-nottingham-site-wide-headers-00

•  Compression context is set per connection –  New connection starts from scratch with static table and builds new dynamic table

•  An attack vector –  https://www.imperva.com/docs/Imperva_HII_HTTP2.pdf

•  Can’t turn it off –  Without it, pipelining would be very difficult

Tools and resources

http://chimera.labs.oreilly.com/books/1230000000545

HTTP/2 and SPDY indicator •  Chrome:

–  https://chrome.google.com/webstore/detail/http2-and-spdy-indicator/mpbpobfflnpcgagjijhmgnchggcjblin?hl=en

•  Firefox: –  https://addons.mozilla.org/en-us/firefox/addon/spdy-indicator/

Chrome DevTools

Chrome net-internals

wireshark

UsingtheTLSkeyfile:h$ps://jimshaver.net/2015/02/11/decrypMng-tls-browser-traffic-with-wireshark-the-easy-way/

cURL

https://nghttp2.org/

nghttp

Others •  h2c (and wiretapping):

–  https://github.com/fstab/h2c •  h2a: reverse proxy

–  https://github.com/summerwind/h2a •  Conformance:

–  https://github.com/summerwind/h2spec •  Charles proxy

–  https://www.charlesproxy.com •  http-wg

–  https://github.com/http2/http2-spec/wiki/Tools

Summary and takeaways •  h2 is complicated, but hopefully better for us going forward

–  Browser protocol?

•  Not everything will be as easy/fast as we’d like

•  We still have a lot of learning to do

•  We need to start thinking about how to build applications to best leverage the new protocol

•  You can help!

Thank you!