The new HTTP/2 protocol which is going to replace HTTP 1.1 was finished on February. Together with it, QUIC is being developed rapidly. Discover why are they so important for the Web and how will they influence the way we optimize the Web stack for the HTTP/2 era.

1. HTTP/2 and QUIC protocols
@ipeychev
Optimizing the Web stack for HTTP/2 era

2. Why a new version of
HTTP protocol?
v2

3. HTTP has been in use by the World-Wide Web
global information initiative since 1990
Browser sends request to the server
Server responds
GET /index.html HTTP/1.1
HTTP/1.1 200 OK

4. The number of requests per page increases
HTTP Archive
Top 100 sites
data for
15.11.2010 - 1.04.2015

5. HTTP 1.1 has issues

6. Optional parts, like
HTTP Pipelining
It is very latency
sensitive
The specification
is huge
HTTP 1.1 issues
and more...

7. First page load is latency bound

8. Latency is the constraining factor for
today’s applications

9. Latency vs bandwidth
Ilya Grigorik
Developer Advocate, Google

10. What could be the solution?

11. HTTP pipelining?
WikipediA
The free Encyclopedia

12. HTTP pipelining

13. Why not HTTP Pipelining?
The server must send its responses in the same order that
requests were received
So the entire connection remains first-in-first-out (FIFO)
and Head-of-line (HOL) blocking can occur
and more, like buggy proxy servers

14. In most browsers HTTP pipelining is disabled
Or not implemented at all
Browsers achieve multiplexing by opening multiple connections
to servers
As a result...

15. Developer workarounds

16. Image sprites1
Sharding2
Resource inlining3
Developers invented workarounds

17. Concatenating files4
Combo services5
Preloading resources6
Developers invented workarounds

18. Reducing cookie size7
Using cookie-free domains8
Using <link> instead of @import9
Developers invented workarounds

19. Pack components into a multipart document
(like email with attachments)
10
Developers invented workarounds

20. A whole industry has
been created to deal with
web site performance

22. Welcome to HTTP/2

23. HTTP/2 in a nutshell

24. Wednesday, 18 February 2015
Status: Done

25. HTTP/2 fixes issues in HTTP 1.1
without breaking the web

26. Using
HTTP Upgrade
mechanism
HTTP
How browser switches to HTTP/2
GET / HTTP/1.1
Host: server.example.com
Connection: Upgrade, HTTP2-Settings
Upgrade: h2c
HTTP2-Settings: <base64url encoding of HTTP/2 SETTINGS payload>

27. HTTPS
How browser switches to HTTP/2
ALPN
Using
Application Layer
Protocol Negotiation
extension

28. HTTP/2 features

29. HTTP/2 Features
It is a binary protocol, not text one
Browser and server exchange frames
Each frame belongs to stream
Streams are multiplexed, with priorities
Server push

30. ONE connection to the server should be enough
(not six connections per domain as most browsers do now)
HTTP/2 Features

31. Frames

32. Frame format
+-----------------------------------------------+
| Length (24) |
+---------------+---------------+---------------+
| Type (8) | Flags (8) |
+-+-------------+---------------+-------------------------------+
|R| Stream Identifier (31) |
+=+=============================================================+
| Frame Payload (0...) ...
+---------------------------------------------------------------+

33. Frame types
DATA Convey arbitrary data associated with a stream
HEADERS Used to open a stream and carries name-value pairs
PRIORITY Specifies the sender-advised priority of a stream
RST_STREAM Allows abnormal termination of a stream
SETTINGS
Conveys configuration parameters that affect how endpoints
communicate

34. Frame types
PUSH_PROMISE
Used to notify the peer endpoint in advance of streams the sender
intends to initiate
PING
Measuring a minimal round-trip time from the sender; checks if a
connection is still alive
GOAWAY Informs the remote peer to stop creating streams on this connection
WINDOW_UPDATE
Used to implement flow control on each individual stream or on the
entire connection.
CONTNUATION Used to continue a sequence of header block fragments

35. Streams

36. Stream
Logical, bi-directional sequence of frames.

37. Streams
One single connection - multiple open streams.

38. Priorities and dependencies

39. Stream priority
Each stream has priority
Specified by the client (browser)
Priority can be changed runtime

40. Stream dependencies
A stream can depend on another one.
A
B C
D

41. Stream dependencies
A
B C
D
A stream can depend on another one.

42. Headers

43. Header compression
HTTP/2 is stateless protocol too
The client still has to send data to the server
The headers in HTTP/2 are compressed

44. Header compression
Stateful
One compression context and one
decompression context is used for the
entire connection
The algorithm is called HPACK (Header
Compression for HTTP/2)

45. Header compression
HPACK has been invented because
of attacks like CRIME and BREACH

46. Server push
(we did that for years)

47. Server push
Server pre-emptively sends resources to a client,
in association with a previous client-initiated
request

48. Server push
The client explicitly must allow it
A client cannot push

49. HTTP/2 implementations

50. Server implementations
Plenty of, grab one and start
experimenting!

51. On the server

52. Browser implementations
Internet Explorer supports HTTP/2 from IE 11 on Windows 10 beta
Firefox has enabled HTTP/2 by default in version 34
Chrome supports HTTP/2, enabled by default. Chrome Canary supports
identifying servers using the latest draft (h2-17)
Opera supports HTTP/2 by default
(does someone know anything about Safari?)
Currently only HTTP/2 over TLS is implemented in all browsers

53. QUIC protocol

54. QUIC Features
Natural extension of SPDY and HTTP/2 research
Multiplexing transport protocol
Runs on top of UDP

55. Why not SCTP over DTLS?
After all, SCTP provides (among other things) stream
multiplexing
And DTLS provides SSL quality encryption and
authentication over a UDP stream

56. Why not SCTP over DTLS?
Mainly because roughly 4 round trips are needed to
establish an SCTP over DTLS connection
In contrast, the goal of QUIC is to perform a connection
establishment with zero RTT overhead

57. Goal: 0-RTT (round-trip time) connectivity
overhead
Has all the benefits of SPDY and HTTP/2
QUIC Features
but...

58. QUIC Features
No head-of-line blocking in QUIC!

59. QUIC Features
Delay of only one packet causes the entire set of
SPDY (aka HTTP/2) streams to pause.
(Since TCP only provides a single serialized stream interface)
In QUIC, when a single packet is lost,
only one stream is being delayed

60. QUIC Features
No head-of-line blocking in QUIC!

61. QUIC Features
100 ms
0 ms RTTRepeat connection
New connection
QUIC TCP + TLS
300 ms
200 ms RTTRepeat connection
New connection

62. QUIC Encryption
Comparable to TLS, with more efficient handshake
Replay attack and IP Spoofing protection

63. QUIC Forward error correction

64. QUIC Internet connections persistence
Communication channels are not defined by IP
+Port but by an ID
You leave a WiFi zone and entering a mobile one
but the connection continues

65. Optimizing the Web stack
for HTTP/2 era

66. Optimize the content being
served to the browser

67. Minimizing JavaScript, CSS and HTML files1
Removing redundant data from images2
Optimize Critical Path CSS3
Optimize the content sent to the brower

68. Removing the CSS which is not needed on the page4
Specifying ETag and setting far future expires headers5
Using HTML 5 offline to store already downloaded files6
Optimize the content sent to the brower

69. Optimize the server and TCP stack

70. Set the value of TCP’s initial cwnd to 10 segments (IW10)1
Disable Slow-Start Restart after idle2
Check and enable if needed Window Scaling3
Optimize the content sent to the browser
Consider to use TCP Fast Open (TFO)4

71. Consider to remove some
"optimizations"

72. Joining files1
Domain sharding2
Resource inlining3
Remove some "optimizations"
Image sprites4
Combo services5
Cookie free domains6

73. Thank you!
ipeychev