こんにちは。管理人のけーちゃんです。
私はmixhost推しですが、XServerの方が良いという声が多いので悔しいです。
どうにかしてmixhostの良さを伝えたいと考えていたところ、高速化機能について比較してみることを思いつきました。
XServerの方が高速だったらどうしようという不安がありますが、mixhostを信じて比較・検証していきます。
＼目次も見てね！／
mixhost vs XServer
今回はmixhostとXServerの高速化機能を比較します。
mixhostとXServerの高速化機能は、簡単にまとめると次のような感じです
mixhost
LiteSpeedサーバー＋LiteSpeed Cacheプラグインで高速化！
速さならだれにも負けないぞ！
XServer
Xアクセラレータ＋XPageSpeedでスピードアップ！
コスパの高さで頑張るぞ！
バナーに特徴が書いてあるから、説明が少なく済んでラクチンです。
そもそも高速化とは
WordPress高速化という言葉を、レンタルサーバー公式ページで見た人も多いのではないでしょうか。
しかし実際にはWordPressは高速化できません。
WordPressはPHPというプログラム言語で作成されたアプリです。専門家から見ると少し違うのですが、細かいことはどうでもよいのです。
サーバーマシン上で動作するアプリは、一定の速度で処理されています。それを後から高速化するのは技術的に難しいのです。
ではWordPressの高速化とは、何を根拠にしているのでしょうか。
それは、疑似的な高速化です。
疑似的な高速化には様々な手法がありますが、最も有効なのが『キャッシュ』と『最適化』です。
このあとの解説で一万文字くらい書いたのですが、長すぎるのでバッサリ削除しました。
キャッシュとは
キャッシュとは、あるアクションの結果として毎回同じ成果を得る状況において、一度目のアクションの成果を保存しておき、二回目以降のアクションを行わずに保存した結果を参照することを指します。
WordPressは百万ステップにも及ぶプログラムコードで構築された非常に大きなプログラムです。そのため、Webページを生成するまで非常に時間がかかります。
時間がかかると言ってもコンピューターの世界の話なので人間から見ると一瞬です。しかし、ブラウザからWebページを要求される度に一からWebページを生成するため、要求が集中すると順番待ちが発生します。場合によっては、体感できるほど待ち時間が長くなってしまうのです。
そこでWordPressが生成したWebページのデータを保存しておき、同じWebページの要求を受けたら、保存したデータを返します。これはWordPressの外部で行われるため、とても高速です。
このようにWebページをキャッシュすることをページキャッシュと呼んでいます。
キャッシュはページキャッシュだけではありません。同様に時間がかかる処理を短縮することを目的として、様々なキャッシュが利用されています。
最適化とは
最適化とはWebページの表示に必要なデータから、Webページ表示に影響しないデータを切り捨てたり、内容を変更することで、データの総量を減らすことを指します。
データ量を減らすことで、サーバーとパソコンやスマホ間の通信量を減らすことができます。その結果、ブラウザに表示するまでの時間が短縮されます。
特に画像はスマホカメラの高解像化により、データ量が肥大化しています。そこで、違和感がない程度に解像度を減らすことでデータ量を減らすことが求められています。これを画像最適化と呼んでいます。
キャッシュ機能比較
mixhostとXServerのキャッシュ機能を表を用いて対比してみました。
| mixhost | XServer | |
|---|---|---|
| キャッシュシステム | LiteSpeedサーバー | Nginx |
| ページキャッシュ | あり | あり |
| ユーザ別ページキャッシュ | あり | なし |
| 動的ページキャッシュ | あり | なし |
| TTL（有効期限）指定機能 | あり | なし |
| ページ除外機能 | あり | なし |
| ページキャッシュ削除 | 個別指定可 | 全て削除 |
| コメントキャッシュ | あり | なし |
| REST APIキャッシュ | あり | なし |
| モバイルキャッシュ | あり | なし |
| 静的ファイルキャッシュ | 不明 | あり 有効期限：2分 |
| PHPキャッシュ (APC / OPcache) | 有効 | 有効 |
| ブラウザキャッシュ制御 | あり （TTL指定可能） | あり |
| CDNサポート | あり | なし |
思いつく限り、リストアップしてあります。
細かいことは気にせず「ふーん、そうなんだ」で流してください。重要な点だけ、解説します。
LiteSpeedサーバーとNginx
mixhostが採用しているLiteSpeedサーバーは、WordPressに最適化されたWebサーバーです。WebサーバーとはブラウザからのWebページデータ要求を受け付け、適切な方法でWebページを生成して、ブラウザにデータを返す、サーバマシン内で動作するプログラムです。
XServerが採用しているNginxは、PHPプログラムをキャッシュすることで高速化可能なWebサーバーです。しかし適切に設定する必要があり、レンタルサーバー側の腕の見せ所でもあります。
キャッシュ設定の柔軟性
表では様々な項目でmixhost側のみ『あり』になっています。これは、WordPressのLiteSpeed Cacheプラグインでキャッシュ機能の細かいカスタマイズが可能なためです。これらの設定は、Webサイトの目的や特性によってパフォーマンスに大きな影響を与えます。細かく制御することで、最高のパフォーマンスを得ることができるのです。
一方のNginxはサーバー管理者側での設定が必要なため、管理者が想定していないケースでは、パフォーマンスが低下する可能性があります。
パフォーマンスと柔軟性においては、LiteSpeedサーバーの方が優秀であると言えるでしょう。
ユーザ別ページキャッシュ
会員制サイトなどでユーザーごとにWebページをカスタマイズするケースがあります。例えば、ユーザーの好みに合わせておススメ商品を表示するケースです。この場合は、同じURLで複数のパターンのWebページが生成されます。
ページキャッシュは同じURLのページを一単位としてキャッシュします。同じURLで内容が異なる場合でも、最初にキャッシュしたページを、全てのユーザーに表示します。そのため、二回目以降のユーザーは、一回目のユーザーのページを参照することになります。そのページに住所や氏名が掲載されていたら、個人情報が漏洩することになります。このようなケースではページキャッシュを利用してはいけないのです。
LiteSpeedサーバーは、この問題を考慮したキャッシュ機能を用意しています。
会員向けサイトはページキャッシュでの高速化をあきらめるか、LiteSpeedサーバーを利用するかの二択なのです。（言い過ぎかもしれない）
キャッシュの持続時間
またLiteSpeedサーバーは、記事投稿やウィジットが更新されたタイミングでキャッシュを削除できます。これにより、ページキャッシュを保存しておく期間を長くすることができます。
NginxはWordPress側の更新を判定できないため、短い時間でキャッシュを削除する必要があります。そうしないと、ページを更新してもキャッシュが優先され、更新後のページが配信されないからです。短い時間でキャッシュが削除されると、WordPressでのページ生成回数が増大します。その分だけ速度低下を引き起こす可能性が増大します。
CDN化
さらにLiteSpeedサーバーは、簡単な操作で無料CDNを利用できます。CDNを利用することでサーバーの負担を減らすことができ、プランが想定している使用量上限を超えるまでの猶予を確保することができます。CDNについては、次のページを読んでみてください。
最適化機能比較
Webページの最適化は、次のようなデータに対して行います。
それぞれの最適化効果について確認しました。
画像最適化
まずは画像の最適化について検証します。
画像最適化の仕様
mixhostとXServerの画像最適化機能は、次の表のような仕様になっています。
| mixhost | XServer | |
|---|---|---|
| 最適化のタイミング | メディアライブラリ登録時 | ブラウザ表示時 |
| 最適化ファイルの保存先 | 元画像を上書き | キャッシュを上書き |
| 最適化の有効時間 | 復元するまで | 不明（数分単位だと思われる） |
| 元画像の復元 | 可能 | 可能 |
mixhostは画像をメディアライブラリに登録すると、画像最適化のキューに登録され、順番に処理されます。そして最適化後に元画像を上書きします。上書き時に元画像をバックアップするので、復元することができます。
XServerはブラウザから画像を要求されると元画像をブラウザに送信します。それと同時にサーバー内で画像をキャッシュして、キャッシュした画像を最適化します。そしてブラウザから同じ画像を要求されたら、キャッシュ内の最適化した画像を送信します。ただし、最適化には時間がかかるため、最適化されていない画像が送信される可能性があります。
資料が無いため体感ですが、XServerの最適化画像は数分から十分程度で無効となります。そのため、最適化されていない画像がブラウザに送信される可能性が高いです。
画像最適化の効果確認
画像最適化の効果確認は、5枚の画像を用意して、それぞれの最適化前の画像サイズと最適化後の画像サイズを比較します。
mixhostとXServerともに、元画像と同じ形式で最適化されると同時に、WebP形式での最適化画像が生成されます。JPEGやPNG等の従来画像よりもWebP画像の方が圧縮率が高いとされています。
| 画像 | 形式/縦横サイズ /ファイルサイズ | mixhost (単位:KB) | XServer (単位:KB) |
|---|---|---|---|
 | JPEG /1200×800 /403.36 KB | JPEG:141.05 WebP:162.89 圧縮率：35% | JPEG:216.1 WebP:149.1 圧縮率：37% |
 | JPEG /1200×800 /305.67 KB | JPEG:115.39 WebP:103.41 圧縮率：34% | JPEG:171.25 WebP:93.36 圧縮率：31% |
 | JPEG /1200×899 /281.43 KB | JPEG:97.45 WebP:67.27 圧縮率：24% | JPEG:151.51 WebP:61.52 圧縮率：29% |
 | PNG /841×595 /158.87 KB | PNG:43.95 WebP:73.04 圧縮率：28% | PNG:100.4 WebP:60.85 圧縮率：38% |
 | PNG /1000×744 /270.64 KB | PNG:67.07 WebP:68.44 圧縮率：25% | PNG:210.08 WebP:162.03 圧縮率：60% |
サイズが小さい方を青文字、大きい方を赤文字で記載しています。
圧縮率の数字が低い方が、圧縮率が高くなり、ファイルサイズが小さくなります。しかし圧縮率が高くなると画像が荒くなるため、必ずしも圧縮率が高い方が良いと言えません。今回生成された画像は、素人目線ですが十分な画質だと思います。
cssファイルの最適化
mixhostとXServerのcssファイルの最適化は、次の表のような仕様になっています。
| mixhost | XServer | |
|---|---|---|
| css圧縮 | あり | あり |
| CSS 結合（ローカルファイルのみ） | あり | なし |
| CSS 結合（インライン CSS・外部含む） | あり | なし |
| CCSS (遅延読み込み) | あり | あり |
| UCSS | あり | なし |
| CCSSとUCSSの組み合わせ | あり | なし |
| 最適化保持期間 | 手動で削除するまで | 数分から10分程度 （確認時の体感です） |
XServerはUCSS機能が無いのが、個人的には残念です。
下図はChromeでCSSの使用率を確認したものです。
確認方法（Chrome）：
１.デベロッパーツールを開く。ブラウザ上でマウス右クリックして表示されるメニューから『検証』を選択
2.ガバレッジを開き、ガバレッジ内の解説に従ってキャプチャを開始する
総合計バイト759,461のうち使用していない総バイト数は734,122なので、総未使用率は次のようになります。
734,122÷759,461×100 → 0.97%
CSSはWebサイトの色や形を決定する情報が記述されたデータですが、CSS定義のほとんど全てが使用されていないことになります。テーマによって割合は変動しますが、よくて90%程度です。
CSSは比較的サイズが大きなデータなので、ページ表示時間の遅延に大きな影響を与えます。そこで最適化により、不必要なデータを削除しすることでWebサイトのパフォーマンスを向上させます。
css圧縮・CSS結合
css圧縮はcssファイル内の余分な空白や改行を削除します。これにより、ほんの少しですがデータ量が削減されます。
CSS結合は、CSSファイルやhtml内のCSS定義を一つにまとめます。こうすることで、ファイルの読み込み回数を減らします。ただし結合によりレイアウト崩れを引き起こす可能性があります。インラインCSSを含めて結合することで、レイアウトが崩れる確率を減らすことができます。
CCSSとは
CCSSは、最初にブラウザで表示される範囲で使用されているCSS定義を抜き出したものです。CCSSのみをWebデータ（html）に組み込み、ブラウザ表示させます。
残りはスクリプトを使用して、後から読み込みます。
この方法ではCSSの未使用率を減らせませんが、閲覧者は最短時間でページ閲覧を開始できます。
UCSSとは
UCSSは、Webページで使用しているCSS定義のみを抜き出したものです。WebページのデフォルトCSSをUCSSに置き換えることで、未使用率を最大限に減らすことができます。
さらにCCSSとUCSSを組み合わせることで、最短時間でのページ閲覧と未使用率の削減効果を得ることができます。
しかし、スクリプトで追加した要素などを抜き出すことができないなどの理由から、ページのレイアウトが崩れる可能性があります。
UCSSでのレイアウト崩れを修正するにはCSSの知識が必要です。しかし、UCSSを利用できたなら、非常に多くの無駄を省くことができるので、積極的に利用したい機能です。
CSS最適化結果
下図はmixhostでのCSS最適化結果です。
CSSが一つのファイルにまとめられ、UCSS化されています。その結果759,461バイトが、32,798バイトに縮小されました。削減率は約96%です。
32,798バイトのうち30%程度使用されていませんが、これはレイアウト崩れを極力防ぐ目的で検出範囲を広くしているためです。
下図はXServerでのCSS最適化結果です。
759,461バイトから951,296バイトに増えました。これはCCSSでページを表示した後、CCSSとして抜き出した範囲を含む残りCSSを読み込んだためです。つまりCCSS分の定義が重複しています。
mixhostもUCSSを使用せずにCCSSのみを有効にすると、同じような結果になります。
なおXServerは、管理者の体感ですが、画像最適化と同様に数分から長くて10分程度で最適化が解除されます。
JavaScriptファイルの最適化
mixhostとXServerのJavaScriptファイルの最適化は、次の表のような仕様になっています。
| mixhost | XServer | |
|---|---|---|
| JS 圧縮 | あり | あり |
| JS 結合（ローカルのみ） | あり | なし |
| JS 結合（外部JS含む） | あり | なし |
| JS 遅延読み込み | あり | あり |
JS 圧縮
JavaScriptコードから不必要な空白や改行、コメントを削除します。
JS圧縮はJavaScript仕様の深い理解と十分なテストが必要なため、不具合がおきないレベルでの実装は非常に困難です。
mixhostとXServerのJS圧縮はこの点をクリアしていると思われるので、とりあえず有効にしても問題ないでしょう。
JS 結合
JS結合は複数のJavaScriptファイルを一つのファイルにまとめます。こうすることで、サーバーへのデータ要求回数を減らすことができます。
ただし、実行する順番に依存するものコードが正常に動作しないなどの不具合がおこる可能性があります。そのため、JS結合はあまりお勧めできない機能です。
JS 遅延読み込み
JS遅延読み込みは、JavaScriptコードの実行を遅らせることでWebページの閲覧開始までの時間を削減する機能です。
通常はJavaScriptコードが読み込まれ、実行されるまでWebページを表示できません。
JS結合と同様に不具合がおこる可能性がありますが、mixhostとXServerともに最小限に抑えられています。とりあえず有効にしても問題はないでしょう。
高速化比較
PageSpeed Insightsを使用して、mixhostとXServerの高速化を検証・比較した結果が次の表です。
PCでの結果はよくなる傾向があるため、モバイルでの結果を比較しています。
| mixhost | XServer | |
|---|---|---|
| 高速化機能を全てオフ （モバイル） |   パフォーマンス：85 読み込み時間：4.9秒 |   パフォーマンス：80 読み込み時間：5.1秒 |
| 高速機能オン 一時間後 （モバイル） |   パフォーマンス：90 読み込み時間：4.3秒→0.6秒改善 |   パフォーマンス：83 読み込み時間：4.4秒→0.7秒改善 |
| 高速機能オン ニ時間後 （モバイル） |   パフォーマンス：90 読み込み時間：4.3秒 |   パフォーマンス：83 読み込み時間：4.5秒 |
| 参考： 高速機能オン ニ時間後 （PC） |   |   |
mixhostとXServerともに、設定できる項目の全てを有効にしてあります。
まずは機能オフの状態で計測したところ、mixhostの方が良いパフォーマンスとなっています。これは単純に転送速度の差異によるものですね。
転送速度についてはコンマ数秒の差しかありませんが、高速なインターネット網が完備されている日本においては、コンマ一秒の差でも大きいです。
次に高速化機能とキャッシュ機能をオンにしてブラウザでページを数回表示した後、一時間経過後に測定しました。これは、最適化処理に時間がかかることを考慮したからです。mixhostのパフォーマンス90に対してXServerは83という結果になりました。
XServerは最適化およびキャッシュの有効期限が短いため最適化されていない可能性がありますが、それでも全機能オフよりも効果が出ていますね。
さらに一時間後に計測しましたが、同じような結果になりました。
今回は比較対象としてWordPressテーマのXWRITEに、画像最適化比較で使用した5枚の画像を貼り付けただけのページを使用しています。XWRITEはXServer製ですがmixhostでも利用可能な高速軽量テーマです。ユーザー提案での機能追加が活発なので将来性抜群なのもよい点ですね。
まとめ
このページではmixhostとXServerの高速化機能について検証と比較をおこないました。
高速化はキャッシュと最適化にて行われます。
XServerはキャッシュと最適化機能の有効化/無効化のみで、詳細な設定ができません。また、キャッシュと最適化はブラウザ表示時に行われるため初回は無効となります。さらに有効時間が短いため、無効状態でページが表示される可能性が高いです。
mixhostはキャッシュと最適化ともに詳細な設定が可能です。また、有効期限を一週間や一か月など長い時間で設定できます。そのため、多くの閲覧者に高速でページを送信することができます。
このような結果から、管理人はmixhostをおススメします。
ですがXServerはとてもコスパが高いレンタルサーバーです。重要なのはスピードではなく記事の内容なので、その点に自信がある人はXServerを選んでも良い結果をだせるはずです。
mixhostとXServerの公式ページを確認してみてね！
言い忘れてました
mixhostのキャッシュ機能は無料ですが、最適化機能は有料です。ですが使い切れないほどの無料枠が毎月支給されるため、非常に大規模なサイトでなければ無料で利用できます。
管理人も無料で使用できているので、安心して利用してくださいね。