2016/10/17 セレス・ゆめみ合同勉強会にて発表した資料「HTTP/2活用のポイント」です。 口頭で説明した部分を補足で加えました。

1. HTTP/2 活用のポイント
2016/10/17 みんテク・HTTP/2勉強会
株式会社ゆめみマーケティングソリューション事業部
小野寺孝洋

2. 小野寺 孝洋
（おのでらたかひろ）
2016/9/1 ゆめみ入社
サーバサイドエンジニア
Perl/Ruby/PHP
Javascript/CSS/HTML
サッカー / ゲーム / 家事・料理
t_onodera@yumemi.co.jp

3. CONTENTS OVERVIEW
• Common :: 新技術へのアプローチについて一考
• HTTP/2 :: クライアントサイドのポイントを知ろう
• HTTP/2 :: サーバサイドのポイントを知ろう

4. APPROACHES
to NEW TECHNOLOGY

5. PURPOSE
新しい技術を習得する目的は…？
達成感
満足感
知識欲
自己顕示欲
給料up
etc…

6. PURPOSE
目的を持つことは大事！

7. APPROACHES
1.調べる 2.試す
3.整理 4.判断

8. POINT
判断基準

9. APPROACHES
導入の判断基準

10. 判断基準（１）
コスト
技術的
満足度

11. 判断基準（１）
コスト
技術的
満足度
どのくらい大きいか

12. チェック！
（いろいろかかるコスト） （技術的満足度） 導入価値
そして。。。
判断基準（１）

13. 技術的
満足度
コスト
どのくらい大きいか
顧客満足度
判断基準（２）

14. ユーザーやクライアントの
満足度も乗せて考えよう！
（いろいろかかるコスト） （顧客満足度＋技術的満足度）
判断基準（２）

15. （CM)
顧客満足度 第一主義

16. HTTP/2

17. Hello! HTTP/2
さて、HTTP/2 の話

18. Hello! HTTP/2
Native App
Browser App
HTTP Server
HTTP/2
高速化
通信の効率化
データの縮小

19. Hello! HTTP/2
目的は高速化
高速化がユーザー体験の向上に繋がる
（サクサクな方がいいですよね）

20. HISTORY
少し歴史の振り返り

21. HISTORY
HTTP ServerPC HTTP/1.x
① Request
② Response
HTTP/1.x はシンプルが信条

22. HISTORY
HTTP/1.0
HTTP/1.1
SPDY HTTP/2
パイプライン
バーチャルホスト
RESTなメソッド
ストリーム（多重, HoL回避, 読込順番）
ヘッダ圧縮
サーバプッシュ
1996 1997 2009 2015
Google：
「速さは重要」→
Chromeの作成へ

23. HISTORY
Googleが提唱した高速化の流れが続いた

24. Let's check the HTTP/2
HTTP1.1
HTTP/2 HTTP/2
HTTP/2 SERVER
ストリーム
ヘッダ圧縮
サーバプッシュ

25. Let's check the HTTP/2
高速化のポイントを踏まえながら
・クライアントアプリのケース
・ブラウザアプリのケース
・サーバのポイント
を見て行きましょう。

26. NATIVE App
（クライアントサイドのポイント）

27. POINTS
Native App HTTP Server
HTTP/2
（クライアントサイドのポイント :: Native App）
• Bye Bye！ HTTP/1.1
• コンテンツの確認
• HTTP/2の機能をうまく活用

28. FUNCTIONS of HTTP/2
HTTP/2
FUNTIONS
USER'S BENEFIT
ストリーム
・通信時間の短縮→ストレス軽減
・通信コスト低減→通信費節約
プライオリティ
・データの転送順位
・コンテンツの表示優先順位
ヘッダ圧縮
・通信時間の短縮
・通信コスト低減
サーバプッシュ ・効率的・効果的なデータ送信
（クライアントサイドのポイント :: Native App）

29. FUNCTIONS of HTTP/2
HTTP/2
FUNTIONS
USER'S BENEFIT
ストリーム
・通信時間の短縮→ストレス軽減
・通信コスト低減→通信費節約
プライオリティ
・データの転送順位
・コンテンツの表示優先順位
ヘッダ圧縮
・通信時間の短縮
・通信コスト低減
サーバプッシュ ・効率的・効果的なデータ送信
（クライアントサイドのポイント :: Native App）
選択的に機能活用も可能

30. SUMMARY
• HTTP/2に特化した設計が可能
• コンテンツに合わせてHTTP/2の機能を活用
Native App HTTP Server
HTTP/2
✔ 設計、習熟、自前ライブラリ製作のコスト
✔ ネイティブ側とサーバ側との、HTTP/2機能の協調設計
（クライアントサイドのポイント :: Native App）

31. WEB BROWSER
（クライアントサイドのポイント）

32. POINTS
Browser HTTP Server
HTTP/2
• ブラウザがよしなにやってくれる
（クライアントサイドのポイント :: Web Browser）
HTTP/1.1
• HTTP/1.1 との共存
• HTTP/1.1でのテクニックの取捨選択

33. HTTP1.1 WAYS
HTTP1.1 やってきた工夫
<script>配置工夫 ブロッキング防止による展開速度向上
CSSスプライト 画像のまとめた読み込みによる通信回数の低減
インライン画像
画像データのソースファイルの埋め込み
（HTMLファイル１つの通信で完結させる工夫）
CDN
データ配信ネットワーク
（データ配信の
（クライアントサイドのポイント :: Web Browser）

34. HTTP1.1 WAYS
HTTP1.1 HTTP/2 TO BE
<script>配置工夫
ストリーム
プライオリティ
CSSスプライト
ストリーム
サーバプッシュ
インライン画像 ストリーム
CDN
ストリーム
プライオリティ
（クライアントサイドのポイント :: Web Browser）

35. HTTP1.1 WAYS
HTTP1.1 HTTP/2 どうすべきか
<script>配置工夫
ストリーム
プライオリティ
当面継続
CSSスプライト
ストリーム
サーバプッシュ
継続
インライン画像 ストリーム
折見て廃止へ
（ 保守性）
CDN
ストリーム
プライオリティ
継続
（ 恩恵変わらず）
（クライアントサイドのポイント :: Web Browser）

36. HTTP1.1 WAYS
HTTP1.1 HTTP/2 TO BE
<script>配置工夫
ストリーム
プライオリティ
当面継続
CSSスプライト
ストリーム
サーバプッシュ
継続
インライン画像 ストリーム
折見て廃止へ
（ 保守性）
CDN
ストリーム
プライオリティ
継続
（ 恩恵変わらず）
（クライアントサイドのポイント :: Web Browser）
移行の準備と取捨選択

37. SUMMARY
Browser HTTP Server
HTTP/2
（クライアントサイドのポイント :: Web Browser）
HTTP/1.1
• HTTP/1.1との共存
• HTTP/1.1での方法論を併用と維持
✔ HTTP/1.1をベースとしたコンテンツ作りをまだしばらく続ける
✔ 将来的な取捨選択のタイミング

38. SERVER SIDE
（サーバサイドのポイント）

39. POINTS
YOUR NETWORK
Clients
HTTP Server
HTTP/2
（サーバサイドのポイント）
• 対応することわりとたくさんかも

40. ISSUES
（サーバサイドのポイント）
✔ 負荷対策（単位時間あたりのアクセス数が増える
ため）
✔ 対応ミドルウェアやクラウドの選定
✔ NW中間装置（FW, LB）
✔ 開発メンバ・情報管理者の習熟
✔ ネイティブとサーバとの協調設計
✔ チューニング、ロギングなどのノウハウが必要。

41. MEMO :: HTTP/2対応ミドルウェア
MIDDLE WARE NOTE
Apache
・2.4 + mod_http2
・nghttp2 + OpenSSL
・Experimental
nginx
・ 1.9.5
・OpenSSL
h2o
・DeNA
・Developed from scratch

42. MEMO :: HTTP/2対応CDN
PROVIDER NAME
CAN SPEAK
HTTP/2 FROM
AWS CloudFront 2016.9
Google Cloud Platform Cloud CDN 2015.10
Microsoft Azure Azure CDN 2016.8
Akamai Akamai CDN 2015
SAKURA Internet ウェブアクセラレータ 2016.7

43. PROVIDER NAME
CAN SPEAK
HTTP/2 FROM
AWS CloudFront 2016.9
Google Cloud Platform Cloud CDN 2015.10
Microsoft Azure Azure CDN 2016.8
Akamai Akamai CDN 2015
SAKURA Internet ウェブアクセラレータ 2016.7
CDN界隈はHTTP/2が充実
MEMO :: HTTP/2対応CDN

44. SUMMARY
YOUR NETWORK
Clients
HTTP Server
HTTP/2
（サーバサイドのポイント）
• あわてて導入する必要はないけども
• （イニシャル）コスト、ノウハウ蓄積の必要性
• HTTP/2対応のCDNを活用するなど、現実的で
効果的な選択が可能

45. まとめ

46. SUMMARY about HTTP/2
• クライアントサイドとサーバサイドとの協調設計で能力を発揮
• 現在は過渡期。
• 今後HTTP/1.1のテクニックなどを取捨選択していく必要あり。
• サーバサイドは割と考えることは多い。ノウハウの蓄積が必要。
• 慌てて導入する必要はまだない。
• HTTP/2.0対応のCDN活用などで対応できることで対応が吉。
（ごく近い将来のために）
• ぼちぼち対応が必要になるので、習熟は必要。
• ノウハウを蓄積して備えよう。

47. CURRENT_____
• HTTP1.1との共存しながらノウハウを溜める過渡期
• 導入するにあたって、ややコストがかかる
• 焦って導入する必要はない
SUMMARY about HTTP/2
FUTURE_____
• クライアント-サーバ間の協調設計によるベネフィット
NEAR FUTURE

48. − @naoya : http://d.hatena.ne.jp/naoya/20130123/1358918510
「Web はインターネットになった」
• 今回のための調査をしている時に、最も印象に残った記事を紹介します。

49. ご清聴ありがとうございました
新しい技術を楽んで行きましょう！