HTTP/2によるサイト表示速度の変化を徹底検証(ロリポップ!・mixhost・エックスサーバー)



2017年3月にロリポップ!が次世代の通信方式である、HTTP/2 に対応しました。

HTTP/2 は従来の HTTP/1.1 と比較して、効率的にデータのやり取りを行えるため、Webサイトの表示速度向上が期待できると言われています。

そこで、日本のレンタルサーバー業界で、いち早く HTTP/2 を採用していた mixhost と ロリポップ! で、HTTP/2 によるサイトの表示速度の変化を確認してみたいと思います。

はたして、本当に HTTP/2 でサイトの表示速度が速くなるのでしょうか?



ロリポが次世代規格HTTP/2に対応!hetemlやグーペでもSSL証明書が無料~に(ゆる系マンガ解説も)


ロリポップ!のHTTP/2比較サイトの速度変化

まず、ロリポップ!で HTTP/2 をリリースした際に公開された、従来の HTTP/1.1 と HTTP/2 の速度の違いを体感できるページがありますので、こちらの表示速度を確認してみましょう。

以前書いた、HTTP/2 リリース時の記事では、HTTP/2 でサイトの表示速度が向上することが確認できましたが、今回の検証に使用する、サイト速度のパフォーマンスを測定できる GTmetrix での速度も比較してみます。

HTTP/1.1

ロリポップ!のHTTP/2速度比較サイトHTTP/1.1
https://http1-1-contents.com/

HTTP/2

ロリポップ!のHTTP/2速度比較サイトHTTP/2
https://http2-contents.com/


プロトコル HTTP/1.1 HTTP/2
平均値 6.8 5.2

※平日に2~3時間ごとに 7回チェックした平均値



上記のように GTmetrix で確認した場合も、従来の HTTP/1.1 より HTTP/2 のほうが表示が速いという結果が出ました。

ちなみに、このロリポップ!のサイトですが、テキストは少なくて画像が非常に多く、全部で約35枚、トータルのページサイズが 7.21MBと、一般的なサイトよりはかなり大きくなっています。(標準的な Webサイトは、2.4MB程度)


HTTP/2サイトでの表示速度の検証条件

では、現時点で HTTP/2 を利用可能な、mixhost とロリポップ!に作成したサイトで、実際の表示速度を比較してみましょう。速度比較は、上で触れた GTmetrix を使用します。

以下に、前提として検証条件の詳細を挙げておきます。


測定サイトの条件

  • WordPress でサイトを作成
  • HTTP/1.1(SSLなし)と HTTP/2(+SSL)の平均速度で比較
  • 平日の9:00~24:00 の間で、2~3時間おきに合計 7回実施

利用したレンタルサーバー

レンタルサーバーは、現時点で HTTP/2 が利用可能な mixhost とロリポップ!に加え、比較用としてエックスサーバーでも確認しています。

また、mixhost では PHP7.1 が利用できますが、WordPress との相性が悪いことがあったため、PHP7.0 を使用しています。(エックスサーバーも、検証時にはまだ PHP7.1 が利用できなかったため PHP7.0 利用)

レンタルサーバー PHPのバージョン
mixhost(スタンダード) PHP 7.0(「LiteSpeed Cache Plugin」利用なし)
ロリポップ!(エンタープライズ) PHP7.1 モジュール版
エックスサーバー(X10) PHP 7.0(「mod_pagespeed」利用なし)

測定サイトの4パターン

さらに、サイトのコンテンツ内容によりどう変化があるかを確認するため、合計 4つのパターンのサイトを作成し、比較してみます。

サイトの種類 コンテンツの内訳
ノーマルサイト 文字数 約3000文字+画像1枚
長文サイト 文字数 約37,000文字+画像1枚
長文+画像多めサイト 文字数 約37,000文字+画像6枚(平均66KB/枚)
画像のみ多数サイト 画像32枚(平均82KB/枚)

HTTP/2サイトの表示速度の結果は?

では、各サイトにおける表示速度の結果を、順番に見ていきましょう。


1. ノーマルサイト

ノーマルサイト HTTP/1.1(SSLなし) HTTP/2(SSLあり)
平均値 最小値 最大値 平均値 最小値 最大値
mixhost 1.5 1.2 1.9 1.5 1.0 2.6
ロリポップ! 1.6 1.2 2.3 1.6 1.1 2.6
エックスサーバー 1.1 1.0 1.4 1.4 1.3 1.6



まず、ノーマルサイトの結果ですが、mixhost と ロリポップ!は、HTTP/2 の最小値が 0.1 秒ずつ縮まっています。しかし、最大値に関しては、逆に伸びていますので、結果的に平均値はどちらのレンタルサーバーも HTTP/1.1 と HTTP/2 で全く同じ結果になりました。

ちなみに、エックスサーバーを見ると、やはり以前の検証結果(WordPressサイトの常時SSL化で表示速度はどう変わるか?)と同様 SSL ありのほうがどの値も速度が遅くなっています。


2. 長文サイト

長文 HTTP/1.1(SSLなし) HTTP/2(SSLあり)
平均値 最小値 最大値 平均値 最小値 最大値
mixhost 2.7 2.0 4.8 2.7 2.2 3.4
ロリポップ! 2.6 1.8 4.6 2.5 2.1 3.4
エックスサーバー 2.3 1.8 3.4 2.3 2.0 2.5



次は、テキスト量を10倍以上に増やしたサイトです。こちらは、最小値は若干遅くなっていますが、最大値は HTTP/2 のほうが速く、ロリポップ! では平均値でも HTTP/2 の速度が優っています。(mixhost では変わらず)

ただ、最大値が速くなっている点については、なぜか HTTP/2 を使用していないエックスサーバーでも同じ状況なので、HTTP/2 の影響とは言い切れないですね。


3. 長文+画像多めサイト

長文+画像多め HTTP/1.1(SSLなし) HTTP/2(SSLあり)
平均値 最小値 最大値 平均値 最小値 最大値
mixhost 2.4 2.1 2.7 3.2 2.3 5.1
ロリポップ! 2.1 1.8 3.5 2.3 2.0 2.7
エックスサーバー 2.3 2.0 2.8 2.5 2.2 3.3



次は、テキスト量の多いサイトに、画像を少し増やしたものです。

こちらも、ロリポップ!では最大値が HTTP/1.1 よりも速い結果が出ているため、平均値ではそれほど変化はありませんが、mixhost はややブレが大きく、いずれも HTTP/2 が大きくなっています。

エックスサーバーも SSL ありのほうがすべての値が大きくなっていますね。


4. 画像のみ多数サイト

画像のみ多数 HTTP/1.1(SSLなし) HTTP/2(SSLあり)
平均値 最小値 最大値 平均値 最小値 最大値
mixhost 3.3 2.8 4.8 4.4 2.3 9.4
ロリポップ! 2.1 1.7 2.5 2.1 1.6 2.5
エックスサーバー 2.0 1.8 2.8 2.2 2.0 2.5



最後は画像のみ多数を掲載したサイトです。ロリポップ!の比較サイトの構成に近い感じですね。

こちらは、mixhost とロリポップ!で最小値が若干縮まっています。mixhost は 3つ目の「長文+画像多めサイト」と同様、最大値のブレが大きくなってしまっているため、トータルでは HTTP/2 が遅くなっていますが、ロリポップ!はすべての値がほぼ同じ数値になっています。

エックスサーバーはいずれも SSL が遅くなっていますね。


HTTP/2でどう変わる?サイトの表示速度を詳しく検証まとめ

以上、従来の HTTP/1.1 と 次世代規格の HTTP/2 でのサイト表示速度を比較してみました。

結果からいうと、今回作成した 4パターンの WordPress サイトでは、従来の HTTP/1.1 より HTTP/2 のほうが表示が速くなる、と言えるような結果は出ませんでした



実はロリポップ!が HTTP/2 の提供を始める前に、すでに mixhost で検証を行っていたのですが、やはりハッキリした結果がでない、というかむしろ悪い結果が出ていたため、今回はサイトも 4パターンに増やして、色々な角度から検証をしてみたのですが、ロリポップ!でも目に見えるような差は出ませんでした。

最初に紹介した、ロリポップ!の比較ページは、明らかに HTTP/2 のほうが表示速度が速いという結果が出ていましたが、おそらく再現性が高くなるように、かなり細かくチューニングしているのだと思います。



ただ、ノーマルサイト、長文サイトではやはり地力の強いエックスサーバーが速かったのですが、長文+画像、画像のみ多数の 2サイトに関しては、ロリポップ!のほうが速い結果が出ていますので、総合的にみると HTTP/2 の影響はあると言えるかもしれません。

また、レンタルサーバー業界も技術革新が非常に速いため、今後の Web が向かう方向性によっては、HTTP/2 が大きな力を発揮するようになっていくと思います。今後はロリポップ!や mixhost 以外もどんどん HTTP/2 を採用してくると思いますので、また別の機会に色々検証してみたいと思います。