HTTP/2時代のウェブサイト設計

Transcript of "HTTP/2時代のウェブサイト設計"

1. 1. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   HTTP/2時代のウェブサイト設計 DeNA  Co.,  Ltd. Kazuho  Oku 1  
2. 2. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   ウェブサイトと応答速度度 2  HTTP/2時代のウェブサイト設計
3. 3. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   応答速度度重要 3  HTTP/2時代のウェブサイト設計 出典:  h>p://radar.oreilly.com/2009/06/bing-­‐and-­‐google-­‐agree-­‐slow-­‐pag.html
4. 4. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   転送データ量量は増⼤大中 4  HTTP/2時代のウェブサイト設計 出典:  h>p://h>parchive.org/trends.php?s=All&minlabel=Aug+1+2011&maxlabel=Aug+1+2015#bytesTotal&reqTotal
5. 5. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   バンド幅も増⼤大中 n  エンドユーザのバンド幅は年年率率率50%で増加（ニールセン の法則） 5  HTTP/2時代のウェブサイト設計 出典:  h>p://www.nngroup.com/arRcles/law-­‐of-­‐bandwidth/
6. 6. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   未来はバラ⾊色？ 6  HTTP/2時代のウェブサイト設計
7. 7. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   ページロード時間はバンド幅に⽐比例例しない 7  HTTP/2時代のウェブサイト設計 出典:  More  Bandwidth  Doesn't  Ma>er  -­‐  2011  Mike  Belshe  (Google) ※実効バンド幅は1.6Mbps程度度で頭打ちに
8. 8. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   ページロードはレイテンシが⼩小さいほど速い 8  HTTP/2時代のウェブサイト設計 出典:  More  Bandwidth  Doesn't  Ma>er  -­‐  2011  Mike  Belshe  (Google)
9. 9. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   Why? 9  HTTP/2時代のウェブサイト設計
10. 10. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   HTTP/1.1は多重性がない 10  HTTP/2時代のウェブサイト設計 RTT request response request response client server … RTT n  HTTP/1.1では、1RTTあたり1リクエスト/レスポンスし か送受信できない ⁃  RTT=ラウンドトリップタイム •  レイテンシの⼤大きさを表す値 n  緩和策:複数のTCP接続を使う ⁃  同時6本が⼀一般的 •  1RTTあたり6リクエスト!!! •  それでも遅い
11. 11. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   HTTP/1.1パイプラインの問題 11  HTTP/2時代のウェブサイト設計 RTT requests responses client server n  仕様上、レスポンス受信前に次のリクエストを送信可能 n  問題: ⁃  切切断時に、レスポンス未受信のリクエストを再送信し ていいかわからない •  サーバが同じリクエストを複数回処理理する可能性 ⁃  先⾏行行リクエストの処理理に時間がかかると後続が詰まる   (head-‐‑‒of-‐‑‒line  blocking) ⁃  バグのあるサーバ実装が多い
12. 12. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   レイテンシは今後も⼩小さくならない n  光の速度度はかわらない ⁃  アメリカまで光ファイバーで往復復すれば80ミリ秒 n  携帯回線はレイテンシが⼤大きい ⁃  LTE  ~∼  50ms 12  HTTP/2時代のウェブサイト設計
13. 13. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   やばい！ウェブが遅くなってきた！ 13  HTTP/2時代のウェブサイト設計
14. 14. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   どうしよう？ 14  HTTP/2時代のウェブサイト設計
15. 15. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   解決策：レイテンシに負けないプロトコルを作る 15  HTTP/2時代のウェブサイト設計
16. 16. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   HTTP/2! 16  HTTP/2時代のウェブサイト設計
17. 17. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   HTTP/2 n  RFC  7540  (2015/5) ⁃  Google  のSPDYプロトコルの実験を参考に規格化 n  技術要素 ⁃  バイナリプロトコル ⁃  多重化 ⁃  ヘッダ圧縮 ⁃  優先度度制御 ⁃  サーバプッシュ 17  HTTP/2時代のウェブサイト設計
18. 18. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   バイナリプロトコルな理理由 n  脆弱性を防ぐ ⁃  HTTP  Request/Response  Splitting  Attack •  HTTP/1.1のパーサによる解釈の差をつく攻撃 n  転送データ量量の低減 ⁃  細かな粒粒度度でレスポンスの順序を変更更したい •  転送単位が⼩小さいなら、その単位毎につけるヘッダは⼩小さ くないといけない  →  バイナリにするしかない ⁃  ヘッダ圧縮 •  圧縮するんだから、どのみちバイナリ 18  HTTP/2時代のウェブサイト設計
19. 19. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   フレーム n  全ての通信データは、フレームに格納される ! +-----------------------------------------------+! | Length (24) |! +---------------+---------------+---------------+! | Type (8) | Flags (8) |! +-+-------------+---------------+-------------------------------+! |R| Stream Identifier (31) |! +=+=============================================================+! | Frame Payload (0...) ...! +---------------------------------------------------------------+! ! ※Stream Identifier: リクエスト／レスポンスの識別子 19  HTTP/2時代のウェブサイト設計
20. 20. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   様々なフレーム フレームタイプ Type   Number 機能 DATA 0 HTTPのボディ HEADERS 1 HTTPのリクエスト／レスポンスヘッダ PRIORITY 2 優先度度制御 RST_STREAM 3 リクエスト／レスポンスの中断 SETTINGS 4 設定情報の交換 PUSH_PROMISE 5 サーバプッシュの開始 PING 6 疎通確認 GOAWAY 7 切切断開始（最後に処理理したHTTPリクエストのIDを通知） WINDOW_UPDATE 8 レスポンス受信の⼀一時停⽌止 CONTINUATION 9 巨⼤大なヘッダ送信に使⽤用 20  HTTP/2時代のウェブサイト設計
21. 21. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   典型的な通信フロー （クライアントが送信） GET / HTTP/1.1! Host: example.com! User-Agent: MySuperClient/1.0! ! （サーバが送信）! HTTP/1.1 200 OK! Date: Thu, 20 Aug 2015 06:48:36 GMT! Server: Apache/2.2.29 (Unix)! Last-Modified: Wed, 12 Mar 2014 05:03:17…! ETag: "50b5e5-33a-4f461c1300f40"! Content-Length: 826! Content-Type: text/html! ! <html>! …! 21  HTTP/2時代のウェブサイト設計 HEADERSフレーム（クライアント送信）:! :method: GET! :scheme: https! :authority: example.com! :path: /! user-agent: MySuperClient/1.0! HEADERSフレーム（サーバ送信）:! :status: 200! date: Thu, 20 Aug 2015 06:48:36 GMT! server: Apache/2.2.29 (Unix)! last-modified: Wed, 12 Mar 2014 05:03:…! etag: "50b5e5-33a-4f461c1300f40"! content-length: 826! content-type: text/html! DATAフレーム（サーバ送信）:! <html>…
22. 22. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   デモ n  h2iコマンドを使⽤用 22  HTTP/2時代のウェブサイト設計
23. 23. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   HEADERS  (5) 多重化 n  同時に100以上のリクエストを発⾏行行可能 n  任意のタイミングでリクエスト送信可能 n  レスポンスの順序に制限なし n  レスポンスを織り交ぜ可能 ⁃  DATAのstream  IDを⾒見見よ 23  HTTP/2時代のウェブサイト設計 HEADERS  (stream  ID:1) client server HEADERS  (3) HEADERS  (1) DATA  (3) DATA  (1) DATA  (3) HEADERS  (5) HEADERS  (3) DATA  (1) DATA  (5) …
24. 24. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   ヘッダ圧縮  (1) n  HTTP/1.1のヘッダは⼤大きい ⁃  リクエスト: •  最低でも300バイト程度度 •  Google  Analytics使うとCookieで+200バイトなど ⁃  レスポンスも通常300バイト程度度 n  100個レスポンスを受け取るなら、それだけで30KB ⁃  レイテンシがなくなるなら、ヘッダサイズも⼩小さくし たい •  ⼤大量量に  304  Not  Modified  を返すこととかありますよね 24  HTTP/2時代のウェブサイト設計
25. 25. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   ヘッダ圧縮  (2) n  HPACK  (RFC  7541)  として規定 n  技術要素 ⁃  初⾒見見の⽂文字列列は、静的ハフマン圧縮 ⁃  ２回⽬目以降降は、前回出現時からのオフセットで表現 ⁃  頻出⽂文字列列は、固定テーブルのインデックスで表現 25  HTTP/2時代のウェブサイト設計
26. 26. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   ヘッダ圧縮  (3) n  想定例例: ⁃  https://example.com/  にアクセス ⁃  参照されている  /banner.jpg  と  /icon.png  をロード 26  HTTP/2時代のウェブサイト設計
27. 27. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   ヘッダ圧縮  (4) n  /  へのリクエスト 27  HTTP/2時代のウェブサイト設計 (圧縮前: 291バイト)! :method: GET! :scheme: https! :authority: example.com! :path: /! user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:40.0) Gecko/…! accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8! accept-language: ja,en-US;q=0.7,en;q=0.3! accept-Encoding: gzip, deflate (圧縮後: 147バイト)! 02 # :method: GET! 07 # :scheme: https! 41 88 2f 91 d3 5d 05 5c 87 a7 # :authority: example.com! 04 # :path: /! 7a bc d0 7f 66 a2 81 b0 da e0 53 ...(46 bytes) # user-agent: ...! 53 b0 49 7c a5 89 d3 4d 1f 43 ae ...(50 bytes) # accept: ...! 51 93 e8 3f a2 d4 b7 0d df 7d a0 ...(21 bytes) # accept-language: ...! 10 # accept-encoding: ...!
28. 28. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   ヘッダ圧縮  (5) n  /banner.jpg  へのリクエスト 28  HTTP/2時代のウェブサイト設計 (圧縮前: 300バイト)! :method: GET! :scheme: https ! :authority: example.com! :path: /banner.jp! user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:40.0) Gecko/…! accept: image/png,image/*;q=0.8,*/*;q=0.5! accept-language: ja,en-US;q=0.7,en;q=0.3! accept-encoding: gzip, deflate! referer: https://example.com/ (圧縮後: 62バイト)! 02 # :method: GET! 07 # :scheme: https! c1 # :authority: example.com! 44 89 62 31 d5 51 6c 5f a5 73 7f # :path: /banner.jpg! c1 # user-agent: ...! 53 9a 35 23 98 ac 57 54 df 46 a4 ...(28 bytes) #  accept: ...! c0 # accept-language: ...! 10 # accept-encoding: ...! 73 8f 9d 29 ad 17 18 60 be 47 4d ...(17 bytes) # referer: ...!
29. 29. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   ヘッダ圧縮  (6) n  /icon.png  へのリクエスト 29  HTTP/2時代のウェブサイト設計 (圧縮前: 298バイト)! :method: GET! :scheme: https ! :authority: example.com! :path: /icon.png! user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:40.0) Gecko/…! accept: image/png,image/*;q=0.8,*/*;q=0.5! accept-language: ja,en-US;q=0.7,en;q=0.3! accept-encoding: gzip, deflate! referer: https://example.com/ (圧縮後: 17バイト)! 02 # :method: GET! 07 # :scheme: https! c4 # :authority: example.com! 44 87 60 c4 3d 4b d7 54 df # :path: /icon.png! c4 # user-agent: ...! c0 # accept: ...! c2 # accept-language: ...! 10 # accept-encoding: ...! bf # referer: ...!
30. 30. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   ヘッダ圧縮  (7) n  最初のリクエストでもそこそこ圧縮される n  画像等アセットへのリクエストが繰り返すとすごい縮む ⁃  レスポンスも同様 30  HTTP/2時代のウェブサイト設計 リクエストパス ヘッダサイズ（圧縮前，バイト） ヘッダサイズ（圧縮後，バイト） 圧縮率率率 / 291 147 50.5% /banner.jpg 300 62 20.7% /icon.png 298 17 5.7%
31. 31. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   ここまでのまとめ n  HTTP/2の技術的特徴 ⁃  多重化によりRTTの影響を低減 ⁃  ヘッダ圧縮により通信量量を低減 ⁃  （まだまだ続くけど） n  上記２点を体感できるデモ ⁃  https://www.symfony.fi/entry/compare-‐‑‒ resource-‐‑‒loading-‐‑‒between-‐‑‒http-‐‑‒2-‐‑‒and-‐‑‒http-‐‑‒1-‐‑‒1 31  HTTP/2時代のウェブサイト設計
32. 32. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   優先度度制御 n  ２種類の制御⼿手法の組み合わせ ⁃  重みづけ  (weight) •  値に⽐比例例したバンド幅の配分 ⁃  依存関係  (dependency) •  依存されているレスポンスを先に送信 •  グループ化にも利利⽤用 n  クライアントが優先度度を指定する n  サーバは指定された優先度度を「尊重」する 32  HTTP/2時代のウェブサイト設計
33. 33. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   優先度度制御  (Firefoxの場合) 33  HTTP/2時代のウェブサイト設計 n  HTTP/1.1,  SPDY  と⽐比較して  first-‐‑‒paint  が⼤大幅短縮 ⁃  load  complete  は⼤大差なし（転送総量量が同じだから） •  TCP接続本数が多いHTTP/1.1がやや有利利
34. 34. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   優先度度制御  (Firefoxの場合) 34  HTTP/2時代のウェブサイト設計 Root Leader   weight:  201 Follower   weight:  1 Unblocked   weight:  101 n  1.  初期状態（接続直後）
35. 35. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   優先度度制御  (Firefoxの場合) 35  HTTP/2時代のウェブサイト設計 Root Leader   weight:  201 Follower   weight:  1 HTML   weight:  32 Unblocked   weight:  101 n  2.  HTML受信開始
36. 36. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   優先度度制御  (Firefoxの場合) 36  HTTP/2時代のウェブサイト設計 Root Leader   weight:  201 Follower   weight:  1 HTML   weight:  32 CSS   weight:  32 JS  (HEAD)   weight:  32 Unblocked   weight:  101 n  3.  <HEAD>にあったCSSとJavaScriptをリクエスト ⁃  CSS/JSを圧倒的に優先 •  Follower  vs.  CSS/JS  の  weight  は  1:32:32:32…
37. 37. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   優先度度制御  (Firefoxの場合) 37  HTTP/2時代のウェブサイト設計 Root Leader   weight:  201 Follower   weight:  1 HTML   weight:  32 Unblocked   weight:  101 n  4.  CSSとJavaScriptの受信完了了 ⁃  HTMLの<BODY>部も届き始める ⁃  first  paint  (ウェブページをレンダリングできるぞ！)
38. 38. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   優先度度制御  (Firefoxの場合) 38  HTTP/2時代のウェブサイト設計 Root Leader   weight:  201 Follower   weight:  1 HTML   weight:  32 Image   weight:  22 Image   weight:  22 Image   weight:  22 Unblocked   weight:  101 n  5.  <BODY>にあった<IMG>の画像をリクエスト ⁃  画像はHTMLよりちょっと低めのweight •  ブラウザ画⾯面では画像がじわじわ表⽰示
39. 39. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   優先度度制御  (Firefoxの場合) 39  HTTP/2時代のウェブサイト設計 Root Leader   weight:  201 Follower   weight:  1 HTML   weight:  32 Image   weight:  22 Image   weight:  22 Image   weight:  22 Unblocked   weight:  101 JS  (BODY)   weight:  32 n  6.  <BODY>末尾のJavaScriptは別の優先度度で
40. 40. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   優先度度制御  (Firefoxの場合) 40  HTTP/2時代のウェブサイト設計 Root Leader   weight:  201 Follower   weight:  1 Image   weight:  22 Image   weight:  22 Image   weight:  22 Unblocked   weight:  101 JS  (BODY)   weight:  32 n  7.  HTMLの配信完了了
41. 41. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   優先度度制御  (Firefoxの場合) 41  HTTP/2時代のウェブサイト設計 Root Leader   weight:  201 Follower   weight:  1 Image   weight:  22 Image   weight:  22 Unblocked   weight:  101 n  8.  JavaScriptの配信も完了了 ⁃  DOMContentLoaded
42. 42. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   優先度度制御  (Firefoxの場合) 42  HTTP/2時代のウェブサイト設計 Root Leader   weight:  201 Follower   weight:  1 Unblocked   weight:  101 n  9.  全てのダウンロードが完了了 ⁃  onload  event
43. 43. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   優先度度制御  (Firefoxの場合) 43  HTTP/2時代のウェブサイト設計 Root Leader   weight:  201 Follower   weight:  1 HTML   weight:  32 Image   weight:  22 Image   weight:  22 Image   weight:  22 CSS   weight:  32 JS  (HEAD)   weight:  32 Unblocked   weight:  101 JS  (BODY)   weight:  32 n  まとめ: ⁃  優先度度（図の縦⽅方向）と重みづけを併⽤用 ⁃  リソースの「利利⽤用形態」にあわせて優先度度を設定
44. 44. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   優先度度制御  (Chromeの場合) 44  HTTP/2時代のウェブサイト設計 n  重みづけのみを使⽤用（依存関係は未使⽤用） n  HTTP/2でfirst-‐‑‒paintは劣劣化
45. 45. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   優先度度制御  (Chromeの場合) 45  HTTP/2時代のウェブサイト設計 n  1.  HTMLを受信開始 Root HTML   weight:  256
46. 46. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   優先度度制御  (Chromeの場合) 46  HTTP/2時代のウェブサイト設計 n  2.  <HEAD>をパース、CSSとJSをリクエスト Root HTML   weight:  256 CSS   weight:  220 JS   weight:  183
47. 47. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   優先度度制御  (Chromeの場合) 47  HTTP/2時代のウェブサイト設計 n  3.  <BODY>が徐々に到着、画像もリクエスト ⁃  この時点でのバンド幅の配分は？ •  HTML:CSS:JS:Image*3  =  256:220:183:330 •  CSSやJSよりも画像のほうがバンド幅を⾷食ってる ⁃  これではfirst-‐‑‒paint  が早くならない Root HTML   weight:  256 CSS   weight:  220 JS   weight:  183 Image   weight:  110 Image   weight:  110 Image   weight:  110
48. 48. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   優先度度制御  (他のウェブブラウザの場合) 48  HTTP/2時代のウェブサイト設計 n  Edge  –  優先度度制御なし n  Safari  –  優先度度制御なし n  サーバ側でなんとかしないと… Root HTML   weight:  16 CSS   weight:  16 JS   weight:  16 Image   weight:  16 Image   weight:  16 Image   weight:  16
49. 49. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   H2O  の  reprioritize-‐‑‒blocking-‐‑‒assets  オプション n  クライアントが依存関係ツリーを構築しない場合に n  レンダリングをブロックしそうな  content-‐‑‒type  のレス ポンスを最優先で配信 49  HTTP/2時代のウェブサイト設計 Root HTML   weight:  16 CSS   weight:  max JS   weight:  max Image   weight:  16 Image   weight:  16 Image   weight:  16 (internal  root)
50. 50. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   H2O  の  reprioritize-‐‑‒blocking-‐‑‒assets  オプション n  first  paint  が⼤大幅に改善 50  HTTP/2時代のウェブサイト設計
51. 51. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   サーバ側の優先度度制御対応 サーバ 優先度度制御 Apache  HTTP  Server  +  mod_h2 RFC準拠  (ngh>p2を使⽤用) Apache  Traffic  Server なし H2O RFC準拠  &  サーバ側でさらに最適化 ngh>p2 RFC準拠 nginx  (alpha) sRll  broken OpenLiteSpeed  (beta) sRll  broken 51  HTTP/2時代のウェブサイト設計 n  改善が望まれる分野 ⁃  サーバがRFCの期待にそった実装をしないと、クライ アント側でチューニングできない •  最悪、（サーバ側がバグバグで）使い物にならなかった HTTP/1.1  パイプライン化の⼆二の舞に
52. 52. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   優先度度制御まとめ n  ユーザの体感速度度を⼤大幅に向上させる技術 ⁃  first-‐‑‒paint  time  が改善するため n  多くのクライアント、サーバで改善が望まれる 52  HTTP/2時代のウェブサイト設計
53. 53. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   サーバプッシュ n  HTTP/2はRTTを隠蔽する技術 n  でも、1RTT（リクエストを投げてからレスポンスを受け 取るまで）は絶対かかるよね？ n  それ、0RTTでできるよ！ ⁃  サーバが、クライアントの発⾏行行するリクエストを予測 して、レスポンスをプッシュすればいい ※これ以外の⽬目的でも使える技術ですが、今回はウェブブラ ウザのレスポンスタイムに絞った議論論をします 53  HTTP/2時代のウェブサイト設計
54. 54. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   サーバプッシュ n  対応サーバ:  H2O,  nghttpx  (nghttp2) n  ウェブアプリケーションの返す  Link  ヘッダを認識識 GET / HTTP/1.1! Host: example.com! ! HTTP/1.1 200 OK! Content-Type: text/html; charset=utf-8! Link: </style.css>; rel=preload # このヘッダ!!!! ! <HTML>… 54  HTTP/2時代のウェブサイト設計
55. 55. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   サーバプッシュ n  RFC  どおり実装してあっても、あまり役に⽴立立たない ⁃  プッシュされるレスポンスは、プッシュを 起動したレスポンスに依存する形でスケ ジュールされるから n  H2O  実装上の⼯工夫 ⁃  プッシュするリソースは常に最優先 •  reprioritize-‐‑‒blocking-‐‑‒assets  と同様 ⁃  1.5  からは、mime-‐‑‒type  を⾒見見て優先度度制御 55  HTTP/2時代のウェブサイト設計 HTML   weight:  ?? CSS  (pushed)   weight:  16
56. 56. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   サーバプッシュの難しさ n  要件: ⁃  CSS  や  JavaScript  をプッシュしたい ⁃  ブラウザキャッシュにある場合はプッシュしたくない n  どうやればいい? ⁃  ブラウザキャッシュ内の状況を確認するためにリクエ スト/レスポンスを送信してはいけない •  そのために1RTTかかるとプッシュのメリットがなくなる 56  HTTP/2時代のウェブサイト設計
57. 57. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   cache-‐‑‒aware  server-‐‑‒push n  H2O  1.5  の新機能 n  ブラウザキャッシュ内の  CSS,  JS  を  fingerprinting ⁃  Golomb  coded  sets  (bloom  filterの圧縮版)  を使⽤用 n  fingerprint  を全てのリクエストに  cookie  として添付 ⁃  cookie  サイズは100バイト程度度 •  さらに  HPACK  による圧縮が効く n  H2O  は  fingerprint  を基に、ウェブアプリの要求するプ ッシュを実際に⾏行行うか判定 ⁃  プッシュした場合は  fingerprint  を更更新 57  HTTP/2時代のウェブサイト設計
58. 58. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   サーバプッシュまとめ n  ポテンシャルはあるが使いにくい（と思われてきた） ⁃  H2O  1.5  で実⽤用的になります 58  HTTP/2時代のウェブサイト設計
59. 59. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   HTTP/2  の特徴まとめ n  ウェブを⾼高速化する技術である ⁃  レイテンシを隠蔽 ⁃  優先度度制御 n  ⼩小さなレスポンスが⼤大量量に流流れても問題ない n  HTTP/2  では（レイテンシではなく）バンド幅が再び表 ⽰示速度度の律律速条件になる 59  HTTP/2時代のウェブサイト設計
60. 60. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   HTTP/2  でオワコンになる最適化 n  アセットの結合  (asset  pipeline,  CSS  sprite) ⁃  理理由1:  不不要なデータまで転送するから ⁃  理理由2:  ⼀一部変更更したら全部再転送になるから n  expiresの利利⽤用 ⁃  例例.  expiresの利利⽤用  (/style.css?date=2015073101) ⁃  理理由1:  HTTP/2  なら  304  レスポンス使い放題 ⁃  理理由2:  ファイル毎に  ?...  を管理理するの⾯面倒だから •  ファイル毎に管理理していない場合は、別のファイル更更新で 全部再転送するのは良良くないから n  迷ったら、転送データ量量を基準に考えればよい 60  HTTP/2時代のウェブサイト設計
61. 61. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   HTTP/2  でオワコンになる最適化 n  ドメインシャーディング ⁃  アセットを別ホストに置くことで  HTTP/1  の同時接 続本数を6本以上にするハック •  CDNとか ⁃  オワコンの理理由: •  ホストが異異なると  HTTP/2  でも別の  TCP  接続に •  だが、複数の  TCP  接続にまたがった優先度度制御は不不可能 •  結果、first-‐‑‒paint  time  が遅くなる ⁃  CDN使ってる場合は、Webアプリからの応答もCDN 経由で流流すようにしましょう •  詳しくは、ご利利⽤用中のCDNサービサーまで 61  HTTP/2時代のウェブサイト設計
62. 62. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   まとめ 62  HTTP/2時代のウェブサイト設計
63. 63. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   まとめ n  HTTP/2  はウェブを速くする技術 n  ウェブサイトを速くすればページビューが増える ⁃  cf.  冒頭の  bing  のリサーチ ⁃  Googleの検索索順位上昇 n  ページビューが増えれば売上が増える n  つまり、HTTP/2  にすれば売上が増える 63  HTTP/2時代のウェブサイト設計
64. 64. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   まとめ n  HTTP/2  はウェブを速くする技術 n  ウェブサイトを速くすればページビューが増える ⁃  cf.  冒頭の  bing  のリサーチ ⁃  Googleの検索索順位上昇 n  ページビューが増えれば売上が増える n  つまり、HTTP/2  にすれば売上が増える H2O  は⼀一番速い  HTTP/2  サーバ (cf.  優先度度制御、サーバプッシュ) つまり、H2O  を使えば⼀一番売上が増えるJ 64  HTTP/2時代のウェブサイト設計
65. 65. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   65  HTTP/2時代のウェブサイト設計
66. 66. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   66  HTTP/2時代のウェブサイト設計
67. 67. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   おまけ 67  HTTP/2時代のウェブサイト設計
68. 68. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   HTTP/2とHTTPS n  HTTP/2は多くのウェブブラウザでHTTPS限定 ⁃  Chrome,  Firefox,  Safari?,  ... n  サーバ証明書買わないといけないの? ⁃  無料料で証明書もらえるようになるよ •  LetsEncrypt  –  11⽉月16⽇日サービス開始予定 68  HTTP/2時代のウェブサイト設計
69. 69. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   TLS  の設定は難しい n  ciphersuites n  Perfect  Forward  Secrecy n  Session  Resumption n  Session  Ticket n  … 69  HTTP/2時代のウェブサイト設計
70. 70. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   Ciphersuites n  使って良良い暗号化⼿手法の⼀一覧 ⁃  クライアントが送付する⼀一覧とつきあわせて、⼀一覧の 先頭にあるものが選択される n  サーバとクライアント、どちらの⼀一覧の順序を使うか ⁃  デフォルトはクライアント ⁃  古いウェブブラウザでもForward  Secrecyを提供した い場合はサーバ優先に設定 •  新しいウェブブラウザなら、何もしなくてもForward-‐‑‒ Secretになる 70  HTTP/2時代のウェブサイト設計
71. 71. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   Forward  Secrecy n  Forward  Secrecyとは ⁃  ⻑⾧長期鍵（e.g.  サーバの秘密鍵）が漏漏洩／解析されても、 過去の通信内容が解読可能にならないという性質 n  Perfect  Forward  Secrecyとは ⁃  全ての暗号化セッション  (e.g.  TLS接続)  が異異なる暗 号鍵を使うという性質 n  よくある誤解 ⁃  「ciphersuitesを設定したぞ！これでPFSになった」 ⁃  間違いです 71  HTTP/2時代のウェブサイト設計
72. 72. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   2種類のセッションキャッシュ n  TLSのハンドシェイクは重たい ⁃  公開鍵暗号計算の負荷 •  最近のCPUだと割と余裕ですが ⁃  2  RTTかかってしまう •  TLS  1.3  で  0〜～1  RTT  に削減予定 n  セッションキャッシュ: ⁃  前回交換した暗号通信⽤用の共通鍵を再利利⽤用 ⁃  公開鍵暗号計算が不不要 ⁃  1  RTTで可能 •  TLS  1.3  で  0〜～1  RTT  になる予定 72  HTTP/2時代のウェブサイト設計
73. 73. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   2種類のセッションキャッシュ n  session  resumption ⁃  サーバとクライアントがTLSで使う共通鍵を保存 n  session  ticket ⁃  サーバが使う共通鍵を、クライアントが覚える •  サーバは、共通鍵を（サーバしか知らない秘密鍵で暗号化 ＆署名して）クライアントに送信 ⁃  この暗号化＆署名された共通鍵が「session  ticket」 •  クライアントは受け取った  session  ticket  を次回接続時に サーバに送信 ⁃  多数のウェブサーバをクラスタ化してる場合に便便利利 73  HTTP/2時代のウェブサイト設計
74. 74. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   ⼀一般的なウェブサーバのsession  ticket実装 n  多くのウェブサーバはsession  ticketを優先 n  session  ticketの暗号化に使う鍵は、サーバ動作中は変わ らない ⁃  PFS対応のciphersuiteを使っていても、この鍵がバレ たら、全通信が解読可能になる •  PFSになってないじゃん！！！ n  ⼀一般的なサーバではsession  ticketを無効化しましょう ⁃  もしくは、⾃自分でがんばって  session  ticket  を切切り替 えて⾏行行く仕組みを実装しましょう •  https://blog.twitter.com/2013/forward-‐‑‒secrecy-‐‑‒at-‐‑‒twitter 74  HTTP/2時代のウェブサイト設計
75. 75. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   イベントドリブンサーバのsession  resumption問題 n  session  resumptionでは、鍵を保存する必要がある ⁃  サーバをクラスタ化している場合、共通の場所に保存 •  cf.  memcached n  だが、イベントドリブンなウェブサーバは  memcached   を使った  session  resumption  に⾮非対応 ⁃  OpenSSLベースでは不不可能と思われていた n  サーバをクラスタ化してる皆さん、どうしてますか? ⁃  諦めてる? ⁃  そもそもこの問題を知らなかった? 75  HTTP/2時代のウェブサイト設計
76. 76. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   H2O  ならセッションキャッシュも簡単です 76  HTTP/2時代のウェブサイト設計 サーバ １台 クラスタ化 resump,on ,cket resump,on ,cket Apache  (prefork) ○ △  (⼿手動rollover) ○  (memcached) △  (⼿手動rollover) Apache  (worker) ○ △  (⼿手動rollover) ○  (memcached) △  (⼿手動rollover) Apache  (event) ○ △  (⼿手動rollover) × △  (⼿手動rollover) H2O ○ ○  (⾃自動rollover) ○  (memcached) ○  (⾃自動rollover) nginx ○ △  (⼿手動rollover) × △  (⼿手動rollover) n  Webサーバクラスタでのresumptionに対応 n  session  ticketの秘密鍵の⾃自動更更新機能を実装 n  クラウドの普及で、Webサーバのクラスタ化が⼀一般的に ⁃  ⼩小規模でも⼩小さなVMを並べて⾼高可⽤用性を実現
77. 77. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   おまけのまとめ n  H2O  は  HTTP/2  に加え  TLS  の実装でも優れている n  HTTPS  サーバをクラスタ化するなら  H2O 77  HTTP/2時代のウェブサイト設計
78. 78. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   ちなみに n  こういう話はnginxの開発者ともしています n  きっとnginxも追いかけてくる n  H2Oは更更に先を⽬目指します 78  HTTP/2時代のウェブサイト設計
79. 79. Copyright  (C)  2015  DeNA  Co.,Ltd.  All  Rights  Reserved.   H2O  –  making  the  Web  faster  and  better 79  HTTP/2時代のウェブサイト設計