Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
– ...
HTTP/2
RFC 7540
Binary protocol
Connection
connection
A single connection
•  single, long-lasting TCP connection
•  Theoretically, this means better congestion
management betwe...
Streams
connection
stream
stream
stream
…
Streams
•  Virtual channels for communication
–  Translate roughly to a request/response exchange
–  Client or server can ...
Frames
connection
stream
stream
stream
…	
frame frame frame frame
frame frame frame frame
frame frame frame
frame frame frame
fra...
GET /thing HTTP/1.1
Host: www.example.com
User-Agent: Some_user_agent
HTTP/1.1 200 OK
Server: some_server
Content-Type: te...
GET /thing HTTP/1.1
Host: www.example.com
User-Agent: Some_user_agent
HTTP/1.1 200 OK
Server: some_server
Content-Type: te...
GET /thing HTTP/1.1
Host: www.example.com
User-Agent: Some_user_agent
HTTP/1.1 200 OK
Server: some_server
Content-Type: te...
GET /thing HTTP/1.1
Host: www.example.com
User-Agent: Some_user_agent
HTTP/1.1 200 OK
Server: some_server
Content-Type: te...
DATA Carries request or response data
HEADERS
Carries request/response headers/trailers; can initiate a
stream
PRIORITY In...
DATA Carries request or response data
HEADERS
Carries request/response headers/trailers; can initiate a
stream
PRIORITY In...
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
...
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...
 
 
 
0% PLR 2% PLR
5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms
DocComplete h2 h2 h2...
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
•  Firefo...
Real pages
•  8 pages (from 8 real sites)
•  16 bandwidth/latency combinations
–  Each with 0%, 0.5%, 1%, 2% PLR
•  Firefo...
Analysis
•  3 Types of pages, # of resources h1àh2:
–  ~75% or higher
–  ~half
–  ~25% or lower
•  2 profiles (0%, 0.5%, 1...
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% PLR
5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms
Site1
(Fastly)
DocComplete...
Site2
90-100 requests to onload (~1.7MB)
~47 requests h1àh2 (1.2MB)
Site2; DocComplete; 5Mbps/1Mbps/40ms
Site2; DCL; 5Mbps/1Mbps/40ms
Site2; Speed Index; 5Mbps/1Mbps/40ms
Site2; DocComplete; 780Kbps/330Kbps/200ms
Site2; DCL; 780Kbps/330Kbps/200ms
Site2; Speed Index; 780Kbps/330Kbps/200ms
***
0% PLR 2% PLR
5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms
Site1
(Fastly)
DocComplete...
Site3
176-212 requests to onload (~3.5MB)
~45-55 requests h1àh2 (2MB)
Site3; DocComplete; 5Mbps/1Mbps/40ms
***
Site3; DCL; 5Mbps/1Mbps/40ms
Site3; Speed Index; 5Mbps/1Mbps/40ms
Site3; DocComplete; 780Kbps/330Kbps/200ms
Site3; DCL; 780Kbps/330Kbps/200ms
Site3; Speed Index; 780Kbps/330Kbps/200ms
0% PLR 2% PLR
5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms
Site1
(Fastly)
DocComplete...
0% PLR 2% PLR
5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms
Site1a
(Fastly)
DocComplet...
0% PLR 2% PLR
5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms
Site1a
(Fastly)
DocComplet...
0% PLR 2% PLR
5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms
Site1a
(Fastly)
DocComplet...
0% PLR 2% PLR
5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms
Site1a
(Fastly)
DocComplet...
Trends?
•  Metrics later in the page seem to get affected more
by packet loss (?)
•  Lots of exceptions
–  Sometimes h2 ho...
PLR in the real world
Some reading…
•  http://c3lab.poliba.it/images/3/3b/QUIC_SAC15.pdf
•  https://www.usenix.org/system/files/conference/nsdi1...
Now what?
Caution!
•  we’re not going to draw big conclusions, other than:
–  Packet loss seems to matter
–  h2 isn’t always faster!...
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 kn...
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 (s...
Server Push
•  What do we push?
–  Outside the scope of the protocol
•  Push and browser caches don’t necessarily play
wel...
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 t...
Push during server think time
•  Push assets to the browser while the server is
“thinking”
–  Backend processing
–  Time t...
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/
1K0NykTXBbbbTlv6...
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 e...
Tables
•  Static table
–  Defined by the RFC, never changes
•  Dynamic table
–  Built during the connection and maintained...
+-------+-----------------------------+---------------+
| Index | Header Name | Header Value |
+-------+------------------...
Performance benefits
Performance benefits
Bytes BrowseràServer
Performance benefits
Bytes BrowseràServer	
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://too...
content-security-policy: script-src https://connect.facebook.net https://cm.g.doubleclick.net
https://ssl.google-analytics...
content-security-policy: script-src https://connect.facebook.net https://cm.g.doubleclick.net
https://ssl.google-analytics...
HPACK – things to know
•  Default size is 4K
–  For the entire dynamic table
–  Site-wide headers proposal:
•  https://too...
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/mpbpobfflnpcga...
Chrome DevTools
Chrome net-internals
wireshark
Using	the	TLS	key	file:	
	
h$ps://jimshaver.net/2015/02/11/decrypMng-tls-browser-traffic-with-wireshark-the-easy-wa...
cURL
https://nghttp2.org/
nghttp
Others
•  h2c (and wiretapping):
–  https://github.com/fstab/h2c
•  h2a: reverse proxy
–  https://github.com/summerwind/h2...
Summary and takeaways
•  h2 is complicated, but hopefully better for us going forward
–  Browser protocol?
•  Not everythi...
Thank you!
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
HTTP/2: What no one is telling you
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Real world experiences with HTTP/2 (Michael Gooding, Javier Garza from Akamai)
Next
Upcoming SlideShare
Real world experiences with HTTP/2 (Michael Gooding, Javier Garza from Akamai)
Next
Download to read offline and view in fullscreen.

Share

HTTP/2: What no one is telling you

Download to read offline

HTTP/2 (or “H2” as the cool kids call it) has been ratified for months, and browsers already support or have committed to supporting the protocol. Everything we hear tells us that the new version of HTTP will provide significant performance benefits while requiring little to no change to our applications—all the problems with HTTP/1.x have seemingly been addressed; we no longer need the “hacks” that enabled us to circumvent them; and the Internet is about to be a happy place at last.

But maybe we should put the pom-poms down for a minute. Deploying HTTP/2 may not be as easy as it seems since the protocol brings with it new complications and issues. Likewise, the new features the spec introduces may not work as seamlessly as we hope. Hooman Beheshti examines HTTP/2’s core features and how they relate to real-world conditions, discussing the positives, negatives, new caveats, and practical considerations for deploying HTTP/2.

Topics include:

The single-connection model and the impact of degraded network conditions on HTTP/2 versus HTTP/1
How server push interacts (or doesn’t) with modern browser caches
What HTTP/2’s flow control mechanism means for server-to-client communication
New considerations for deploying HPACK compression
Difficulties in troubleshooting HTTP/2 communications, new tools, and new ways to use old tools

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

HTTP/2: What no one is telling you

  1. 1. Hooman Beheshti VP Technology HTTP/2: What no one’s telling you
  2. 2. some people are starting to tell you! Hooman Beheshti VP Technology HTTP/2: What no one’s telling you
  3. 3. Everything will be much faster! You don’t need to change anything! Google said so! You can stop doing optimizations!
  4. 4. 2 > 1.1
  5. 5. Goals •  Take an objective look at the protocol •  Practical considerations •  Share data •  Better understand the good –  And the bad?
  6. 6. HTTP/2 RFC 7540
  7. 7. Binary protocol
  8. 8. Connection
  9. 9. connection
  10. 10. 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)
  11. 11. Streams
  12. 12. connection stream stream stream …
  13. 13. 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
  14. 14. Frames
  15. 15. connection stream stream stream … frame frame frame frame frame frame frame frame frame frame frame frame frame frame frame frame frame frame frame
  16. 16. GET /thing HTTP/1.1 Host: www.example.com User-Agent: Some_user_agent HTTP/1.1 200 OK Server: some_server Content-Type: text/html Content-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
  17. 17. GET /thing HTTP/1.1 Host: www.example.com User-Agent: Some_user_agent HTTP/1.1 200 OK Server: some_server Content-Type: text/html Content-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 HEADERS Request Response
  18. 18. GET /thing HTTP/1.1 Host: www.example.com User-Agent: Some_user_agent HTTP/1.1 200 OK Server: some_server Content-Type: text/html Content-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 HEADERS HEADERS Request Response
  19. 19. GET /thing HTTP/1.1 Host: www.example.com User-Agent: Some_user_agent HTTP/1.1 200 OK Server: some_server Content-Type: text/html Content-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 DATA DATA DATA DATA DATA DATA HEADERS HEADERS Request Response
  20. 20. 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
  21. 21. 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
  22. 22. Protocol flow
  23. 23. HTTP/1 connection request response
  24. 24. HTTP/2 connection (sid=1) DATA (sid=1) DATA (sid=1) DATA (sid=1) HEADERS (sid=1) HEADERS
  25. 25. HTTP/1 connection request response
  26. 26. connection request response HTTP/1 connection request response connection request response connection request response
  27. 27. 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
  28. 28. HTTP/1.1
  29. 29. HTTP/1.1 HTTP/2
  30. 30. http://caniuse.com/#search=http2
  31. 31. Servers •  Apache & Nginx •  h2o –  https://h2o.examp1e.net/ •  https://en.wikipedia.org/wiki/HTTP/2 •  Talk to your CDNs
  32. 32. Performance
  33. 33. The perfect page
  34. 34. Private WebpageTest 5Mbps/1Mbps; 40ms latency Chrome; h1 vs h2
  35. 35. Private WebpageTest 5Mbps/1Mbps; 40ms latency Chrome; h1 vs h2 ~270 runs each!!
  36. 36. Packet Loss!
  37. 37. Firefox
  38. 38. Slow 3G: 780Kbps/330Kbps 200ms latency
  39. 39. Firefox; Slow 3G: 780Kbps/330Kbps, 200ms latency
  40. 40. Firefox; 5Mbps/1Mbps, 40ms latency
  41. 41. 5Mbps/1Mbps, 40ms latency
  42. 42.       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…
  43. 43.       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…
  44. 44. Why?
  45. 45. Head of line blocking in TCP
  46. 46. Real pages
  47. 47. 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
  48. 48. 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
  49. 49. 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
  50. 50. Site1: Fastly customers page 130-135 requests to onload (~3MB) ~99 requests h1àh2 (2.5MB)
  51. 51. Site1; DocComplete; 5Mbps/1Mbps/40ms
  52. 52. Site1; DCL; 5Mbps/1Mbps/40ms
  53. 53. Site1; Speed Index; 5Mbps/1Mbps/40ms
  54. 54. Site1; DocComplete; 780Kbps/330Kbps/200ms
  55. 55. Site1; DCL; 780Kbps/330Kbps/200ms ***
  56. 56. Site1; Speed Index; 780Kbps/330Kbps/200ms
  57. 57. 0% PLR 2% PLR 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms Site1 (Fastly) DocComplete h2 h2 h2 h1 h1 h1 h1 h1 DCL Start h2 h1 h2 h2 h2/h1 h1 h2 h2 Speed Index h1 h2 h2 h2 h1 h2/h1 h2/h1 h2
  58. 58. Site2 90-100 requests to onload (~1.7MB) ~47 requests h1àh2 (1.2MB)
  59. 59. Site2; DocComplete; 5Mbps/1Mbps/40ms
  60. 60. Site2; DCL; 5Mbps/1Mbps/40ms
  61. 61. Site2; Speed Index; 5Mbps/1Mbps/40ms
  62. 62. Site2; DocComplete; 780Kbps/330Kbps/200ms
  63. 63. Site2; DCL; 780Kbps/330Kbps/200ms
  64. 64. Site2; Speed Index; 780Kbps/330Kbps/200ms ***
  65. 65. 0% PLR 2% PLR 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms Site1 (Fastly) DocComplete h2 h2 h2 h1 h1 h1 h1 h1 DCL Start h2 h1 h2 h2 h2/h1 h1 h2 h2 Speed Index h1 h2 h2 h2 h1 h2/h1 h2/h1 h2       Site2 DocComplete h2 h2 h2 h2 h1 h2/h1 h1 h1 DCL Start h2 h2 h2 h2 h1 h1 h1 h1 Speed Index h1 h2 h1 h2 h1 h2 h1 h2
  66. 66. Site3 176-212 requests to onload (~3.5MB) ~45-55 requests h1àh2 (2MB)
  67. 67. Site3; DocComplete; 5Mbps/1Mbps/40ms ***
  68. 68. Site3; DCL; 5Mbps/1Mbps/40ms
  69. 69. Site3; Speed Index; 5Mbps/1Mbps/40ms
  70. 70. Site3; DocComplete; 780Kbps/330Kbps/200ms
  71. 71. Site3; DCL; 780Kbps/330Kbps/200ms
  72. 72. Site3; Speed Index; 780Kbps/330Kbps/200ms
  73. 73. 0% PLR 2% PLR 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms Site1 (Fastly) DocComplete h2 h2 h2 h1 h1 h1 h1 h1 DCL Start h2 h1 h2 h2 h2/h1 h1 h2 h2 Speed Index h1 h2 h2 h2 h1 h2/h1 h2/h1 h2       Site2 DocComplete h2 h2 h2 h2 h1 h2/h1 h1 h1 DCL Start h2 h2 h2 h2 h1 h1 h1 h1 Speed Index h1 h2 h1 h2 h1 h2 h1 h2       Site3 DocComplete h2 h2 h1 h2 h2 h2 h1 h1 DCL Start h2 h2 h2 h2 h2 h2 h2 h2 Speed Index h2 h2 h1 h1 h1/h2 h1/h2 h1 h1
  74. 74. 0% PLR 2% PLR 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms Site1a (Fastly) DocComplete h2 h2 h2 h1 h1 h1 h1 h1 DCL Start h2 h1 h2 h2 h2/h1 h1 h2 h2 Speed Index h1 h2 h2 h2 h1 h2/h1 h2/h1 h2 Site1b DocComplete h2/h1 h2 h2 h2 h1 h2 h1 h2/h1 DCL Start h1 h2 h1 h1 h1 h2/h1 h1 h1 Speed Index h1 h2 h2 h1 h1 h2/h1 h1 h1 Site1c DocComplete h1/h2 h2 h2 h2 h1 h1 h1 h1 DCL Start h1 h1/h2 h1 h1 h1 h2 h1 h1 Speed Index h2 h2 h1 h2 h1 h2 h1 h1 Site2a DocComplete h2 h2 h2 h2 h1 h2/h1 h1 h1 DCL Start h2 h2 h2 h2 h1 h1 h1 h1 Speed Index h1 h2 h1 h2 h1 h2 h1 h2 Site2b DocComplete h2 h2 h2 h2 h1 h1/h2 h1 h1 DCL Start h2 h2 h1 h2 h1 h2 h1 h2 Speed Index h2 h1/h2 h1 h1/h2 h2 h2 h1 h1 Site3a DocComplete h2 h2 h1 h2 h2 h2 h1 h1 DCL Start h2 h2 h2 h2 h2 h2 h2 h2 Speed Index h2 h2 h1 h1 h1/h2 h1/h2 h1 h1 Site3b DocComplete h2 h2 h2 h1/h2 h2 h2/h1 h2 h2 DCL Start h2 h2 h2 h2 h2 h2 h2 h2 Speed Index h1 h2 h1 h1 h1 h2 h1 h1 Site3c DocComplete h1 h2 h2 h2 h1 h2 h2 h2 DCL Start h1/h2 h2 h1 h1/h2 h2/h1 h2 h1 h2/h1 Speed Index h1 h2 h2 h2 h2 h2 h2 h2
  75. 75. 0% PLR 2% PLR 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms Site1a (Fastly) DocComplete h2 h2 h2 h1 h1 h1 h1 h1 DCL Start h2 h1 h2 h2 h2/h1 h1 h2 h2 Speed Index h1 h2 h2 h2 h1 h2/h1 h2/h1 h2 Site1b DocComplete h2/h1 h2 h2 h2 h1 h2 h1 h2/h1 DCL Start h1 h2 h1 h1 h1 h2/h1 h1 h1 Speed Index h1 h2 h2 h1 h1 h2/h1 h1 h1 Site1c DocComplete h1/h2 h2 h2 h2 h1 h1 h1 h1 DCL Start h1 h1/h2 h1 h1 h1 h2 h1 h1 Speed Index h2 h2 h1 h2 h1 h2 h1 h1 Site2a DocComplete h2 h2 h2 h2 h1 h2/h1 h1 h1 DCL Start h2 h2 h2 h2 h1 h1 h1 h1 Speed Index h1 h2 h1 h2 h1 h2 h1 h2 Site2b DocComplete h2 h2 h2 h2 h1 h1/h2 h1 h1 DCL Start h2 h2 h1 h2 h1 h2 h1 h2 Speed Index h2 h1/h2 h1 h1/h2 h2 h2 h1 h1 Site3a DocComplete h2 h2 h1 h2 h2 h2 h1 h1 DCL Start h2 h2 h2 h2 h2 h2 h2 h2 Speed Index h2 h2 h1 h1 h1/h2 h1/h2 h1 h1 Site3b DocComplete h2 h2 h2 h1/h2 h2 h2/h1 h2 h2 DCL Start h2 h2 h2 h2 h2 h2 h2 h2 Speed Index h1 h2 h1 h1 h1 h2 h1 h1 Site3c DocComplete h1 h2 h2 h2 h1 h2 h2 h2 DCL Start h1/h2 h2 h1 h1/h2 h2/h1 h2 h1 h2/h1 Speed Index h1 h2 h2 h2 h2 h2 h2 h2
  76. 76. 0% PLR 2% PLR 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms Site1a (Fastly) DocComplete h2 h2 h2 h1 h1 h1 h1 h1 DCL Start h2 h1 h2 h2 h2/h1 h1 h2 h2 Speed Index h1 h2 h2 h2 h1 h2/h1 h2/h1 h2 Site1b DocComplete h2/h1 h2 h2 h2 h1 h2 h1 h2/h1 DCL Start h1 h2 h1 h1 h1 h2/h1 h1 h1 Speed Index h1 h2 h2 h1 h1 h2/h1 h1 h1 Site1c DocComplete h1/h2 h2 h2 h2 h1 h1 h1 h1 DCL Start h1 h1/h2 h1 h1 h1 h2 h1 h1 Speed Index h2 h2 h1 h2 h1 h2 h1 h1 Site2a DocComplete h2 h2 h2 h2 h1 h2/h1 h1 h1 DCL Start h2 h2 h2 h2 h1 h1 h1 h1 Speed Index h1 h2 h1 h2 h1 h2 h1 h2 Site2b DocComplete h2 h2 h2 h2 h1 h1/h2 h1 h1 DCL Start h2 h2 h1 h2 h1 h2 h1 h2 Speed Index h2 h1/h2 h1 h1/h2 h2 h2 h1 h1 Site3a DocComplete h2 h2 h1 h2 h2 h2 h1 h1 DCL Start h2 h2 h2 h2 h2 h2 h2 h2 Speed Index h2 h2 h1 h1 h1/h2 h1/h2 h1 h1 Site3b DocComplete h2 h2 h2 h1/h2 h2 h2/h1 h2 h2 DCL Start h2 h2 h2 h2 h2 h2 h2 h2 Speed Index h1 h2 h1 h1 h1 h2 h1 h1 Site3c DocComplete h1 h2 h2 h2 h1 h2 h2 h2 DCL Start h1/h2 h2 h1 h1/h2 h2/h1 h2 h1 h2/h1 Speed Index h1 h2 h2 h2 h2 h2 h2 h2
  77. 77. 0% PLR 2% PLR 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms Site1a (Fastly) DocComplete h2 h2 h2 h1 h1 h1 h1 h1 DCL Start h2 h1 h2 h2 h2/h1 h1 h2 h2 Speed Index h1 h2 h2 h2 h1 h2/h1 h2/h1 h2 Site1b DocComplete h2/h1 h2 h2 h2 h1 h2 h1 h2/h1 DCL Start h1 h2 h1 h1 h1 h2/h1 h1 h1 Speed Index h1 h2 h2 h1 h1 h2/h1 h1 h1 Site1c DocComplete h1/h2 h2 h2 h2 h1 h1 h1 h1 DCL Start h1 h1/h2 h1 h1 h1 h2 h1 h1 Speed Index h2 h2 h1 h2 h1 h2 h1 h1 Site2a DocComplete h2 h2 h2 h2 h1 h2/h1 h1 h1 DCL Start h2 h2 h2 h2 h1 h1 h1 h1 Speed Index h1 h2 h1 h2 h1 h2 h1 h2 Site2b DocComplete h2 h2 h2 h2 h1 h1/h2 h1 h1 DCL Start h2 h2 h1 h2 h1 h2 h1 h2 Speed Index h2 h1/h2 h1 h1/h2 h2 h2 h1 h1 Site3a DocComplete h2 h2 h1 h2 h2 h2 h1 h1 DCL Start h2 h2 h2 h2 h2 h2 h2 h2 Speed Index h2 h2 h1 h1 h1/h2 h1/h2 h1 h1 Site3b DocComplete h2 h2 h2 h1/h2 h2 h2/h1 h2 h2 DCL Start h2 h2 h2 h2 h2 h2 h2 h2 Speed Index h1 h2 h1 h1 h1 h2 h1 h1 Site3c DocComplete h1 h2 h2 h2 h1 h2 h2 h2 DCL Start h1/h2 h2 h1 h1/h2 h2/h1 h2 h1 h2/h1 Speed Index h1 h2 h2 h2 h2 h2 h2 h2
  78. 78. 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
  79. 79. PLR in the real world
  80. 80. 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/
  81. 81. Now what?
  82. 82. 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
  83. 83. Don’t listen to anyone!!
  84. 84. Don’t listen to anyone!!
  85. 85. https://speakerdeck.com/patrickhamann/http2-what-where-why-and-when-smashing-conference-march-2016
  86. 86. https://speakerdeck.com/patrickhamann/http2-what-where-why-and-when-smashing-conference-march-2016
  87. 87. https://github.com/fastlyhoo/wpt_h1vsh2
  88. 88. https://github.com/fastlyhoo/wpt_h1vsh2
  89. 89. QUIC
  90. 90. Server push
  91. 91. 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
  92. 92. SETTINGS
  93. 93. PUSH_PROMISE
  94. 94. 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=2 GET /css1.css <request headers> DATA (sid=1) DATA (sid=1) DATA (sid=1)HEADERS (sid=1)
  95. 95. 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
  96. 96. No push – first view
  97. 97. No push – repeat view
  98. 98. Push – first view Pushed
  99. 99. Push – repeat view Pushed
  100. 100. Use cases
  101. 101. Essential resources for this page •  Similar to <Link rel=“preload”> •  Save 1xRTT
  102. 102. Push: No Push:
  103. 103. 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
  104. 104. 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
  105. 105. Next navigation? h$ps://w3c.github.io/resource-hints/
  106. 106. 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
  107. 107. Other use cases? h$ps://www.facebook.com/atscaleevents/videos/1775942979345465/
  108. 108. HPACK
  109. 109. HPACK (RFC 7541) •  Addresses the header bloat problem •  Two primary mechanisms –  All headers (name=value) are Huffman encoded –  Indexed tables at each peer
  110. 110. Tables •  Static table –  Defined by the RFC, never changes •  Dynamic table –  Built during the connection and maintained by each side –  FIFO
  111. 111. +-------+-----------------------------+---------------+ | 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
  112. 112. Performance benefits
  113. 113. Performance benefits Bytes BrowseràServer
  114. 114. Performance benefits Bytes BrowseràServer Bytes BrowseràServer
  115. 115. https://blogs.dropbox.com/tech/2016/05/enabling-http2-for-dropbox-web-services-experiences-and-observations/
  116. 116. 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
  117. 117. 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;
  118. 118. 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
  119. 119. 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
  120. 120. Tools and resources
  121. 121. http://chimera.labs.oreilly.com/books/1230000000545
  122. 122. 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/
  123. 123. Chrome DevTools
  124. 124. Chrome net-internals
  125. 125. wireshark Using the TLS key file: h$ps://jimshaver.net/2015/02/11/decrypMng-tls-browser-traffic-with-wireshark-the-easy-way/
  126. 126. cURL
  127. 127. https://nghttp2.org/ nghttp
  128. 128. 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
  129. 129. 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!
  130. 130. Thank you!
  • takeakitsutsumi

    Mar. 2, 2020
  • ekarulf

    Feb. 20, 2020
  • ssuser0122a7

    Nov. 28, 2019
  • kunkunur

    Aug. 10, 2019
  • pubuduf

    Dec. 11, 2018
  • ssuser8d443b

    Nov. 28, 2018
  • ssuserdb8963

    Jul. 13, 2018
  • BradZhang2

    May. 17, 2018
  • hyunjujin

    Mar. 15, 2018
  • nipotan

    Mar. 3, 2018
  • MarkGuevarra3

    Sep. 18, 2017
  • KeiNakamura2

    Aug. 23, 2017
  • jaredjin

    May. 9, 2017
  • PradipKumarPathy

    May. 5, 2017
  • hyuntaeklee399

    May. 5, 2017
  • morbid

    May. 4, 2017
  • blade74

    Apr. 20, 2017
  • ssuserc19b3d

    Apr. 18, 2017
  • thenickberry

    Mar. 29, 2017
  • sssjavie007

    Mar. 29, 2017

HTTP/2 (or “H2” as the cool kids call it) has been ratified for months, and browsers already support or have committed to supporting the protocol. Everything we hear tells us that the new version of HTTP will provide significant performance benefits while requiring little to no change to our applications—all the problems with HTTP/1.x have seemingly been addressed; we no longer need the “hacks” that enabled us to circumvent them; and the Internet is about to be a happy place at last. But maybe we should put the pom-poms down for a minute. Deploying HTTP/2 may not be as easy as it seems since the protocol brings with it new complications and issues. Likewise, the new features the spec introduces may not work as seamlessly as we hope. Hooman Beheshti examines HTTP/2’s core features and how they relate to real-world conditions, discussing the positives, negatives, new caveats, and practical considerations for deploying HTTP/2. Topics include: The single-connection model and the impact of degraded network conditions on HTTP/2 versus HTTP/1 How server push interacts (or doesn’t) with modern browser caches What HTTP/2’s flow control mechanism means for server-to-client communication New considerations for deploying HPACK compression Difficulties in troubleshooting HTTP/2 communications, new tools, and new ways to use old tools

Views

Total views

16,569

On Slideshare

0

From embeds

0

Number of embeds

774

Actions

Downloads

254

Shares

0

Comments

0

Likes

41

×