エックスサーバーにWordPressと相性がよさそうな高速化機能がついたので試してみた

当サイトは、エックスサーバー上にレンタルスペースを借りて運営しています。

ついでに、Simplicityも、そのスペースに相乗りしてマルチサイト運営しています。

これら2つのサイトの運営で、それなりの負荷があるにもかかわらず、月額1000円(税抜)で済むし、パフォーマンスも良いしで、ものすごく気に入っています。

これまでに、5つほどのレンタルサーバーを借りてきましたが、コスパは一番です。

で、そんなエックスサーバーが11月14日にサイト高速化機能が追加されたというので、試しに使ってみたら、それなりに効果があったので紹介です。

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

WordPress高速化機能(mod_pagespeed)

エックスサーバーは、11月14日に「mod_pagespeed設定」機能を追加しました。

その、機能の概要は、メールに以下のように書かれています。

この度エックスサーバーでは、Webサイトのコンテンツを最適化し、表示速度を向上させる『mod_pagespeed設定』機能を追加しました。

『mod_pagespeed設定』機能はGoogle社により開発された拡張モジュール「mod_pagespeed」を使用し、サーバー側でWebサイトの画像、キャッシュ、JS/CSSなどの最適化処理を実施する機能です。

本機能をご利用いただくことでWebサイトアクセス時に発生する無駄な通信を削減し、Webサイト表示速度の向上を図ることが可能です。

国内レンタルサーバー会社として初めて、「mod_pagespeed」をワンクリックで適用できる機能を提供いたします。
(2014年11月17日時点、当社調べ)

ニュース | レンタルサーバー 高速・高機能・高安定性の【エックスサーバー】

なんと、国内初の高速化機能のようです。

この、mod_pagespeedを利用することにより画像、キャッシュ、JS/CSSなどの最適化処理が行われ、サーバーとクライアント間の無駄な通信を削減し、Webサイトの表示速度をより高速化することが可能となるようです。

箇条書きにすると主に以下のようなことができるようになります。

  • CSSファイル、JavaScriptファイルなどの圧縮
  • 最適な画像タイプへの変換、軽量化
  • 同種のファイル(画像、CSS、JavaScriptファイルなど)を一つにまとめ、サーバーとクライアント間の無駄な通信(リクエスト)を削減
  • CSSファイル、JavaScriptファイル、画像ファイルのキャッシュ有効期間の延長
  • 小さなファイルサイズのCSSやJavaScriptをHTML内に埋め込む

これはすごい。上記のようなファイルをふんだんに使用するWordpressにはもってこいの機能です。

しかも、設定は簡単というのだから、やらない手はないじゃないですか。

mod_pagespeedの設定

この、「mod_pagespeed設定」がめちゃくちゃ簡単です。

手順でいうとたったこれだけ。

  1. サーバーにログイン
  2. ドメインを選択
  3. mod_pagespeed機能をオンにする

以下では、簡単に方法を説明します。

まずはXSERVERのサーバーパネルからログインします。

すると、以下のようなコントロールパネルが表示されるので、対象のドメインを選択し、「mod_pagespeed設定」をクリックします。

mod_pagespeed設定

すると次の画面に移動するので「ONにする」をクリックするだけです。

mod_pagespeed設定オン

たったこれだけです。最初この機能を知った時、「高速化設定か…、設定とか面倒くさそうだな…。」などと思っていたのですが、簡単すぎて、拍子抜けしたほどです。

一応、設定方法を記したマニュアルも公開されているのですが、見る必要もなかったです。(リンク先には、mod_pagespeedの詳しい解説もあるので、それは読んでおくと良いかも)

当サイトのこれまでの高速化

mod_pagespeedの効果を確かめる前に、これまで当サイトがしてきた高速化について簡単に説明します。

当サイトでは、いろいろな高速化方法のメリット・デメリットを考慮に入れながら高速化した結果、以下の5つの方法に落ち着きました。

  1. 画像サイズを減らす
  2. ブラウザキャッシュを有効にする
  3. ページリソースを圧縮する
  4. コードなどのリソースを縮小する
  5. CDNを利用してサーバーの負荷を減らす

詳しい方法は、以下に全て書いてあります。

ブログをダイエット!簡単15分でWordpressを高速化する為の5つの「減らす」設定
  最近ブログの高速化をいろいろ試していました。 その中で、見た目を特に変更することなく簡単にできて効果も高い高速化手段を自分...

今回、mod_pagespeedの効果を測るにあたり、一応このサイトに最適化された高速化設定と比較してみたいと思います。

効果を比較してみた

今回効果を比較するのに、GTmetrixというパフォーマンスチェックツールを使用してみたいと思います。

比較するものは、以下の2つとなります。

  • 従来の高速化設定
  • 従来の高速化設定+mod_pagespeed

では比較結果です。

当サイト(従来の設定)

寝ログ(従来の設定)

  • スピードグレード:A(92%)
  • YSlowグレード:D(68%)
  • ページ読み込み速度:6.56秒
  • トータルページサイズ:1.59MB
  • トータルリクエスト数:141

僕は、テーマ作成などでサイト上のソースを確認する必要があるので、現在、JavaScript、CSS、HTMLのソースの縮小は行っていないので、YSlowグレードが少し低くなっています。

当サイト(従来の設定+mod_pagespeed)

でこれが、mod_pagespeedを適用した後の結果です。

寝ログ(mod_pagespeed適用後)

  • スピードグレード:A(92%)
  • YSlowグレード:D(69%)
  • ページ読み込み速度:5.77秒
  • トータルページサイズ:1.58MB
  • トータルリクエスト数:130

こうしてみると、一見大したことなさそうですが、以下のような変化があります。

  • 読み込み速度:6.56秒→5.77秒
  • ページサイズ:1.59MB→1.58MB
  • リクエスト数:141→130

ただ、サーバーにログインしてボタンをポチっただけでこれだけの効果が出れば、十分すぎるような気がします。

テーマ配布サイト(従来の設定)

一応、同様の設定をしているテーマ配布サイトの結果も見てみます。(サーバーは同じ)

テーマ配布サイト(従来の設定)

  • スピードグレード:A(94%)
  • YSlowグレード:D(65%)
  • ページ読み込み速度:9.04秒
  • トータルページサイズ:3.72MB
  • トータルリクエスト数:137

こちらは、Wordpressのフロントページに「固定ページ」を表示させていて、画像を多く使用しているので読み込みに、時間がかかりますし、ページサイズも大きいです。

テーマ配布サイト(従来の設定+mod_pagespeed)

こちらがmod_pagespeed適用後です。

テーマ配布サイト(mod_pagespeed適用後)

  • スピードグレード:A(94%)
  • YSlowグレード:D(67%)
  • ページ読み込み速度:6.75秒
  • トータルページサイズ:3.72MB
  • トータルリクエスト数:137

こちらは、以下のような変化がありました。

  • 読み込み速度:9.04秒→6.75秒
  • ページサイズ:3.72MB→3.75MB
  • リクエスト数:137→127

こちらは、ページサイズは多少上がりましたが、ページ読み込みが2秒以上も早くなりました。リクエスト数も減っています。

ページの読み込み速度

もちろん、サーバーの混雑状態によって、ページの表示スピードも変わるのですが、上記キャプチャは、同時間(1、2分以内)に行っています。

また、同様のテストを3回ほど行ってみたのですが、全て上記に書いたものと、ほとんど変わらない結果が出ました。

まとめ

今回、エックスサーバーのmod_pagespeedによる高速化設定は、やってみる価値はかなりあると思います。何せ、ボタンを押すだけですから。嫌だったら戻せばいいだけです。

それに、自分なりに最適化した高速化設定に加えて、ただ設定をオンにするだけで、これだけ効果があるとなれば、言うことはありません。

最後に、一応注意点も書いておきます。マニュアルによると、mod_pagespeedを利用すると、以下のようなこともあります。

  • 最適化処理の影響でメモリ使用量やCPU負荷が若干上昇する場合がある
  • ブラウザやサーバーコンテンツの内容によってはサイトの表示が崩れることもある

mod_pagespeedについて調べてみると、その原理上をマシンリソースをかなり消費するようです。

サーバー側としては、かなり負荷がかかりそうで、こういった設定を回避したいところでしょう。しかし、おそらくエックスサーバーというサービスの性質上、ユーザーの利便性を一番に考え、このような機能を追加したのではないかと思います。

他のサーバーが、この機能を導入していない(国内レンサバ初)というのは、こういったことも関係しているのかもしれません。

とりあえずこのサイトでは、表示崩れもないようなので、今後もこの機能を、ありがたく利用させてもらおうと思います。

追記(2014/11/24):mod_pagespeedのキャッシュは、ブラウザのリロードボタンを押しても更新されないので、注意が必要です。

WordpressでXSERVERのmod_pagespeedを利用して高速化する場合、CSSをカスタマイズしても反映されない場合があるので注意が必要
先日、エックスサーバーにmod_pagespeedを利用した高速化機能が追加されました。 この機能、エックスサーバーにログインして...