20161017 セレス合同勉強会http:2 web公開用
49
HTTP/2 活用のポイント 2016/10/17 みんテク・ HTTP/2 勉強会 株式会社ゆめみマーケティングソリューション事業部 小野寺孝洋
-
Upload
takahiro-onodera -
Category
Engineering
-
view
100 -
download
0
Transcript of 20161017 セレス合同勉強会http:2 web公開用
HTTP/2 活用のポイント
2016/10/17 みんテク・HTTP/2勉強会 株式会社ゆめみマーケティングソリューション事業部
小野寺孝洋
小野寺 孝洋（おのでらたかひろ）
2016/9/1 ゆめみ入社 サーバサイドエンジニア
Perl/Ruby/PHP Javascript/CSS/HTML
サッカー / ゲーム / 家事・料理
CONTENTS OVERVIEW
• Common :: 新技術へのアプローチについて一考
• HTTP/2 :: クライアントサイドのポイントを知ろう
• HTTP/2 :: サーバサイドのポイントを知ろう
APPROACHES to NEW TECHNOLOGY
PURPOSE
新しい技術を習得する目的は…？ 達成感 満足感 知識欲
自己顕示欲 給料up
etc…
PURPOSE
目的を持つことは大事！
APPROACHES1.調べる 2.試す
3.整理 4.判断
POINT
判断基準
APPROACHES
導入の判断基準
判断基準（１）
コスト 技術的 満足度
判断基準（１）
コスト 技術的 満足度
どのくらい大きいか
チェック！
（いろいろかかるコスト）∩（技術的満足度）≧ 導入価値
そして。。。
判断基準（１）
技術的 満足度
コスト
どのくらい大きいか
顧客満足度
判断基準（２）
ユーザーやクライアントの 満足度も乗せて考えよう！
（いろいろかかるコスト）∩（顧客満足度＋技術的満足度）
判断基準（２）
（CM)
顧客満足度 第一主義
HTTP/2
Hello! HTTP/2
さて、HTTP/2 の話
Hello! HTTP/2Native App
Browser App
HTTP Server
HTTP/2
高速化
通信の効率化 データの縮小
Hello! HTTP/2
目的は高速化 高速化がユーザー体験の向上に繋がる
（サクサクな方がいいですよね）
HISTORY
少し歴史の振り返り
HISTORY
HTTP ServerPC HTTP/1.x
① Request
② Response
HTTP/1.x はシンプルが信条
HISTORY
HTTP/1.0 HTTP/1.1SPDY HTTP/2
パイプライン バーチャルホスト RESTなメソッド
ストリーム（多重, HoL回避, 読込順番） ヘッダ圧縮 サーバプッシュ
1996 1997 2009 2015
Google： 「速さは重要」→ Chromeの作成へ
HISTORY
Googleが提唱した高速化の流れが続いた
Let's check the HTTP/2
HTTP1.1
HTTP/2 HTTP/2
HTTP/2 SERVER
ストリーム ヘッダ圧縮 サーバプッシュ
Let's check the HTTP/2
高速化のポイントを踏まえながら
・クライアントアプリのケース ・ブラウザアプリのケース ・サーバのポイント を見て行きましょう。
NATIVE App
（クライアントサイドのポイント）
POINTSNative App HTTP Server
HTTP/2
（クライアントサイドのポイント :: Native App）
• Bye Bye！ HTTP/1.1 • コンテンツの確認 • HTTP/2の機能をうまく活用
FUNCTIONS of HTTP/2HTTP/2
FUNTIONS USER'S BENEFIT
ストリーム・通信時間の短縮→ストレス軽減・通信コスト低減→通信費節約
プライオリティ・データの転送順位・コンテンツの表示優先順位
ヘッダ圧縮・通信時間の短縮・通信コスト低減
サーバプッシュ ・効率的・効果的なデータ送信
（クライアントサイドのポイント :: Native App）
FUNCTIONS of HTTP/2HTTP/2
FUNTIONS USER'S BENEFIT
ストリーム・通信時間の短縮→ストレス軽減・通信コスト低減→通信費節約
プライオリティ・データの転送順位・コンテンツの表示優先順位
ヘッダ圧縮・通信時間の短縮・通信コスト低減
サーバプッシュ ・効率的・効果的なデータ送信
（クライアントサイドのポイント :: Native App）
選択的に機能活用も可能
SUMMARY
• HTTP/2に特化した設計が可能
• コンテンツに合わせてHTTP/2の機能を活用
Native App HTTP Server
HTTP/2
✔設計、習熟、自前ライブラリ製作のコスト
✔ネイティブ側とサーバ側との、HTTP/2機能の協調設計
（クライアントサイドのポイント :: Native App）
WEB BROWSER
（クライアントサイドのポイント）
POINTSBrowser HTTP Server
HTTP/2
• ブラウザがよしなにやってくれる
（クライアントサイドのポイント :: Web Browser）
HTTP/1.1
• HTTP/1.1 との共存 • HTTP/1.1でのテクニックの取捨選択
HTTP1.1 WAYS
HTTP1.1 やってきた工夫
<script>配置工夫 ブロッキング防止による展開速度向上
CSSスプライト 画像のまとめた読み込みによる通信回数の低減
インライン画像画像データのソースファイルの埋め込み（HTMLファイル１つの通信で完結させる工夫）
CDNデータ配信ネットワーク（データ配信の
（クライアントサイドのポイント :: Web Browser）
HTTP1.1 WAYS
HTTP1.1 HTTP/2 TO BE
<script>配置工夫 ストリームプライオリティ
CSSスプライト ストリームサーバプッシュ
インライン画像 ストリーム
CDNストリームプライオリティ
（クライアントサイドのポイント :: Web Browser）
HTTP1.1 WAYS
HTTP1.1 HTTP/2 どうすべきか
<script>配置工夫 ストリームプライオリティ 当面継続
CSSスプライト ストリームサーバプッシュ 継続
インライン画像 ストリーム 折見て廃止へ（∵保守性）
CDNストリームプライオリティ
継続（∵恩恵変わらず）
（クライアントサイドのポイント :: Web Browser）
HTTP1.1 WAYS
HTTP1.1 HTTP/2 TO BE
<script>配置工夫 ストリームプライオリティ 当面継続
CSSスプライト ストリームサーバプッシュ 継続
インライン画像 ストリーム 折見て廃止へ（∵保守性）
CDNストリームプライオリティ
継続（∵恩恵変わらず）
（クライアントサイドのポイント :: Web Browser）
移行の準備と取捨選択
SUMMARYBrowser HTTP Server
HTTP/2
（クライアントサイドのポイント :: Web Browser）
HTTP/1.1
• HTTP/1.1との共存
• HTTP/1.1での方法論を併用と維持
✔ HTTP/1.1をベースとしたコンテンツ作りをまだしばらく続ける
✔ 将来的な取捨選択のタイミング
SERVER SIDE
（サーバサイドのポイント）
POINTS
YOUR NETWORK
ClientsHTTP Server
HTTP/2
（サーバサイドのポイント）
• 対応することわりとたくさんかも
ISSUES（サーバサイドのポイント）
✔ 負荷対策（単位時間あたりのアクセス数が増えるため）
✔ 対応ミドルウェアやクラウドの選定
✔ NW中間装置（FW, LB）
✔開発メンバ・情報管理者の習熟
✔ネイティブとサーバとの協調設計
✔ チューニング、ロギングなどのノウハウが必要。
MEMO :: HTTP/2対応ミドルウェアMIDDLE WARE NOTE
Apache・2.4 + mod_http2・nghttp2 + OpenSSL・Experimental
nginx・≧ 1.9.5・OpenSSL
h2o・DeNA・Developed from scratch
MEMO :: HTTP/2対応CDNPROVIDER 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
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
SUMMARY
YOUR NETWORK
ClientsHTTP Server
HTTP/2
（サーバサイドのポイント）
• あわてて導入する必要はないけども • （イニシャル）コスト、ノウハウ蓄積の必要性 • HTTP/2対応のCDNを活用するなど、現実的で効果的な選択が可能
まとめ
SUMMARY about HTTP/2• クライアントサイドとサーバサイドとの協調設計で能力を発揮 • 現在は過渡期。
• 今後HTTP/1.1のテクニックなどを取捨選択していく必要あり。 • サーバサイドは割と考えることは多い。ノウハウの蓄積が必要。 • 慌てて導入する必要はまだない。
• HTTP/2.0対応のCDN活用などで対応できることで対応が吉。
（ごく近い将来のために） • ぼちぼち対応が必要になるので、習熟は必要。 • ノウハウを蓄積して備えよう。
CURRENT_____
• HTTP1.1との共存しながらノウハウを溜める過渡期
• 導入するにあたって、ややコストがかかる
• 焦って導入する必要はない
SUMMARY about HTTP/2
FUTURE_____
• クライアント-サーバ間の協調設計によるベネフィット
NEAR FUTURE
− @naoya : http://d.hatena.ne.jp/naoya/20130123/1358918510
「Web はインターネットになった」
• 今回のための調査をしている時に、最も印象に残った記事を紹介します。
ご清聴ありがとうございました
新しい技術を楽んで行きましょう！
