1. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
ウェブを速くするために
DeNAがやっていること
HTTP/2と、さらにその先
DeNA Co., Ltd.
Kazuho Oku
1
2. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
DeNAは○○の会社
2ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
3. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
DeNAはウェブの会社
3ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
4. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
DeNAはウェブの会社
ウェブ技術を使ったサービス群
⁃ Mobage
⁃ DeNAショッピング・モバオク
⁃ DeNA Palette
⁃ …
スマホアプリも HTTP や WebView を使用
4ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
5. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
DeNAはウェブの会社
(まあ、だいたい)
5ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
6. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
ウェブ基盤技術の研究開発
6ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
7. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
ウェブ基盤技術の研究開発
2種類のアプローチ
⁃ スループットの最適化
⁃ レスポンスタイムの高速化
メリットは何?
7ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
8. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
スループットの最適化=コスト削減
HandlerSocket
⁃ DeNA の樋口が開発
⁃ MySQL Conference Community Awards 2011 受賞
HandlerSocket とは?
⁃ MySQL サーバむけ KVS プロトコル実装
⁃ 単純なクエリに SQL を使わないことにより、大量の
接続を高速に処理
⁃ 効果:
• スレーブ台数とネットワーク負荷を削減
• サーバが数千台規模だと、削減コスト>>開発費
8ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
9. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
レスポンスタイム削減=売上増大
9ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
出典: http://radar.oreilly.com/2009/06/bing-and-google-agree-slow-pag.html
10. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
本日のテーマ
HTTP/2 の基本
HTTP/2 の最適化
⁃ レスポンスタイム最適化
⁃ スループット最適化
H2O と他ソフトウェアの実装の話を織り交ぜつつ
10ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
12. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
HTTP/2 誕生の背景
12ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
13. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
転送データ量は増大中
13ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
出典: http://httparchive.org/trends.php?s=All&minlabel=Aug+1+2011&maxlabel=Aug+1+2015#bytesTotal&reqTotal
14. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
バンド幅も増大中
エンドユーザのバンド幅は年率50%で増加(ニールセン
の法則)
14ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
出典: http://www.nngroup.com/articles/law-of-bandwidth/
15. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
未来はバラ色?
15ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
16. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
ページロード時間はバンド幅に比例しない
16ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
出典: More Bandwidth Doesn't Matter - 2011 Mike Belshe (Google)
※実効バンド幅は1.6Mbps程度で頭打ちに
17. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
ページロードはレイテンシが小さいほど速い
17ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
出典: More Bandwidth Doesn't Matter - 2011 Mike Belshe (Google)
18. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
Why?
18ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
19. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
HTTP/1.1は多重性がない
19ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
RTT
request
response
request
response
client server
…
RTT
HTTP/1.1では、1RTTあたり1リクエスト/レスポンスし
か送受信できない
⁃ RTT=ラウンドトリップタイム
• レイテンシの大きさを表す値
緩和策:複数のTCP接続を使う
⁃ 同時6本が一般的
• 1RTTあたり6リクエスト!!!
• それでも遅い
20. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
HTTP/1.1パイプラインの問題
20ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
RTT
requests
responses
client server
仕様上、レスポンス受信前に次のリクエストを送信可能
問題:
⁃ 切断時に、レスポンス未受信のリクエストを再送信し
ていいかわからない
• サーバが同じリクエストを複数回処理する可能性
⁃ 先行リクエストの処理に時間がかかると後続が詰まる
(head-of-line blocking)
⁃ バグのあるサーバ実装が多い
21. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
レイテンシは今後も小さくならない
光の速度はかわらない
⁃ アメリカまで光ファイバーで往復すれば80ミリ秒
携帯回線はレイテンシが大きい
⁃ LTE ~ 50ms
21ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
22. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
やばい!ウェブが遅くなってきた!
22ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
23. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
どうしよう?
23ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
24. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
解決策:レイテンシに負けないプロトコルを作る
24ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
25. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
HTTP/2!
25ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
26. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
HTTP/2
RFC 7540 (2015/5)
⁃ Google の QUIC プロトコルの実験を参考に規格化
基本的な技術要素
⁃ バイナリプロトコル
⁃ 多重化
⁃ ヘッダ圧縮
26ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
62. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
H2O による優先度の書き換え
クライアントが依存関係ツリーを構築しない場合に
レンダリングをブロックしそうな content-type のレス
ポンスを最優先で配信
62ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
Root
HTML
weight: 16
CSS
weight: max
JS
weight: max
Image
weight: 16
Image
weight: 16
Image
weight: 16
(internal root)
63. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
H2O の reprioritize-blocking-assets オプション
first paint が大幅に改善
63ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
0 0.5 1 1.5 2 2.5 3
Nginx (HTTP/1.1)
Nginx (SPDY/3.1)
H2O (HTTP/2)
H2O+repriori ze (HTTP/2)
Chrome/43
Download Timing (unit: seconds, latency: 100ms)
first paint load complete
64. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
優先度制御まとめ
ユーザの体感速度を大幅に向上させる技術
⁃ first-paint time が改善するため
クライアント側:
⁃ Firefox – すばらしい
⁃ 他のWebブラウザ – 要改善
サーバ側:
⁃ 実装状況がまちまち
⁃ H2O は Firefox 以外のブラウザむけの最適化も実装
64ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
65. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
サーバプッシュ
65ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
66. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
サーバプッシュ
HTTP/2はRTTを隠蔽する技術
でも、1RTT(リクエストを投げてからレスポンスを受け
取るまで)は絶対かかるよね?
それ、0RTTでできるよ!
⁃ サーバが、クライアントの発行するリクエストを予測
して、レスポンスをプッシュすればいい
※これ以外の目的でも使える技術ですが、今回はウェブブラ
ウザのレスポンスタイムに絞った議論をします
66ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
67. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
サーバプッシュ
例: RTT=50ms, アプリサーバの処理時間=200ms
67ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
req.
processrequest
push-asset
HTML
push-asset
push-asset
push-asset
req.
processrequest
asset
HTML
asset
asset
asset
req.
450ms(5RTT+processingme)
250ms(1RTT+processingme)
without push with push
68. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
サーバプッシュ
CDNによるウェブ高速化にも応用可能
⁃ アプリサーバの応答を待つ間も回線を有効活用可能
⁃ アプリ提供者は、その分、アプリサーバの設置拠点を
減らすことが可能に
68ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
req.
push-asset
HTML
push-asset
push-asset
push-asset
client edge server (CDN) app. server
req.
HTML
69. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
サーバプッシュ
実用にむけた課題:
⁃ (クライアントに頼らない)優先度制御
⁃ プッシュの起動方法
⁃ ブラウザキャッシュとの兼ね合い
69ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
70. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
サーバプッシュと優先度制御
RFC どおり実装してあっても、あまり役に立たない
⁃ プッシュされるレスポンスは、プッシュを
起動したレスポンスに依存する形でスケ
ジュールされるから
H2O は、プッシュの mime-type を見て優先度を決定
⁃ reprioritize-blocking-assets と同様
70ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
HTML
weight: ??
CSS (pushed)
weight: 16
71. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
サーバプッシュの使い方 (1)
Link: rel=preload ヘッダ
⁃ アプリサーバが返す Link ヘッダを認識してプッシュ
HTTP/1.1 200 OK
Content-Type: text/html
Link: </style.css>; rel=preload # このヘッダ!!!
⁃ H2O, nghttpx (nghttp2), mod_h2 (Apache) が対応
⁃ 問題: アプリサーバが応答を返すまでプッシュ不可能
71ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
72. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
サーバプッシュの使い方 (2)
H2O では、アプリサーバへリクエストを転送する前にプ
ッシュを開始可能
# 1. mrubyハンドラでプッシュを開始 (Linkヘッダをセット)
mruby.handler: |
Proc.new do |env|
[399, { "Link" => "</style.css>; rel=preload" }, []]
end
# 2. リバースプロキシハンドラがアプリサーバにリクエストを転送
proxy.reverse.url: http://app.example.com:8080/
72ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
73. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved.
サーバプッシュ vs. ブラウザキャッシュ
キャッシュ済のファイルはプッシュしたくない
⁃ バンド幅(と場合によっては時間)のムダ
キャッシュの有無を判断する方法は?
⁃ ブラウザキャッシュ内の状況を確認するためにリクエ
スト/レスポンスを送信してはいけない
• そのために1RTTかかるとプッシュのメリットがなくなる
73ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先