画像でわかるエックスサーバーを快適化する「mod_pagespeed」

「エックスサーバー」は標準の状態でも快適に使用することができ、表示速度についても多くの人は不満に思うことは少ないのではないでしょうか。

しかし「mod_pagespeed」と「FastCGI」の設定を行うことで、「さらに快適」な環境へと変化させることが可能です。実際に「ZaKuPo!」でも「GTmetrix」というWebサイトの表示速度計測ツールを用いた結果を記載しております。

解説と参考画像に沿って進めていただくことで、簡単に設定することが出来るので、ぜひ実施してみてください。

なお、記載の情報は2015年1月20日時点のものとなります。

設定に必要な時間は「５分」、手順は「６」ステップとなります。

「mod_pagespeed」とは何か

「mod_pagespeed」はWebサーバー用にGoogleが開発した拡張モジュールです。ざっくり簡単にポイントを説明すると、HTMLや画像、Javascript、CSSなどのファイルを圧縮、最適化することにより、サイズをコンパクトにして表示速度を向上するもの、となります。

Google社により開発された拡張モジュール「mod_pagespeed」を使用して、Webサイトの表示速度を向上させる機能です。
「mod_pagespeed設定」を有効にすると、ファイルを圧縮してデータ転送量を削減する、同種のファイルを一まとめにして無駄な通信を削減するなどの最適化処理を実施します。
この最適化処理により、Webサイトにアクセスしたブラウザはデータ転送量が減少し、また、ページのロード時間を短縮できるため、Webサイトの表示速度改善を期待することができます。

以下のような最適化処理が実施されます。

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

エックスサーバーマニュアル「mod_pagespeed設定とは」

「FastCGI」とは何か

「FastCGI」はWeb上のプログラム処理を高速化し、サーバーの負荷を軽減するためのものです。ざっくり簡単にポイントを説明すると、繰り返し行われる処理を毎回準備段階から行わず、手間を省略することで高速化を実現しよう、というものです。

FastCGIとは、CGIの高速化・負荷を軽減するための動作仕様の1つです。
通常、CGI/PHPなどのプログラムの実行時には、「プロセスの起動/終了」「プロセスの実行」といった処理がサーバー内で発生します。FastCGIでは、プロセス初回実行時に該当プロセスを一定時間サーバー内に保持することで、次回以降、実行時の「プロセスの起動/終了」を省略し、高速化や、プロセスの起動/終了に伴うCPUへの負荷を軽減することが可能です。

エックスサーバーマニュアル「FastCGIについて」

「ZaKuPo!」での実験結果

難しい言葉を並べるよりも、数字の結果で見ていただくのが一番です。「ZaKuPo!」のサイトにおいて、「FastCGI」と「mod_pagespeed」の「ON」「OFF」を組み合わせて「GTmetrix」で表示速度を計測してみました。

なお、「エックスサーバー」では何もしていない標準の状態で、「FastCGI」が「ON」、「mod_pagespeed」が「OFF」となっています。

見ていただきたいのはGoogleの評価である「Page Speed Grade」、Yahooの評価である「YSlow Grade」、ページロードに要した時間である「Page load time」の３項目です。評価はともに最高を「A」として、最低の「F」までの６段階評価となっています。

「FastCGI」を「ON」、「mod_pagespeed」を「OFF」

「エックスサーバー」標準の状態です。

「Page Speed」は「E」、「Y Slow」は「C」と散々な結果です。「Page load time」は「3.32秒」でした。

「FastCGI」を「OFF」、「mod_pagespeed」を「OFF」

標準で有効であった「FastCGI」を「OFF」にしてみました。アルファベット評価は変わっていませんが、「Page load time」が「3.98秒」と少しだけ遅くなっています。

「FastCGI」を「OFF」、「mod_pagespeed」を「ON」

「mod_pagespeed」のみを「ON」に変更した結果です。２～３段階も評価がアップし、「Page load time」も「3.02秒」と早くなっています。

「FastCGI」を「ON」、「mod_pagespeed」を「ON」

どちらも「ON」にした状態です。結果は変わらず、「Page load time」がほんの少し落ちています。

「ZaKuPo!」実験結果結果まとめ

結果は一目瞭然で、特に「mod_pagespeed」を有効にすることが効果的だということがわかります。「FastCGI」は標準で「ON」となっていますので、特別な理由がない限りはそのままにしておけば良いでしょう。

たった「0.2秒」の改善ではないかと思われ、「さらに快適」と言われても実感に乏しいかもしれません。しかし、10回のアクセスで「２秒」、100回で「20秒」です。同じような頻度でアクセスしてくれる人が100人いれば、合計10,000回のアクセスで「2,000秒＝33分」もの時間が短縮できることになります。

恩恵を受けるのは閲覧者だけではありません。管理をする側にとっても、レンタルサーバーがスムースに動作してくれることによって、時間ロスを少なくしたサイト構築が可能となります。

さらなる快適化も

もう一歩突き進むと、さらに改善することが出来ます。この手順については、また機会を改めて解説します。

エックスサーバーでの設定方法

それでは「エックスサーバー」での設定方法を見ていきましょう。効果が高いだけに設定も難しく思われるかもしれませんが、簡単に完了するので手順を参考に進めてください。

エックスサーバー申し込み完了時に、「Xserverサーバアカウント設定完了のお知らせ」という表題のメールが届いていると思います。「サーバーID」と「パスワード」が必要となるので準備しておいてください。

[１] 「サーバーパネル」にログイン

「エックスサーバー」から「サーバーパネル」にログインします。「サーバーID」と「パスワード」を入力し「ログイン」をクリックしてください。

[２] 設定するドメインの選択

「mod_pagespeed」の設定はドメインごとに必要です。左下の「設定対象ドメイン」から設定するドメインを選択します。

※ドメインを取得していない場合は、新規申し込み時に取得したサーバーID（例：xsample）を用いて「xsample.xsrv.jp」が表示されています。

[３] 「mod_pagespeed設定」を押す

「mod_pagespeed設定」をクリックします。

※[２]でドメインを選択していない場合は、「ドメイン選択画面」が表示されます。設定するドメインの右にある「選択する」をクリックします。

[４] 「mod_pagespeed」の設定

「設定対象ドメイン」に間違いがないかを確認し、「ONにする」をクリックしてください。「mod_pagespeed設定の変更が完了しました」と画面に表示されれば設定完了です。再度、「mod_pagespeed設定」画面を開くと、「現在の設定」が「ON」になっています。

[５] 「PHP高速化設定（FastCGI化）」を押す

次に「PHP高速化設定（FastCGI化）」をクリックしてください。

※「エックスサーバー」では何もしていない標準の状態で、「FastCGI」が「ON」となっていますのでこの作業は不要ですが、確認のため見ておいてください。

[６] 「PHP高速化設定（FastCGI化）」の設定確認

「設定対象ドメイン」に間違いがないかを確認し、「有効」となっていれば確認完了です。

「mod_pagespeed」のデメリット

良いことづくめに思える「mod_pagespeed」設定ですが、デメリットもあります。圧縮・最適化処理を行うためにサーバーに負荷がかかること、圧縮処理の影響で画像ファイルの画質劣化が起こりうる、というものです。

また、Webサイトのデザイン部分を担うCSSファイルや、JavaScriptファイルがキャッシュされる影響で、変更が即時反映されないことがあります。

「mod_pagespeed設定」を有効にすると、最適化処理の影響でメモリ使用量やCPU負荷が若干上昇したり、一部画像ファイルの画質が低下する場合があります。
また、ブラウザやサーバーコンテンツの内容によっては、本機能を有効とした際にWebサイトの表示が崩れるなど、 異なる動作となる場合が稀にあります。その場合、本機能を無効に設定してください。

なお、最適化に伴うキャッシュ処理の影響によりCSSファイル、JavaScriptファイル、画像ファイルの更新が反映されるまで時間がかかる場合があります。

エックスサーバーマニュアル「mod_pagespeed設定とは」

デメリット対策（CSS、JavaScriptの即時反映）

「mod_pagespeed」によってキャッシュされたものは、閲覧者側のパソコンなどに保存されているわけではなく、サーバー側に保存されているため、変更・修正を行ったとしてもすぐに反映されるとは限りません。

その場合の対応として、Webサイトでのデザインをこまめに調整するような初期の頃は、「mod_pagespeed」を「OFF」にしておくことが望ましいでしょう。

また、別の対応としてCSSを読み込んでいるファイルを編集することでも即時反映させることが可能です。

上記の５行目のようにCSSファイル名の末尾に「?v=*****」と更新日や時刻を付与し、「前のファイルとは異なる」ということを明示することで、即時に反映されるようになります。