サイト名を「ブログチップス」から「マーケのじかん」に変更しました(2018.12.6)

エックスサーバー高速化!mod_pagespeed導入に迷ったらテストしよう

エックスサーバーの mod_pagespeed を使うことによってページが高速で表示されることもあれば、たいして高速化されずに画質が劣化してしまうという場合もあるんですよね。

というのも、WordPress に導入しているテーマやプラグインの設定状況や、またどれだけ画像を圧縮しているかなどによって mod_pagespeed の結果が変わるからです。

ただ、 mod_pagespeed の導入自体は3クリックでできるくらい超簡単です。それに元に戻すのも同じくらい簡単です。

なのでオススメは、まずmod_pagespeedを試してみて良い結果が出たら継続し、良い結果が出なかったら元に戻すという方法です。ノー(ロー)リスクでうまくいけばハイリターンなので、やらない手はありません。

ということでこの記事では、mod_pagespeed の導入方法や、ページの表示速度のチェック方法をお伝えします。

導入もチェック方法も全く難しくないので、安心して進めてみて下さい。

目次

はじめに:mod_pagespeed について

mod_pagespeed とは、シンプルに言えばWEBページの表示速度を向上させるためのものです。エックスサーバーでは、この mod_pagespeed を簡単に設定することが出来ます。

以下の具体的な説明は、エックスサーバー公式ページより引用したものです。

Google社により開発された拡張モジュール「mod_pagespeed」を使用して、Webサイトの表示速度を向上させる機能です。

「mod_pagespeed設定」を有効にすると、ファイルを圧縮してデータ転送量を削減する、同種のファイルを一まとめにして無駄な通信を削減するなどの最適化処理を実施します。

この最適化処理により、Webサイトにアクセスしたブラウザはデータ転送量が減少し、また、ページのロード時間を短縮できるため、Webサイトの表示速度改善を期待することができます。

引用:mod_pagespeed設定について

mod_pagespeed がしてくれること

また以下も公式ページからの抜粋ですが、mod_pagespeed は以下の処理を行ってくれます。

  • CSSファイル、JavaScriptファイルなどの圧縮

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

引用:mod_pagespeed設定について

詳しくない場合はよくわからないかもしれませんが、先ほども言ったように、要はページを表示させるために頑張ってくれるわけです。

ただし、以下のように注意点があるので、先にお伝えしておきます。

mod_pagespeed 導入の注意点

mod_pagespeed の注意点は、以下の4つです。

  • CPU負荷が若干上昇する場合がある
  • 一部画像ファイルの画質が低下する場合がある
  • ウェブサイトの表示やレイアウトが崩れる場合がある
  • CSSカスタマイズが反映されない場合がある

ちなみに僕が実際に検証したところ、画質の劣化は感じなかったです。

50%近く圧縮した画像と、ほとんど圧縮していない画像でそれぞれmod_pagespeed をONにする前とOFFにした後で試してみましたが、肉眼だと画質の劣化は両方感じませんでした。

また、WEBサイトの表示やレイアウトが崩れることもなかったです。

ただCSSのカスタマイズは反映されませんでした。

mod_pagespeed をONにしている状態だと、CSSカスタマイズをしてページをリロード(更新)しても反映されなかったんですよね。スーパーリロード(FirefoxだとCtrl+F5)でも反映されませんでした。ただ、OFFにした状態でリロードしたらすぐに反映されました。

なので、これからCSSやJavaScriptのカスタマイズをしようとしているなら注意が必要です。

mod_pagespeed を導入しない方が良い場合

また「この場合は導入しないほうが良い」という場合があります。それは以下の2つなのですが、これも先にお伝えしておきます。

  • CSSやJavaScriptをこれから変更する場合
  • W3 total cacheを利用している場合

CSSやJavaScriptをこれから変更する場合

上記でお伝えしたように、mod_pagespeed をONにすると、CSSのカスタマイズが反映されないことがあります。CSSだけでなく、JavaScriptや画像の編集や更新も反映されません。

寝ログのわいひらさんの記事によると、mod_pagespeed のキャッシュの有効期限が切れるまでカスタマイズの反映がされないのではないかとのことです。

キャッシュとは、ブラウザで見たWEBページのデータを一時的にコンピュータ(パソコンやスマホなど)に保存させたものです。キャッシュが保存されていれば、次に同じページを見る時に素早く表示されます。

なので、これからCSSやJavaScriptの編集をしようと考えている場合は、それらが終わってからmod_pagespeed を導入することをオススメします。

W3 total cacheを利用している場合

こちらの記事で知ったのですが、WordPressのプラグインの「W3 total cache」を利用している場合、mod_pagespeed は併用しない方が良いとのことです。

以下、上記記事からの引用です。

mod_pagespeedとW3 total cacheの併用の事をエックスサーバーに問合せてみたのですが、「mod_pagespeedの要件をW3 total cacheが包含しているため、W3 total cacheを利用する場合、mod_pagespeed設定をご利用されないことをお勧めいたしますので、こちらもあわせてご覧いただけましたら幸いです。」との事です。

なので、 W3 total cacheを利用している場合はmod_pagespeed を利用しないことをオススメします。

以上、注意点と「導入しないほうが良いパターン」についてお伝えしました。

とはいっても、mod_pagespeed をONにしても簡単に元に戻せるので、まずは試してみることをおススメします。

それではmod_pagespeed を導入したほうが良いのか、しなくて良いのか、あなたのWEBサイトを一緒に確認していきましょう。

現在のWEBサイトのページ表示速度を確認する

まずはmod_pagespeed を導入する前に、あなたのサイトのページ表示速度の状況を確認しておきましょう。確認のために、以下の2つの無料のチェックツールを使っていきます。

  • グーグルが無料提供している『PageSpeed Insights』
  • 無料チェックツール『GTmetrix』

まずは前者から見ていきます。

PageSpeed Insightsにアクセスする

まずは以下のテキストリンクをクリックして、PageSpeed Insightsにアクセスします。

WEBサイトのURLを入力して『分析』をクリックする

アクセスしたら、あなたのWEBサイトのURLを枠内に入力して、『分析』ボタンをクリックします。分析は数秒で終わります。

ちなみに分析するURLは、トップページでも個別記事でもどちらでも構いません。

↑僕のブログ記事を分析してみました。

モバイルとパソコンのスコアを確認する

分析結果が表示されたら、モバイルとパソコンのタブをそれぞれクリックして、各スコアを確認しましょう。

99/100みたいに数値化されているのがスコアです。100に近ければ近いほどページが最適化されている(ページ表示速度が速い)状態です。

ちなみに検証した当時の僕は、ページ表示速度が速いWordPressのテーマ『LION BLOG』を使っていて、かつ画像の圧縮も念入りに行っているので、mod_pagespeed を導入する前からスコアが高いです。

mod_pagespeed 導入前モバイルページのスコア

モバイルページは最適化(Good)と表示され、スコアは99/100でした。

mod_pagespeed 導入前のパソコンページのスコア

パソコンページも最適化(Good)と表示され、スコアは89/100でした。

あなたのサイトはどうだったでしょうか。mod_pagespeed を導入して比較するためにも、メモしておいてくださいね。

さて次に、Gtmetrix でページ表示速度を確認してみます。

GTmetrix にアクセスする

以下のテキストリンクをクリックして、GTmetrix にアクセスします。

GTmetrix は有名な無料分析ツールです。英語ですが、基本的に見るのは数字部分なので安心してください。

WEBサイトのURLを入力して『Analyze』をクリックする

そしたらPageSpeed Insightsで分析したURLを枠内に入力して、「Analyze」ボタンをクリックします。

分析は数秒から数十秒かかります。

また場合によっては分析がいつまでたっても終わらないこともあるので、その場合は再度分析し直してみて下さい。

ページのスコアとロード時間を確認する

確認するところは主に以下の5つです。

PageSpeed Scoreグーグル検索でのページ表示速度のスコア
YSlow Scoreヤフー検索でのページ表示速度のスコア
Fully Loaded Timeページ読み込み速度
Total Page Sizeページの合計サイズ
Requestsページを表示させるまでの合計リクエスト数

僕の場合、それぞれ以下のような数字でした。

  • PageSpeed Score :A(96%)
  • YSlow Score :B(84%)
  • Fully Loaded Time :2.0秒
  • Total Page Size :668KB
  • Requests :70

どうでしたでしょうか。

さてGTmetrixの数字もメモしたら、mod_pagespeed を入れて比較してみましょう。

エックスサーバーのmod_pagespeed を導入する

導入は超簡単です。エックスサーバーのサーバーパネルにログインしたら、3クリックで終わります。

なので安心して進めていきましょう。

エックスサーバーのサーバーパネルにログインする

エックスサーバーのサーバーパネルにログインします。

メニューホームページ」の「mod_pagespeed 設定」をクリックする

サーバーパネルのメニュー「ホームページ」の「mod_pagespeed 設定」をクリックします。

mod_pagespeed 設定したいドメインの「選択する」をクリックする

ドメイン選択画面が表示されるので、mod_pagespeed を設定したいドメインの右に表示されている「選択する」というテキストリンクをクリックします。

「ONにする」をクリックする

変更の下にある「ONにする」ボタンをクリックします。

「.htaccess ファイルのパーミッションを読み取りのみに設定変更している場合、本設定が反映されません。」といった注意書きがありますが、気にせず「ONにする」をクリックして大丈夫です。

ONにしたら、mod_pagespeed 設定は完了です。

さて、どれくらいページが早くなったのか、改めてPageSpeed InsightsとGTmetrixで計測してみましょう。

mod_pagespeed 導入後のページ表示速度を確認する

先ほどと流れは同じなので、簡単にお伝えしていきますね。まずはPageSpeed Insights でスコアを改めて確認してみましょう。

PageSpeed Insightsのスコアを確認する

モバイルとパソコンそれぞれのスコアを確認していきます。

mod_pagespeed 導入後モバイルページのスコア

どうでしょう、スコアに変化はありましたか?

僕の場合、元々スコアが高かったので99/100で変化なしです。

mod_pagespeed 導入後のパソコンページのスコア

僕の場合、mod_pagespeed を導入後3ポイントスコアが上昇しました。

それでは次にGTmetrix でも改めてページ表示速度を確認します。

GTmetrix のスコアを確認する

僕の場合、それぞれの数字が若干良くなっています。

  • PageSpeed Score :A(96%) → A(97%)
  • YSlow Score :B(84%) → B(85%)
  • Fully Loaded Time :2.0秒 → 1.7秒
  • Total Page Size :668KB → 664KB
  • Requests :70 → 67

繰り返しですが、僕の場合元々ページ高速化のための対策をしていたので、そこまで大きなスコア上昇にはなりませんでした。

あなたのサイトはどうでしたでしょうか?

画質の劣化やレイアウト表示なども確認する

ページ表示速度を確認した後は忘れずに、実際にサイトを見てみましょう。

  • 画像の画質は劣化していないか
  • ページの表示やレイアウトは崩れていないか

もし画質が劣化していたり、レイアウトが崩れたりしてしまう場合は、当然あなただけでなく読者も気になるはずなのでmod_pagespeed をOFFにすることをオススメします。

仮に画質が劣化していたとしても、OFFにすれば元に戻るので安心してください。

問題なく改善されたらmod_pagespeed をONにしておく

mod_pagespeed を導入する前と後で比較してみてどうでしたか?

もしページの表示速度が改善されて、画質やレイアウト問題がなければ、mod_pagespeed はONにしたままにしておきましょう。

mod_pagespeed をOFFにする手順

最後に、一応mod_pagespeed をOFFにする手順についてもお伝えしておきます。といってもめちゃめちゃ簡単です。

エックスサーバーのmod_pagespeed を導入する』でお伝えしたmod_pagespeed の設定画面から、「OFFにする」ボタンをクリックするだけです。

これで導入前の状態の戻せます。画像も元通りなので安心してください。

以上、エックスサーバーでのmod_pagespeed の設定についてお伝えしました。

大事なのは読者にとって親切なサイトかどうかということ

グーグルの調査によると、以下のようにページの表示速度が遅くなればなるほど直帰率が上がっていきます。

ページの読み込み速度直帰率の上昇率
1秒から3秒に増えた場合1.32倍
1秒から5秒に増えた場合1.9倍
1秒から6秒に増えた場合2.06倍
1秒から10秒に増えた場合2.23倍

直帰率とは、WEBサイトに訪れた読者が最初の1ページだけを見て、他のページを見ることなくサイトを閉じてしまう(離脱してしまう)割合のことです。直帰率が高い場合、読者に有益な情報を提供できていない可能性があると言われています。

上記の数字を覚える必要はなくて、要は読み込み速度が遅くなると、読者はあなたのサイトから離れてしまうよということです。

ただ、たとえ表示速度が早くても画質が荒かったり、レイアウトが見づらかったりしたら、読者にとって親切なサイトとは言えません。

なので、「読者にとって親切なサイトになっているか」という視点を常に忘れないでほしいなと思います。

以上、ありがとうございました。

もしあなたがフリーランスや個人事業主なら

アンケートにご協力いただけませんか?

というのも、フリーランスや個人事業主同士で集まれるようなコミュニティを作りたいと考えているためです。頂いた意見を参考にして、より多くのフリーランスや個人事業主の役に立つコミュニティを作り上げていきます。そのためにもあなたの力が必要です。ということで、以下をクリックしてアンケートに答えてみて下さい。

ここをクリックしてアンケートに答える