「HTTP/2通信されているか?」をブラウザで手軽に判別する方法

先日、サーバーをMixHostに変更し、当サイトをSSLに対応させました。

MixHostでSSL対応(HTTPS化)することで、次世代通信プロトコルであるHTTP/2を利用することができます。

移行後、体感的には「早くなったかな」くらいは思うのですが、途中からは慣れてしまってよくわからなくなります。それで、そのうち「ちゃんとHTTP/2になっているのか?」をチェックしたくなります。

ただ、実際にHTTP/2通信になっているのかを確認するのに、わざわざ通信ヘッダーを見たり、デベロッパーツールなどで調べたりするのは面倒くさいです。

なので「何か簡単にHTTP/2通信になっているかを調べる方法はないか?」と調べてみたところ、手軽な方法があったので紹介です。

スポンサーリンク
レクタングル(大)広告

HTTP/2とは

とその前に、HTTP/2について簡単に説明しておきます。

HTTP/2とは、通信を効率化することにより、データ受信を早くし、ページ表示の高速化にも貢献する、HTTP通信の最新バージョンです。

HTTP/1.1の場合1つのリクエストが完了するまで、原則次のリクエストを送ることができませんでした。1つの接続で1つのファイルしか読み込めないといった感じです。

けれど、16年の歳月をかけてバージョンアップしたHTTP/2では、通信を効率化させたことにより、1つの接続で複数のファイルを読み込むことができるようになりました。

これら「HTTP/1.1」と「HTTP/2」をイメージとしてデモ化したものが以下になります。

HTTP2 technology demo
HTTP/2 technology demo

HTTP2 is the future of the Web
HTTP/2 is the future of the Web

デモ的には、以下のデモページが一番分かりやすいような気がします。

HTTP vs HTTPS Test
HTTP vs HTTPS — Test them both yourself

デモは多少大げさなところはあるかもしれませんが、1つの接続で複数並列に読み込むことができるので、通信の高速化がなされています。

手軽にHTTP/2通信を判断する方法

それで、手軽にHTTP/2通信を判断する方法として、ブラウザの拡張機能を利用して判断するのが最も手軽だと思います。

HTTP/2通信を判別できるブラウザ拡張は、ChromeとFirefoxで利用できます。

ChromeでHTTP/2 and SPDY indicatorを利用

HTTP2 and SPDY indicator

Google ChromeでHTTP/2通信を手軽に判断するには、HTTP/2 and SPDY indicatorを利用するのが手っ取り早いかと思います。

「HTTP/2 and SPDY indicator」をChromeにインストールしてサイトに接続すると、HTTP/2通信されているサイトでは、以下のように「青色の稲妻マーク」が表示されます。

寝ログがHTTP2通信されているのを確認

ちなみに、HTTP/2通信されていないYahoo!とかだと「灰色の稲妻マーク」で表示されます。

HTTP2通信されていないYahoo!の状態

Yahoo!も画像等の重たいファイルなどはHTTP/2通信しているようです。

あと、HTTP/2の元になったSPDY通信の場合は「緑色の稲妻マーク」で表示されます。

SPDY通信の場合は緑色の稲妻マーク

FirefoxでHTTP/2 and SPDY indicatorを利用

FirefoxでHTTP2 and SPDY indicator

FirefoxのアドオンでもHTTP/2 and SPDY indicatorを利用することができます。

Firefoxでも、HTTP/2通信が利用されている場合は、アドレスバーの右側に「青色の稲妻マーク」が表示されます。

Firefoxで寝ログのHTTP2通信を確認

HTTP/2通信がされていないときは、「灰色の稲妻マーク」が表示されます。

FirefoxでHTTP2通信がされていないとき

Firefoxの場合は、SPDY通信の違いとかはないっぽいです。

デベロッパーツールで通信プロトコルを確認する方法

前項目では、ブラウザ拡張をインストールしてHTTP/2通信を確認する方法を紹介しましたが、デベロッパーツール等を用いて確認することもできます。

Chromeで通信プロトコルを確認する方法

Chromeで通信プロトコルを確認するには、まずデベロッパーツールを開いて「Network」を選択してください。

デベロッパーツールのネットワークタブ

次に、ヘッダーカラムを右クリックして「プロトコル(Protocol)」と「プライオリティー(Priority)」にチェックをつけます。

ヘッダーカラムを右クリックしてプロトコルとプライオリティーにチェックを付ける

すると、以下のようにプロトコルとプライオリティー(優先度)が表示されます。

Chrome デベロッパーツールで表示されたプロトコルとプライオリティー

通信プロトコルで、HTTP/2通信が使われている場合は、「H2」と表示されます。

Chromeデベロッパーツールでいろいろなプロトコルを表示

Firefoxで通信プロトコルを確認する方法

Firefoxでは、Firebugという開発ツールを使うことによって確認することができます。

Firefoxデフォルトの開発者ツールは、使い慣れていないもんで表示方法がよく分かりませんでした。

Firefoxでも同様に開発ツール(Firebug)を開いて「ネット」を選択します。

Firefoxでネットワークタブを開く

次に、ヘッダーカラムを右クリックして「プロトコル」にチェックをつけます。

ネットワークのヘッダーカラムを右クリックしてプロトコルにチェックを付ける

すると以下のように通信プロトコルが表示されます。

Firefoxのネットにプロトコルが表示される

HTTP/2通信をしている場合は、「https SPDY」と表示されます。

Yahoo!が利用している通信プロトコル

HTTP/2通信をしているサイトの例

このように、「HTTP/2の見える化」をした後、いろいろなサイトを見てみると、結構HTTP/2通信サイトがあるのに気づきます。

例えば、TwitterやFacebookなども利用しています。

TwitterはHTTP2を利用

FacebookはHTTP2を利用

日本のサービスだとあまりないんですが、画像を多く取り扱っている多く取り扱っているぱくたそも対応しているようです。

ぱくたそもHTTP2を利用

当然、HTTP/2がウリの1つであるレンタルサーバーMixHostも対応しています。

MixHostはHTTP2を利用

あと、僕もよく知らない利用していたんですが、CDNのCloudflareもHTTP/2に対応していました(以下は以前CloudFlareを使用していた僕のサブサイトに接続したとき)。

Cloudflareは、HTTP2を利用

もし、負荷対策でCloudflareを利用する場合は、負荷を軽減できたうえに、HTTP/2で通信が効率化されて読み込みが早くなる可能性があるようです。

今回は、Cloudflareの登録方法の紹介です。 Cloudflareとは、CDN(コンテンツデリバリーネットワーク)サービスを運営して...
ただしCloudflareのサーバーは、アメリカにあるので、その分接続時間がかかります。
訂正:CloudFlareは、日本(東京・大阪)にもサーバーがあるようです。基本的に、ユーザーから一番近いサーバーに自動選択されるそうです(※表示されるIPはアメリカのものがが表示されますが経路として日本サーバー経由になるようです)。
参考 Our Anycast Network Map | Cloudflare

まとめ

こんな感じで、「HTTP/2の見える化」を行いました。

実際に、サイトをHTTP/2化してみると、速くなったような気はします。ただ、以前のサイトスピードと直接比較できるわけではないので、使用しているうちに体感的にはよくわからなくなってきます。

パソコンをSSDに変更したら、「最初はかなり早くなった感覚はあるんだけど、慣れてくるとなんだかよくわからなくなってくる」みたいな感じというか(ただ、HTTP/2はPCをSSDにした時ほどの速さの体感はないかも)。

そんなときでも、今回の「HTTP/2の見える化」をしておけば、「HTTP/2通信をしてるしてる」と見えることで、多少は速くなっているような感覚(錯覚)くらいは味わえるかもしれません。

サイト HTTP/2 and SPDY indicator – Chrome ウェブストア

サイト HTTP/2 and SPDY indicator :: Add-ons for Firefox

サイト HTTP/2が利用できるレンタルサーバーMixHost