ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

エックスサーバーのmod_pagespeedとFastCGIで高速化!WPプラグイン設定もしとこう

パンくわえてダッシュ!エックスサーバーのmod_pagespeedで高速化

エックスサーバーで高速化オプション「mod_pagespeed」が導入されました。そのメリット・デメリットを検証してみます。ついでにFastCGI設定もして、WordPress利用中の人向けに対応プラグイン設定についても紹介します。

ゆめぴょん(@yume_pyon)です。こんちはっ!

つい最近、エックスサーバーが管理画面をリニューアルしてかなり使いやすくなりました。高速化オプション「mod_pagespeed」も設定できるようになり、ますます他社に差をつけてきましたね。私の移転時のことは下記事を参照してください。

【WordPress】エックスサーバーへ乗り換え・移転!ドメインやDB設定方法【WordPress】エックスサーバーへ乗り換え・移転!ドメインやDB設定方法

今月に入ってから、アメリカの「Bluehost」から「エックスサーバー」に引っ越…

【WordPress】エックスサーバーに移転!データ移行・動作確認・DNS変更の方法【WordPress】エックスサーバーに移転!データ移行・動作確認・DNS変更の方法

「Bluehost」から「エックスサーバー」に引っ越した時の、WordPress…

また、FC2ブログからエックスサーバーのWordPressへ移行した時の細かい方法については、下記事を参考にしてください。

FC2無料ブログからWordPressへの移転方法のすべて!引越し準備編FC2無料ブログからWordPressへの移転方法のすべて!引越し準備編15 shares

FC2ブログの約300記事を、独自ドメインのWordPressへ引っ越した時の移…

FC2ブログからWordPressへ引っ越し!移転作業編とインデックス結果FC2ブログからWordPressへ引っ越し!移転作業編とインデックス結果13 shares

301リダイレクトを使えない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に設定しましょう。

翻訳キャッシュ系プラグイン比較!WordPress日本語版を高速化翻訳キャッシュ系プラグイン比較!WordPress日本語版を高速化

CDNサーバーの導入から始まったWordPressブログの高速化も第5弾となりま…

WordPressサイト高速化でSEO対策!17の表示速度アップ術WordPressサイト高速化でSEO対策!17の表示速度アップ術17 shares

ブログ表示速度の高速化についてはいろいろ書いてきました。今後は表示速度が遅いとG…

エックスサーバーのmod_pagespeed設定のメリット・デメリット

メリットとデメリットについてです。デメリットで気になる2点については、解決方法も考えてみました。

メリット

メリットについては、上の説明とも重複しますが、下のとおりです。結果的に無駄なリクエストを削減して、サイト・ブログの表示を高速化しています。

  1. CSS、JavaScript、画像ファイルなどの圧縮・最適化
  2. 同種のファイルを一つにまとめ、サーバーとクライアント間の無駄な通信を削減
  3. CSS、JavaScript、画像ファイルのキャッシュ有効期間の延長
  4. 小さなファイルサイズのCSSやJavaScript、アイコン画像などをHTML内に埋め込む

デメリット

一方で少しですが、デメリットもあります。

  1. 最適化処理の影響でメモリ使用量やCPU負荷が若干上昇する場合がある
  2. ブラウザやサーバーコンテンツによってはWebサイトの表示が崩れる
  3. キャッシュ処理の影響によりCSS、JavaScript、画像の反映が遅れる場合がある
  4. 一部画像ファイルの画質が低下する場合がある

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」などを加えれば即時反映されます。

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を導入してみることをおすすめします!

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:【WordPress】オリジナルSNSボタン設置方法!スマホ用シェア数つきSNSアイコンも公開アナリティクスでサイトの表示速度や改善方法も分析!アクセス解析の使い方入門9:次記事»
ページ
↑先頭
ホーム