エックスサーバーで高速化オプション「mod_pagespeed」が導入されました。そのメリット・デメリットを検証してみます。ついでにFastCGI設定もして、WordPress利用中の人向けに対応プラグイン設定についても紹介します。
ゆめぴょんです。こんちはっ(^^)/
つい最近、エックスサーバー
が管理画面をリニューアルしてかなり使いやすくなりました。高速化オプション「mod_pagespeed」も設定できるようになり、ますます他社に差をつけてきましたね。私の移転時のことは下記事を参照してください。
また、FC2ブログからエックスサーバーのWordPressへ移行した時の細かい方法については、下記事を参考にしてください。
エックスサーバーの「mod_pagespeed」導入についてはもっと早く記事にしようと考えてましたが、画質劣化のデメリットが大きく感じたのでいろいろ試したりしてました。その辺についても共有します。
mod_pagespeedとFastCGIの概要と設定方法
エックスサーバーの管理画面で設定できる「mod_pagespeed」と「FastCGI」について、エックスサーバーのマニュアルから参照してみました。
mod_pagespeedとは？
Googleが開発してたんですね。
Google社により開発された拡張モジュール「mod_pagespeed」を使用して、Webサイトの表示速度を向上させる機能です。
「mod_pagespeed設定」を有効にすると、ファイルを圧縮してデータ転送量を削減する、同種のファイルを一まとめにして無駄な通信を削減するなどの最適化処理を実施します。
この最適化処理により、Webサイトにアクセスしたブラウザはデータ転送量が減少し、また、ページのロード時間を短縮できるため、Webサイトの表示速度改善を期待することができます。
エックスサーバーでのmode_pagespeedの設定方法は、マニュアルページの下の方で確認できます。とても簡単ですよ。
⇒mod_pagespeed設定方法 – エックスサーバー マニュアル
FastCGIとは？
PHPのキャッシュのようなものなので、PHPで動いてるWordPressなどCMSでも効果はありそうです。
「FastCGI」とは、プログラム実行時に必要な「プロセスの起動/終了」の処理を、初回実行時に保持し、2回目以降の実行時には、該当の処理を省略することでCPU負荷の軽減を行う仕組みのことです。
PHPへのWebアクセスごとに行っていた「プロセスの起動/終了」の処理が省略されるため、アクセス数が多いほどCPUの負荷軽減に大きな効果が期待できます。アクセス数が多いサイトなどでは本設定を有効にすることが強く推奨されます。
また、本機能の設定を行う際には、PHPプログラムのキャッシュ、高速化を行う拡張モジュール「APC」や「OPcache」のご利用設定も可能です。併用することで、さらなるPHPの高速化が期待できます。
エックスサーバーでのFastCGIの設定方法も、マニュアルページの下の方で確認できます。
⇒FastCGIの設定方法 – エックスサーバー マニュアル
可能ならAPC設定もしておきましょう。そしてWordPressの高速化プラグイン「001 Prime Strategy Translate Accelerator」を使ってる場合は、キャッシュタイプをAPCに設定しましょう。
エックスサーバーのmod_pagespeed設定のメリット・デメリット
メリットとデメリットについてです。デメリットで気になる2点については、解決方法も考えてみました。
メリット
メリットについては、上の説明とも重複しますが、下のとおりです。結果的に無駄なリクエストを削減して、サイト・ブログの表示を高速化しています。
- CSS、JavaScript、画像ファイルなどの圧縮・最適化
- 同種のファイルを一つにまとめ、サーバーとクライアント間の無駄な通信を削減
- CSS、JavaScript、画像ファイルのキャッシュ有効期間の延長
- 小さなファイルサイズのCSSやJavaScript、アイコン画像などをHTML内に埋め込む
デメリット
一方で少しですが、デメリットもあります。
- 最適化処理の影響でメモリ使用量やCPU負荷が若干上昇する場合がある
- ブラウザやサーバーコンテンツによってはWebサイトの表示が崩れる
- キャッシュ処理の影響によりCSS、JavaScript、画像の反映が遅れる場合がある
- 一部画像ファイルの画質が低下する場合がある
1,2のデメリットについては、私の環境では全く問題ありませんでした。もし表示が崩れて見える人がいたら、OSやブラウザを教えてください。
3については、WordPressテーマを頻繁に修正する人などは面倒なことになりますが、簡単な解決策を考えてみました。
4については、確かに画像の劣化が目立ちます。特にサムネイル画像をスマホで見た時に荒くなって見えます。旅行やグルメ系の記事が多いブログなどでは、mod_pagespeedをOFFにした方がいいかもしれません。
mod_pagespeedのデメリット解決方法
エックスサーバーでmod_pagespeedをONにした時に、CSS、JavaScriptの反映が遅延することと画質劣化の、2つのデメリットを解決する方法です。
CSS・JavaScriptの修正を即時反映させる方法
例えばCSSファイル「style.css」などを修正した時に、それを読み込んでいる箇所の最後に「?v=1.01」などを加えれば即時反映されます。
[html] [/html]
JavaScriptでも同様です。修正するたびに「?v=1.03」というように数字を変えていくだけで即時反映されます。しばらく修正しない場合はこの部分を削除しておきましょう。
WordPressの場合はテーマファイル「header.php」を毎回書き換える必要があって面倒ですが数回ならこれで充分です。開発中で何十回も修正する場合は、その間だけmod_pagespeedをOFFにすることをオススメします。
サムネイル画像・写真・画質劣化をなくす方法
特にサムネイル画像など小さなサイズの画像に対して、data URI schemeに自動変換されてしまい劣化が発生するようです。htaccessファイルをいじれれば「rewrite_images」オプションをオフ/無効化にすることで改善できます。
私が試した中では、あかめさんの書いている方法が簡単で良いのではと思っています。
⇒[Å]「mod_pagespeed」をONにしたら画像が荒くなったから.htaccessを弄って修正してみた | あかめ女子のwebメモ
ただ、あかめさんも書かれているとおり、もっと簡単な方法が見つかるかもしれませんのでウォッチしていきます。その前にエックスサーバー側で神対応してくれるとうれしいですけどね（笑）
高速化の効果検証と補足
結論から言うと、mod_pagespeedをONにすると、読み込む容量が削減されて、表示速度も速くなります。FastCGIは、私の環境ではあまり速くなりませんでした。
このブログはテーマを修正中なので、一時的にキャッシュプラグインなどをはずしたりしてるため、使用前・使用後のスクショはつけませんが、mod_pagespeedの効果は確かにあります。下のブログなども参照してみてください。
◆エックスサーバーのmod_pagespeedはモバイル閲覧時の高速化に特に効果有り｜ウェブシュフ
◆エックスサーバーの人は絶対やろう！mod_pagespeed設定でブログ表示速度が向上したよ | love guava!
補足：SIXCOREやwpXサーバーでも使えるみたい
エックスサーバーと同系列の「シックスコア
」やWordPress専用サーバー「wpXレンタルサーバー
」でもmod_pagespeedは使えるようです。
SIXCOREについては上で紹介した、あかめさんが、wpXについてはアリマックスさんのブログ「ガジェとろ」で紹介されているので参考にしてください。
⇒wpXサーバーでもmod_pagespeedは使える！？ | ガジェとろ
まとめ：今日のゆめぴょんの知恵
エックスサーバー、SIXCORE、wpXのサーバーを利用している人は、簡単に設定できるのでmod_pagespeedを導入してみることをおすすめします！
ゆめぴょんでした。ちゃおっ！
