Introduction to the H2O HTTP/2 server, and discusses the improvements in first-paint time from previous generation protocols

1. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
H2O
making the Web faster
DeNA Co., Ltd.
Kazuho Oku
1

2. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
Agenda
n How H2O started
n The Goal and Key Features
n Improving User Experience with HTTP/2
2
H2O -‐‑‒ making the Web faster (Jun 2 2015)

3. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
How H2O Started
3
H2O -‐‑‒ making the Web faster (Jun 2 2015)

4. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
About H2O
n H2O is a HTTP server
⁃ debut in late 2014
⁃ supports HTTP/1 and HTTP/2
⁃ known for its performance
⁃ developed by DeNA Co., Ltd. and contributors
"H2O is a new blazingly fast HTTP server with http2
support that shows potential"
– http2 explained by Daniel Stenberg
4
H2O -‐‑‒ making the Web faster (Jun 2 2015)

5. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
Benchmark
5
H2O -‐‑‒ making the Web faster (Jun 2 2015)

6. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
PicoHTTPParser
n originally written for HTTP::Parser::XS
⁃ the de-‐‑‒facto HTTP parser of Plack servers
n the core of H2O
6
H2O -‐‑‒ making the Web faster (Jun 2 2015)

7. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
Design philosophy of H2O
n Do it right, from the ground up
n design wins lead to higher performance with less
code
7
H2O -‐‑‒ making the Web faster (Jun 2 2015)
$ wc picohttpparser.[hc]
596 2077 22192 picohttpparser.c
86 495 3363 picohttpparser.h
682 2572 25555 total
$ wc http_parser.[hc]
2434 7281 70424 http_parser.c
342 1567 12991 http_parser.h
2776 8848 83415 total

8. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
High-‐‑‒level architecture of H2O
n event-‐‑‒driven
⁃ can handle many connections concurrently
n multi-‐‑‒thread
⁃ states and upstream (reverse-‐‑‒proxy) connections
are reused
• impossible under a multi-‐‑‒process design
n multi-‐‑‒protocol
⁃ designed for HTTP/2 and TLS
8
H2O -‐‑‒ making the Web faster (Jun 2 2015)

9. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
The Goal and Key Features
9
H2O -‐‑‒ making the Web faster (Jun 2 2015)

10. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
The goal of H2O is to provide...
n better performance
⁃ demand for handling more requests:
• IoT, micro-‐‑‒services, etc.
n better user experience
⁃ faster content delivery using HTTP/2
n ease to use and configure
⁃ TLS (OCSP stapling, record size tuning,
chacha20/poly1305, ...)
⁃ dynamic reconfiguration
10
H2O -‐‑‒ making the Web faster (Jun 2 2015)

11. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
Key features of H2O
n excellent protocol implementation
⁃ very fast HTTP/1
⁃ one of the leading implementations of HTTP/2
n optimally configured for HTTPS
⁃ enabled by default: OCSP stapling, record size
tuning, chacha20/poly1305, ...
⁃ bundles libressl (hopefully lesser security issues)
n graceful restart and self upgrade via Server::Starter
11
H2O -‐‑‒ making the Web faster (Jun 2 2015)

12. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
Key features of H2O (cont'd)
n state-‐‑‒of-‐‑‒art reverse proxy
⁃ use of PicoHTTPParser leads to performance
⁃ reuses connections with a server-‐‑‒wide
connection pool
⁃ X-‐‑‒Reproxy-‐‑‒URL support
• can do both: backend-‐‑‒to-‐‑‒backend and backend-‐‑‒to-‐‑‒
local
⁃ DNS lookup
• backend servers can be added / removed by
updating DNS or /etc/hosts
12
H2O -‐‑‒ making the Web faster (Jun 2 2015)

13. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
Improving User Experience with H2O & HTTP/2
13
H2O -‐‑‒ making the Web faster (Jun 2 2015)

14. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
Issues of HTTP/1 fixed by HTTP/2
n head-‐‑‒of-‐‑‒line blocking
⁃ using multiple TCP connections had performance
issues due to slow-‐‑‒start / too little concurrency
n prioritized resource loading
⁃ load assets that block rendering (e.g. CSS, JS)
before images
14
H2O -‐‑‒ making the Web faster (Jun 2 2015)

15. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
Prioritization in HTTP/2
n weight-‐‑‒based and dependency-‐‑‒based
⁃ weight-‐‑‒based: 75% of bandwidth to A, 25% to B
⁃ dependency-‐‑‒based: send HTML after JavaScript
n Firefox is known for its state-‐‑‒of-‐‑‒art protocol impl.
⁃ send CSS and JavaScript files in <HEAD> before
HTML and/or image files
⁃ HTML is given 2.5x bandwidth above images
n Chrome uses weight-‐‑‒based only
⁃ adapted from its SPDY implementation
15
H2O -‐‑‒ making the Web faster (Jun 2 2015)

16. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
The benchmark
n test data: http2rulez.com
⁃ loads 5 CSS and 8 JavaScript files in <HEAD>
• including minified jquery.js
⁃ loads 18 non-‐‑‒blocking asset files (e.g. images),
both small and large
n network is given 100ms latency
⁃ uses a virtual network to avoid noise
n web browsers: Chrome 43 / Firefox 38
n servers: H2O 1.3.0-‐‑‒alpha1 / Nginx 1.9.1
⁃ on Ubuntu 14.04 (on VMware fusion)
16
H2O -‐‑‒ making the Web faster (Jun 2 2015)

17. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
Nginx (HTTP/1.1) + Chrome
17
H2O -‐‑‒ making the Web faster (Jun 2 2015)
first-‐‑‒paint time: 1.83 seconds

18. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
Nginx (SPDY/3.1) + Chrome
18
H2O -‐‑‒ making the Web faster (Jun 2 2015)
first-‐‑‒paint time: 1.89 seconds

19. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
H2O (HTTP/2) + Chrome
19
H2O -‐‑‒ making the Web faster (Jun 2 2015)
first-‐‑‒paint time: 1.87 seconds

20. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
Why not faster with HTTP/2?
n Because Chrome (does not) prioritize CSS / script
files above images
n upcoming version of H2O provides a configuration
directive http2-‐‑‒reprioritize-‐‑‒blocking-‐‑‒assets to tackle
the issue
⁃ when set to ON, the server sends CSS / scripts
before anything else
20
H2O -‐‑‒ making the Web faster (Jun 2 2015)

21. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
H2O (HTTP/2+reprioritize:ON) + Chrome
21
H2O -‐‑‒ making the Web faster (Jun 2 2015)
first-‐‑‒paint time: 1.32 seconds

22. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
Nginx (HTTP/1.1) + Firefox
22
H2O -‐‑‒ making the Web faster (Jun 2 2015)
first-‐‑‒paint time: 1.32 seconds

23. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
Nginx (SPDY/3.1) + Firefox
23
H2O -‐‑‒ making the Web faster (Jun 2 2015)
first-‐‑‒paint time: 1.87 seconds

24. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
H2O (HTTP/2) + Firefox
24
H2O -‐‑‒ making the Web faster (Jun 2 2015)
first-‐‑‒paint time: 1.03 seconds

25. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
The benchmark scores
25
H2O -‐‑‒ making the Web faster (Jun 2 2015)

26. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
Analysis
n H2O (HTTP/2) is 50% faster in first-‐‑‒paint time
than Nginx (HTTP/1.1) on both browsers
⁃ Chrome needs the reprioritize directive set to ON
n Nginx (SPDY/3.1) is not faster than HTTP/1.1, likely
because it does not prioritize the streams
⁃ on Firefox, HTTP/1.1 is faster than SPDY/3.1
since the browser delays sending requests for
images until receiving all the blocking assets
26
H2O -‐‑‒ making the Web faster (Jun 2 2015)

27. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
Conclusion
n H2O (and HTTP/2) provides better user experience
⁃ esp. under high-‐‑‒latency network (e.g. mobile)
n prioritization is very important in SPDY & HTTP/2
⁃ benchmark your HTTP/2 server!
⁃ on the client-‐‑‒side, Firefox is doing very well
• Chrome needs improvement, H2O provides a fix
27
H2O -‐‑‒ making the Web faster (Jun 2 2015)

28. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
What's coming to H2O
n Version 1.3
⁃ expected this week?
⁃ http2-‐‑‒reprioritize-‐‑‒blocking-‐‑‒assets for better user
experience on Chrome
⁃ preliminary support for FastCGI
n Version 1.4 and beyond
⁃ ease-‐‑‒of-‐‑‒use features
28
H2O -‐‑‒ making the Web faster (Jun 2 2015)

29. Copyright
(C)
2015
DeNA
Co.,Ltd.
All
Rights
Reserved.
Stay Tuned!
29
H2O -‐‑‒ making the Web faster (Jun 2 2015)