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.

ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先

34,473 views

Published on

DeNA Techcon (2016/01/29) 登壇資料

Published in: Internet
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi All, We are planning to start new Salesforce Online batch on this week... If any one interested to attend the demo please register in our website... For this batch we are also provide everyday recorded sessions with Materials. For more information feel free to contact us : siva@keylabstraining.com. For Course Content and Recorded Demo Click Here : http://www.keylabstraining.com/salesforce-online-training-hyderabad-bangalore
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先

  1. 1. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. ウェブを速くするために DeNAがやっていること HTTP/2と、さらにその先 DeNA Co., Ltd. Kazuho Oku 1
  2. 2. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. DeNAは○○の会社 2ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  3. 3. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. DeNAはウェブの会社 3ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  4. 4. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. DeNAはウェブの会社  ウェブ技術を使ったサービス群 ⁃ Mobage ⁃ DeNAショッピング・モバオク ⁃ DeNA Palette ⁃ …  スマホアプリも HTTP や WebView を使用 4ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  5. 5. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. DeNAはウェブの会社 (まあ、だいたい) 5ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  6. 6. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. ウェブ基盤技術の研究開発 6ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  7. 7. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. ウェブ基盤技術の研究開発  2種類のアプローチ ⁃ スループットの最適化 ⁃ レスポンスタイムの高速化  メリットは何? 7ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  8. 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. 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. 10. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. 本日のテーマ  HTTP/2 の基本  HTTP/2 の最適化 ⁃ レスポンスタイム最適化 ⁃ スループット最適化  H2O と他ソフトウェアの実装の話を織り交ぜつつ 10ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  11. 11. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. H2O  DeNA で開発している HTTP/2 サーバ ⁃ 中の人: Kazuho Oku (me)  タイムライン: ⁃ 2014年7月: 開発開始 ⁃ 2014年12月: 初回リリース (0.9.0) ⁃ 2014年2月: 1.0リリース • HTTP/2策定作業の完了と同時 ⁃ 現在: 1.7.0beta-4  スループットとレスポンスタイムの双方で、おそらく世 界最速の HTTP/2 実装 11ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  12. 12. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. HTTP/2 誕生の背景 12ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  13. 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. 14. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. バンド幅も増大中  エンドユーザのバンド幅は年率50%で増加(ニールセン の法則) 14ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先 出典: http://www.nngroup.com/articles/law-of-bandwidth/
  15. 15. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. 未来はバラ色? 15ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  16. 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. 17. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. ページロードはレイテンシが小さいほど速い 17ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先 出典: More Bandwidth Doesn't Matter - 2011 Mike Belshe (Google)
  18. 18. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. Why? 18ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  19. 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. 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. 21. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. レイテンシは今後も小さくならない  光の速度はかわらない ⁃ アメリカまで光ファイバーで往復すれば80ミリ秒  携帯回線はレイテンシが大きい ⁃ LTE ~ 50ms 21ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  22. 22. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. やばい!ウェブが遅くなってきた! 22ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  23. 23. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. どうしよう? 23ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  24. 24. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. 解決策:レイテンシに負けないプロトコルを作る 24ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  25. 25. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. HTTP/2! 25ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  26. 26. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. HTTP/2  RFC 7540 (2015/5) ⁃ Google の QUIC プロトコルの実験を参考に規格化  基本的な技術要素 ⁃ バイナリプロトコル ⁃ 多重化 ⁃ ヘッダ圧縮 26ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  27. 27. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. バイナリプロトコルな理由  脆弱性を防ぐ ⁃ HTTP Request/Response Splitting Attack • HTTP/1.1のパーサによる解釈の差をつく攻撃  転送データ量の低減 ⁃ 細かな粒度でレスポンスの順序を変更したい • 転送単位が小さいなら、その単位毎につけるヘッダは小さ くないといけない → バイナリにするしかない ⁃ ヘッダ圧縮 • 圧縮するんだから、どのみちバイナリ  全てのデータは、「フレーム」に分解して送受信 27ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  28. 28. Copyright (C) 2016 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> … 28ウェブを速くするためにDeNAがやっていること - 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>…
  29. 29. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. 多重化  同時に100以上のリクエストを発行可能  任意のタイミングでリクエスト送信可能  レスポンスの順序に制限なし  レスポンスを織り交ぜ可能 ⁃ DATAのstream IDを見よ 29ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先 client server …
  30. 30. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. ヘッダ圧縮 (1)  HTTP/1.1のヘッダは大きい ⁃ リクエスト: • 最低でも300バイト程度 • Google Analytics使うとCookieで+200バイトなど ⁃ レスポンスも通常300バイト程度  100個レスポンスを受け取るなら、それだけで30KB ⁃ レイテンシがなくなるなら、ヘッダサイズも小さくし たい • 大量に 304 Not Modified を返すこととかありますよね 30ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  31. 31. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. ヘッダ圧縮 (2)  HPACK (RFC 7541) として規定  技術要素 ⁃ 初見の文字列は、静的ハフマン圧縮 ⁃ 2回目以降は、前回出現時からのオフセットで表現 ⁃ 頻出文字列は、固定テーブルのインデックスで表現 31ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  32. 32. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. ヘッダ圧縮 (3)  想定例: ⁃ https://example.com/ にアクセス ⁃ 参照されている /banner.jpg と /icon.png をロード 32ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  33. 33. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. ヘッダ圧縮 (4)  / へのリクエスト 33ウェブを速くするためにDeNAがやっていること - 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: ...
  34. 34. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. ヘッダ圧縮 (5)  /banner.jpg へのリクエスト 34ウェブを速くするためにDeNAがやっていること - 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: ...
  35. 35. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. ヘッダ圧縮 (6)  /icon.png へのリクエスト 35ウェブを速くするためにDeNAがやっていること - 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: ...
  36. 36. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. ヘッダ圧縮 (7)  最初のリクエストでもそこそこ圧縮される  画像等アセットへのリクエストが繰り返すとすごい縮む ⁃ レスポンスも同様 36ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先 リクエストパス ヘッダサイズ(圧縮前,バイト) ヘッダサイズ(圧縮後,バイト) 圧縮率 / 291 147 50.5% /banner.jpg 300 62 20.7% /icon.png 298 17 5.7%
  37. 37. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. ここまでのまとめ  HTTP/2の基本 ⁃ 多重化によりレイテンシの影響を低減 ⁃ ヘッダ圧縮により通信量を低減  上記2点を体感できるデモ ⁃ https://www.symfony.fi/entry/compare- resource-loading-between-http-2-and-http-1-1 37ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  38. 38. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. HTTP/2 におけるレスポンスタイム最適化 38ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  39. 39. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. HTTP/2のレスポンスタイムベンチマーク  コンテンツ系ウェブサイトが表示されるまでの時間測定  初期描画(first-paint)までの時間に大差、H2O が最短 39ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  40. 40. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. 差が出た理由: 優先度制御 40ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  41. 41. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. HTTP/2 の規定する優先度制御  クライアントがリクエスト毎に優先度を指定する ⁃ 2種類の制御手法の組み合わせ • 重みづけ (weight) ⁃ 値に比例したバンド幅の配分 • 依存関係 (dependency) ⁃ 依存されているレスポンスを先に送信 ⁃ グループ化にも利用  サーバは指定された優先度を「参考にする」 41ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  42. 42. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. Firefox の優先度制御実装 42ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  43. 43. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. Firefox の優先度制御 43ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先 Root Leader weight: 201 Follower weight: 1 Unblocked weight: 101  1. 初期状態(接続直後)
  44. 44. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. Firefox の優先度制御 44ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先 Root Leader weight: 201 Follower weight: 1 HTML weight: 32 Unblocked weight: 101  2. HTML受信開始
  45. 45. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. Firefox の優先度制御 45ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先 Root Leader weight: 201 Follower weight: 1 HTML weight: 32 CSS weight: 32 JS (HEAD) weight: 32 Unblocked weight: 101  3. <HEAD>にあったCSSとJavaScriptをリクエスト ⁃ CSS/JSを圧倒的に優先 • Follower vs. CSS/JS の weight は 1:32:32:32…
  46. 46. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. Firefox の優先度制御 46ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先 Root Leader weight: 201 Follower weight: 1 HTML weight: 32 Unblocked weight: 101  4. CSSとJavaScriptの受信完了 ⁃ HTMLの<BODY>部も届き始める ⁃ first paint (ウェブページをレンダリングできるぞ!)
  47. 47. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. Firefox の優先度制御 47ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先 Root Leader weight: 201 Follower weight: 1 HTML weight: 32 Image weight: 22 Image weight: 22 Image weight: 22 Unblocked weight: 101  5. <BODY>にあった<IMG>の画像をリクエスト ⁃ 画像はHTMLよりちょっと低めのweight • ブラウザ画面では画像がじわじわ表示
  48. 48. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. Firefox の優先度制御 48ウェブを速くするためにDeNAがやっていること - 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  6. <BODY>末尾のJavaScriptは別の優先度で
  49. 49. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. Firefox の優先度制御 49ウェブを速くするためにDeNAがやっていること - 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  7. HTMLの配信完了
  50. 50. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. Firefox の優先度制御 50ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先 Root Leader weight: 201 Follower weight: 1 Image weight: 22 Image weight: 22 Unblocked weight: 101  8. JavaScriptの配信も完了 ⁃ DOMContentLoaded
  51. 51. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. Firefox の優先度制御 51ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先 Root Leader weight: 201 Follower weight: 1 Unblocked weight: 101  9. 全てのダウンロードが完了 ⁃ onload event
  52. 52. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. Firefox の優先度制御 52ウェブを速くするためにDeNAがやっていること - 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  まとめ: ⁃ 優先度(図の縦方向)と重みづけを併用 ⁃ リソースの「利用形態」にあわせて優先度を設定
  53. 53. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. H2O の優先度制御実装 53ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  54. 54. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. H2O の優先度制御実装  H2O は ⁃ Webブラウザの指示に従い、バンド幅を配分 • 割当は HTTP/2 の規定どおり ⁃ 優先度制御の粒度が細かい • 16KB単位でストリームを切り替え • 約64KB単位でバッファリング  全ての HTTP/2 サーバが優先度制御を(正しく)実装し ているわけではない 54ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  55. 55. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. H2O の優先度制御実装  優れた優先度制御の要件: weighted fair queuing ⁃ 次に送信すべきストリームを、queue の中から • 重み (weight) に基づいて • 公平 (fair) に選択  H2O の wfq は、リングバッファを使用した O(1) 実装 ⁃ ツリーの深さに対しては高速な O(n) • タイトなループなので高速 ⁃ 高速な実装 → 細粒度で送信ストリームを切替可能  他の HTTP/2 実装も wfq を採用へ ⁃ nghttp2, Apache (mod_h2), hyper, ... 55ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  56. 56. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. 他のWebブラウザの優先度制御実装 56ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  57. 57. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. 優先度制御 (Chromeの場合) 57ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先  重みづけのみを使用(依存関係は未使用)  HTTP/2でfirst-paintは劣化 0 0.5 1 1.5 2 2.5 3 Nginx (HTTP/1.1) Nginx (SPDY/3.1) H2O (HTTP/2) Chrome/43 Download Timing (unit: seconds, latency: 100ms) first paint load complete
  58. 58. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. 優先度制御 (Chromeの場合) 58ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先  1. HTMLを受信開始 Root HTML weight: 256
  59. 59. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. 優先度制御 (Chromeの場合) 59ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先  2. <HEAD>をパース、CSSとJSをリクエスト Root HTML weight: 256 CSS weight: 220 JS weight: 183
  60. 60. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. 優先度制御 (Chromeの場合) 60ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先  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
  61. 61. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. 優先度制御 (他のウェブブラウザの場合) 61ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先  Edge – 優先度制御なし  Safari – 優先度制御なし  サーバ側でなんとかしないと… Root HTML weight: 16 CSS weight: 16 JS weight: 16 Image weight: 16 Image weight: 16 Image weight: 16
  62. 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. 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. 64. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. 優先度制御まとめ  ユーザの体感速度を大幅に向上させる技術 ⁃ first-paint time が改善するため  クライアント側: ⁃ Firefox – すばらしい ⁃ 他のWebブラウザ – 要改善  サーバ側: ⁃ 実装状況がまちまち ⁃ H2O は Firefox 以外のブラウザむけの最適化も実装 64ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  65. 65. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. サーバプッシュ 65ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  66. 66. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. サーバプッシュ  HTTP/2はRTTを隠蔽する技術  でも、1RTT(リクエストを投げてからレスポンスを受け 取るまで)は絶対かかるよね?  それ、0RTTでできるよ! ⁃ サーバが、クライアントの発行するリクエストを予測 して、レスポンスをプッシュすればいい ※これ以外の目的でも使える技術ですが、今回はウェブブラ ウザのレスポンスタイムに絞った議論をします 66ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  67. 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. 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. 69. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. サーバプッシュ  実用にむけた課題: ⁃ (クライアントに頼らない)優先度制御 ⁃ プッシュの起動方法 ⁃ ブラウザキャッシュとの兼ね合い 69ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  70. 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. 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. 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. 73. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. サーバプッシュ vs. ブラウザキャッシュ  キャッシュ済のファイルはプッシュしたくない ⁃ バンド幅(と場合によっては時間)のムダ  キャッシュの有無を判断する方法は? ⁃ ブラウザキャッシュ内の状況を確認するためにリクエ スト/レスポンスを送信してはいけない • そのために1RTTかかるとプッシュのメリットがなくなる 73ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  74. 74. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. cache-aware server-push  H2O 1.5 以降で実装 (experimental)  ブラウザキャッシュ内の CSS, JS を fingerprinting ⁃ Golomb coded sets (bloom filterの圧縮版) を使用  fingerprint を全てのリクエストに cookie として添付 ⁃ cookie サイズは100バイト程度 • さらに HPACK による圧縮が効く ⁃ ServiceWorker を使った実装も開発中 (jxck氏)  H2O は fingerprint を基に、ウェブアプリの要求するプ ッシュを実際に行うか判定 ⁃ プッシュした場合は fingerprint を更新 74ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  75. 75. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. cache-aware server-push  cookieを使うアプローチの問題: ⁃ Webブラウザキャッシュに何が入ってるか、ブラウザ 以外には正確には分からない ⁃ cookieは消される可能性/細かな更新が困難  理想的には、Webブラウザが fingerprint を送信すべき ↓  2014/10: 関係者と議論 @ http2/quic meetup  2015/01: インターネットドラフト(RFC化の提案)を提出 (共著者: Mark Nottingham) mod_h2 (Apache) がドラフトを実装 75ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  76. 76. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. cache-aware server-push  fingerprint を含むリクエストの例 :method: GET :scheme: https :authority: example.com :path: / cache-digest: IdrjaOrSB4wfpbxdx5Q/ ⁃ この cache-digest ヘッダは、以下12の URL がキャ ッシュ済であることを示している https://example.com/assets/css/bootstrap.min.css, https://example.com/assets/css/font-awesome.css, https://example.com/assets/css/header.css, https://example.com/assets/css/magnific-popup.css, https://example.com/assets/css/main.css, https://example.com/assets/css/pinstrap.css, https://example.com/assets/css/pinterest.css, https://example.com/js/bootstrap.min.js, https://example.com/js/jquery-1.11.0.js, https://example.com/js/jquery-ui.min.js, https://example.com/js/jquery.magnific- popup.js, https://example.com/js/pinterest.js 76ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  77. 77. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. サーバプッシュまとめ  ポテンシャルはあるが使いにくい(と思われてきた) ⁃ H2O がそれらの問題を解決 ⁃ 今後の期待: • 仕様の標準化 • ウェブブラウザや、他のサーバでの実装 77ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  78. 78. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. レスポンスタイム最適化まとめ  HTTP/2 はユーザの待ち時間を最適化 ⁃ ユーザ体験向上と売上増加につながると考えられる  HTTP/2 の基本要素 ⁃ 多重化によるレイテンシの隠蔽 ⁃ バイナリ化による通信データ量の削減  どれだけ高速になるかはサーバの実装依存 ⁃ 優先度制御 ⁃ サーバプッシュ 78ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  79. 79. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. HTTP サーバのスループット最適化 79ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  80. 80. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. ベンチマーク:静的ファイルの配信  ベンチマーク環境: AWS c3.8xlarge (2台) ⁃ クライアントとサーバは、同一network placement  ファイルサイズ: 612バイト (デスクリプタキャッシュ:on) 80ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  81. 81. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. HTTP/2 は高スループットなプロトコル  HTTP/2 over TLS は、暗号化のない HTTP/1 と同等か より高速 ⁃ TLS の負荷は HTTPS に移行しない理由にならない 81ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  82. 82. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. なぜ H2O は速いのか  ステートマシンを極力廃した設計  SIMD 命令でチューニングされた HTTP/1 パーサ  HTTP/2 と TLS を前提にした設計 ⁃ ヘッダを文字列ではなく、ポインタ演算で比較 ⁃ 大量のレスポンスをマージして、できるだけ少ないシ ステムコールで送信 82ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  83. 83. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. H2O - その他の特徴  (m)rubyによるスクリプティング: ⁃ mod_rewriteよりも保守しやすい ⁃ Rack 標準に則っている → ベンダロックインが発生 しない  先進のTLSサポート: ⁃ セッションキャッシュのサーバ間共有 ⁃ セッションチケットのマスター鍵の自動更新 ⁃ レコードサイズの最適化 ⁃ 自動化されたOCSPステープリング 83ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  84. 84. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. まとめ 84ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
  85. 85. Copyright (C) 2016 DeNA Co.,Ltd. All Rights Reserved. まとめ  HTTP/2 が約束する未来はバラ色 ⁃ より短いレスポンスタイム ⁃ より高いスループット  H2O が、HTTP/2 サーバ実装の競争をリード ⁃ 優先度制御/サーバプッシュ/スループット  DeNA は、H2O の成果を社会に還元 ⁃ OSS として世界と共有 • H2O は DeNA 単独ではなく OSS コミュニティの成果 ⁃ IETF 等での標準化 85ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先

×