先日、サーバーを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」をイメージとしてデモ化したものが以下になります。
HTTP/2 is the future of the Web
デモ的には、以下のデモページが一番分かりやすいような気がします。
HTTP vs HTTPS — Test them both yourself
デモは多少大げさなところはあるかもしれませんが、1つの接続で複数並列に読み込むことができるので、通信の高速化がなされています。
手軽にHTTP/2通信を判断する方法
それで、手軽にHTTP/2通信を判断する方法として、ブラウザの拡張機能を利用して判断するのが最も手軽だと思います。
HTTP/2通信を判別できるブラウザ拡張は、ChromeとFirefoxで利用できます。
ChromeでHTTP/2 and SPDY indicatorを利用
Google ChromeでHTTP/2通信を手軽に判断するには、HTTP/2 and SPDY indicatorを利用するのが手っ取り早いかと思います。
「HTTP/2 and SPDY indicator」をChromeにインストールしてサイトに接続すると、HTTP/2通信されているサイトでは、以下のように「青色の稲妻マーク」が表示されます。
ちなみに、HTTP/2通信されていないYahoo!とかだと「灰色の稲妻マーク」で表示されます。
あと、HTTP/2の元になったSPDY通信の場合は「緑色の稲妻マーク」で表示されます。
FirefoxでHTTP/2 and SPDY indicatorを利用
Firefoxのアドオンでも「HTTP/2 and SPDY indicator（配布終了）」を利用することができます。
Firefoxでも、HTTP/2通信が利用されている場合は、アドレスバーの右側に「青色の稲妻マーク」が表示されます。
HTTP/2通信がされていないときは、「灰色の稲妻マーク」が表示されます。
Firefoxの場合は、SPDY通信の違いとかはないっぽいです。
デベロッパーツールで通信プロトコルを確認する方法
前項目では、ブラウザ拡張をインストールしてHTTP/2通信を確認する方法を紹介しましたが、デベロッパーツール等を用いて確認することもできます。
Chromeで通信プロトコルを確認する方法
Chromeで通信プロトコルを確認するには、まずデベロッパーツールを開いて「Network」を選択してください。
次に、ヘッダーカラムを右クリックして「プロトコル（Protocol）」と「プライオリティー（Priority）」にチェックをつけます。
すると、以下のようにプロトコルとプライオリティー（優先度）が表示されます。
通信プロトコルで、HTTP/2通信が使われている場合は、「H2」と表示されます。
Firefoxで通信プロトコルを確認する方法
Firefoxでは、Firebugという開発ツールを使うことによって確認することができます。
Firefoxでも同様に開発ツール（Firebug）を開いて「ネット」を選択します。
次に、ヘッダーカラムを右クリックして「プロトコル」にチェックをつけます。
すると以下のように通信プロトコルが表示されます。
HTTP/2通信をしている場合は、「https SPDY」と表示されます。
HTTP/2通信をしているサイトの例
このように、「HTTP/2の見える化」をした後、いろいろなサイトを見てみると、結構HTTP/2通信サイトがあるのに気づきます。
例えば、TwitterやFacebookなども利用しています。
日本のサービスだとあまりないんですが、画像を多く多く取り扱っているぱくたそも対応しているようです。
当然、HTTP/2がウリの1つであるレンタルサーバーmixhostも対応しています。
あと、僕もよく知らない利用していたんですが、CDNのCloudflareもHTTP/2に対応していました（以下は以前CloudFlareを使用していた僕のサブサイトに接続したとき）。
もし、負荷対策でCloudflareを利用する場合は、負荷を軽減できたうえに、HTTP/2で通信が効率化されて読み込みが早くなる可能性があるようです。
参考 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（配布終了）
