HTTP/2で爆速。ブラウザ表示速度が驚異的に速くなる実験結果

HTTP/2で爆速。ブラウザ表示速度が驚異的に速くなる実験結果
■ 店頭より得で、予約しやすいオンラインショップ。
 → ドコモオンラインショップ
 → auオンラインショップ
 → ソフトバンクオンラインショップ

最新のiPhoneを得して乗り換えるなら、最大6万円のキャッシュバックがある
→ SMARTPHONE STORE

Webの標準プロトコルであるHTTP通信が策定されたのが1991年(HTTP/0.9)。そこから1997年のHTTP/1.1(現状仕様)まではあっという間に決まりました。その後Webが当たり前のように使われるようになって、ブラウザも進化しましたがHTTPの仕様は1997年のままでした。

それが、やっと現状の技術に即した標準プロトコルHTTP/2に移行しようとしています。

HTTP/2の1つの売りは帯域の効率的利用です。

サーバーサイドでは、コンテンツデータのダウンロードに圧縮技術を使うことが当たり前になってますが、HTTP/2レスポンスヘッダもHPACKという圧縮技術が使われ、すべてのデータが高速化されることを前提としています。

HTTP/1.1の問題点

HTML Head of line Blocking

ブラウザにおける制限で、1度のTCP通信が4〜6つの接続に制限されています。これは6車線の高速道路に料金所が1つしかないため、常に渋滞を起こしているのと同じです。

例えば、HTTP/1.1の環境では、Javascriptの呼び出し回数やページ内の画像数が多い場合など6セッションずつしか処理がされないため、読み込み完了する時間が無意味に遅くなっているページが多々見られます。

当社のWEBサイトをChromeブラウザで見てデバッグツールで確認した所、確かに6個ずつのTCPに分かれていることが確認できます。上が終わらないことには次が始まらない状態です。

image07

パケット数のオーバーヘッドは常々問題になっていて、Googleなどは、ページ内のUIで使用するアイコンなどを1つのファイルにして切り抜きをして表示をするなど工夫を繰り返してきました。

HTTP/2では100以上の並列接続が可能になりますので、使える帯域は効率よくすべて使えるようになります。

ネットワーク通信の比較

HTTP/1.1はヘッダ情報がサーバー毎に任意設定という点が、通信効率を悪くしている原因らしいです。
HTTP/2においては、データ整理がされていて、おまけに圧縮がかかっているので、ヘッダ読み込みに時間が掛かることもなくなりそうです。

デバッグツールの画像で比べてみると・・・

HTTP/1.1

image05

HTTP/2

image08

見るからに、HTTP/2の方がヘッダボリュームがすくないですね。
ちなみに、HTMLソース読み込み速度も
HTTP/1.1 = 486msに対して、HTTP/2 = 7ms
という驚異的スピードです。

HTTP/2とSPDYのブラウザ対応状況

http://caniuse.com/#feat=spdy

上記URLで確認した所、全てのブラウザの最新バージョンで対応が完了しているのがわかります。
時代はHTTP/2を受け入れ準備が完了しているという事ですね。

HTTP/2の構築方法

世の中、ApacheとIISとNginxがほとんどのWEBサーバーモジュールとして使われていますが、どれも今現在において、HTTP/2に対応できていません。

とりあえず、手っ取り早く構築するために「Nghttp2」をセットしてみたいと思います。

まずは、OSとして「CentOS7」を用意。※OS、の構築手順は省きます。

Nghttp2のインストール

まずは必要なライブラリ関連のインストール

モジュールのダウンロードからインストール。
https://github.com/tatsuhiro-t/nghttp2/releases/latest
このサイトでバージョンを確認。
※現時点でのバージョンは v1.3.4でした。

SSL証明書の作成(今回は自己証明書)

Nghttp2の設定

下記情報を登録

systemd設定

ファイル作成

下記データを登録

設定反映

確認

起動処理

起動

TCPチェック

作ったサーバーでショーケース・ティービーのホームページを擬似的に設置して、本番のHTTP/1.1とHTTP/2の速度比較をしてみました。

HTTP/1.1

image11

HTTP/2

image04

比較

DOMContentLoaded : (HTTP/1.1)1.67s (HTTP/2)1.02s
Load : (HTTP/1.1)2.24s(HTTP/2)1.70s
Finish : (HTTP/1.1)3.52s(HTTP/2)1.72s

結果

画像パスなどを変更している関係で、ファイル総数と容量、一部Not Foundなど若干違っていますが、それでもHTTP/2の方がダントツに速くなっていることが判ります。

今回はオレオレ証明書でテストしましたが、本番サーバーでも、この設定にすると、サイト速度も劇的に向上することがわかりました。

あと、ネットワークログの図から分かる通り、「通常表示」は、6個ずつの段々表示になっているのに大して、「HTTP/2」では、一括して全てのパケットが走っているのが見て分かります。
※早い理由はこれですね。

まだ、apacheやnginxが対応していない上に、centosも6系ではインストールが難しいのですぐに実践導入とはいきませんが、今後対応バージョンが出てくることで、間違いなく移行されていくことは明確です。

■最新のiPhoneの購入・機種変更なら店頭より得で、予約しやすいオンラインショップ。
機種の頭金や使わないオプションパックをつけて年間何万円も損していませんか?
オンラインショップなら故障のサポートもしっかりしていて最低限の費用。待たされることもありません。
 → ドコモオンラインショップ
 → auオンラインショップ
 → ソフトバンクオンラインショップ

最新のiPhoneを得して乗り換えるなら、最大6万円のキャッシュバックがある
→ SMARTPHONE STORE
がお得です。