HTTP/2を実装してみた

話題(?)の新バージョン通信プロトコル「HTTP/2」を実装してみましたので、ご報告します。対象サイトは…私の個人サイトですので別途ご質問ください(笑)。

交通整理

ふわふわ

何をしたの?

私のサイトはWordPressで作成しておりましたので、「KUSANAGI(超高速WordPress仮想マシン)」の環境に引っ越しました。その為に現サーバー契約を解約し、「KUSANAGI」が対応可能なサーバーにリプレイスしました。

今回やりたかったこと

  • HTTP/2(≒SSL前提)導入
  • 超高速WordPress仮想マシン「KUSANAGI」を使ってみたい 

 
とにかく新バージョンの通信プロトコルであるHTTP/2を導入したかったので、従来のサーバー(X2サーバー)のスタンダードプランに置いてあったWordPressを替え、(「KUSANAGI」対応してくれる)サーバーへ引っ越し。併せて「KUSANAGI」が Let’s Encryptに対応していたので、新しくSSL証明書を購入せずに済みました。ちなみに今回、新しく設置したサーバーは「ConoHa」というサーバーです(参照:KUSANAGI for ConoHa|KUSANAGI)。

HTTP/2環境でLet’s Encryptを導入するには

こちらのサイトページを参考に設定しました。
参考:光の速さのWEBサーバー(nginx)をlet’s encryptでSSL化及びHTTP/2化。ついでにセキュリティ評価をA+にする。 – Qiita

 
ここまで来れば後は引越しです。
サイトを移転するためにとりあえず以下の作業のみ事前準備しておきました。

サイトの移転準備

引っ越し時は念の為にバックアップを行った上で、引っ越しプラグインの「duplicator」を使用しました。
参考:プラグインでWordPressを楽々お引っ越し!duplicatorならサーバー移転も簡単。

 
また、私のサイトは画像ファイルの容量が1.3GBを超えていたため、「wp-contents」の部分は別のZIPファイルで移動しました。詳細は以下ご紹介していきますが、今回のHTTP/2化における「ConoHa+KUSANAGI」タッグの構築結果としましては、従来と比較してざっくり以下の改善が見られました。

  • メインコンテンツのローディングと解析時間:1.4秒 ⇒ 0.7秒
  • すべてのリソースのローディング時間:3.4秒 ⇒ 2秒

 
このように約半分まで速度短縮できましたが、Apache、PHP 7、HHVM等を選択しWEBサーバーを組み替えて検証できるので、今後のチューニング次第では更に改善できそうな気がしています。

ふわふわ

…で、どうなった?

まずGoogle Chromeでの拡張機能「HTTP/2 and SPDY indicator」を設定すると、アドレスバーに「」がバッチリ表示されます!

HTTP/2-enabled

そして、表示速度ですが、ページスピードを計るGTmetrixを使用すると以下の差が出ました(対象はトップページ)。

↓従来の数値
GTmetrixで確認した従来の数値

↓今回の数値
GTmetrixで確認した今回の数値

改善されていますね♪
ちなみにPageSpeed Insightsで確認しますと、以下の違いが出ます(対象はトップページ)。

↓従来の数値
PageSpeed Insightsで確認した従来の数値

↓今回の数値
PageSpeed Insightsで確認した今回の数値

こちらでもある程度改善されています。
他にもGoogle Chromeのデベロッパー・ツールからNetworkパネルで速度確認できますが、キャッシュも影響してしまうため、正確さを感じにくく、あまりオススメはできません。

ふわふわ

感想

良かったです。ただ、せっかくHTTP/2にするからには、単純に変更設置するだけではなく、合わせて画像容量の最適化や各所の見直しも図らないとHTTP/2の100%本領発揮は実感できないかもしれません。
また、Let’s Encrypt自体は有効期限的に3ヶ月に1回証明書の更新をしなければならないのが面倒です(Let’s Encryptは3ヶ月単位の発行のため)。まぁ無料ですので文句は言いませんが、愚痴は言います(笑)。でも、今回のKUSANAGI for ConoHa|KUSANAGIではサーバーの契約が続いている限りLet’s Encryptも自動更新してくれるようですので、そこも助かりました♪

是非、HTTP/2実装のご検討の際は、ご相談ください。