mod_pagespeedの設定

この記事は、「mod_pagespeed」を使っていろいろ試行錯誤した結果、最終的に使わなかったという内容です(設定は全てエックスサーバーの内容になります)。

ちなみに、僕はこの手の内容はほとんど理解していません。「Webサイトのコンテンツ最適化と表示速度の向上」が目的で、マニュアル通り設定し、参考サイトの設定を真似ただけです。

ですから、質問されてもお答えできませんので悪しからず。

mod_pagespeedの設定

mod_pagespeedとは?

僕が説明するより、mod_pagespeed設定について | エックスサーバーmod_pagespeedの概要と導入について | 株式会社サイバーエージェントを覗いてもらった方が早いです。

正直、僕は読んでも全く理解できないのですが、「CSSファイル」「JavaScriptファイル」「画像」の圧縮、「キャッシュ有効期間」の延長等によって、Webサイトの表示速度改善ができるみたいです・・・(多分あってる)。

mod_pagespeed設定の切り替え

先程の「mod_pagespeed設定について | エックスサーバー」に設定の切り替え方法が載っていますので参考にして下さい。ボタン一つでいつでも切り替え可能です。簡単に戻すこともできますし、難しい設定もありません。

mod_pagespeedを使うとスコアは改善される

実際に、「mod_pagespeed」を使う前と後のスコアを比較してみました。

測定に使ったサイトは下記になります。

使用前

アフィラボスマホ

mod_pagespeed使用前 モバイルページ

アフィラボPC

mod_pagespeed使用前 パソコンページ

アフィラボ

mod_pagespeed使用前

使用後

アフィラボスマホmod

mod_pagespeed使用後 モバイルページ

アフィラボPCmod

mod_pagespeed使用後 パソコンページ

アフィラボmod

mod_pagespeed使用後

結果

他のサイトでも試してみましたが、「修正が必要」「修正を考慮」の項目から、「画像を最適化する」「圧縮を有効にする」「JavaScript を縮小する」「HTML を縮小する」「CSS を縮小する」が改善されます。

また、ページサイズが小さくなりますから、ページの読み込み時間も若干速くなっています。

ただ、あまり体感できないんですよね・・・。

mod_pagespeedのデメリット

ここまでなら、「導入するべきだ!」と思うのですが、デメリットもあります。

画像の劣化

目に見えて画像が劣化します。
但し、スマホサイズまで縮小すると違いは分かりません・・・。

ノイズ

mod_pagespeed使用前と後の画像の比較

ロゴ周辺を見てもらうと分かり易いのですが、明らかにノイズが増えています。

また、画像のパスも「○○.jpg」から「○○.jpeg.pagespeed.○○.○○○○.jpg」変わります(何が起こっているのか分かりません・・・)。

画像を劣化(圧縮)させたくない場合は、「.htaaccess」に下記の2行を記述します。

「.htaaccess」は、「ファイルマネージャにログイン」⇒「対象ドメインを選択」⇒「public_htmlフォルダの中」にあります。見つかったらチェックを入れて編集します。既に「mod_pagespeed」を使っている場合は、「ModPagespeed On」が記述されていますので、その下にでも記述して下さい。

場所:ドメイン/public_html/.htaaccess

htaaccessの編集

.htaaccessの編集

これで画像の劣化はなくなります(サイトのスコアは若干落ちる)。

より詳しい内容については、参考にさせてもらった[Å]「mod_pagespeed」をONにしたら画像が荒くなったから.htaccessを弄って修正してみた | あかめ女子のwebメモで確認して下さい。

ファイルを更新してもなかなか反映されない

「CSSファイル」「JavaScriptファイル」「画像ファイル」のキャッシュ有効期間が延長されているからだと思いますが、CSS等を編集した後なかなか反映されません。

再読み込みしても反映されませんので、「mod_pagespeed」を使っている間はサイトのカスタマイズが困難です。残念ながら、こちらは解決策が見つかりませんでした・・・。

スコアの基準が分からない・・・

そもそも、立ち上げたばかりのサイトはどんなスコアが表示されるのか?使っていないドメインがあったので、テストしてみることにしました。

ちなみに、テストしたサイトは、公式テーマ「Twenty Fifteen」を使用。プラグインは「Akismet」と「WP Multibyte Patch」の2つを使用。画像は「825×510(約100kb)」のjpg画像を4枚使用。トップページにサムネ付きで4記事表示させました。

テストサイトのスコア

テストスマホ

mod_pagespeed使用前 モバイルページ

テストPC

mod_pagespeed使用前 パソコンページ

テストスコア

mod_pagespeed使用前

ほぼ立ち上げたばかりのサイトなのに、「修正が必要」「修正を考慮」の項目がたくさんあります。ページ表示速度もこのサイトと大して変わりません・・・。

気になったので、他人のサイトをいろいろ調べてみたのですが、どのサイトでも「修正が必要」「修正を考慮」の項目がたくさん表示されます。スコア50以下も珍しくもありません。

もしかしたら、本人が気になるぐらいサイトの表示速度が遅くなければ、スコアは大して気にしなくていいのでは!?という結論に・・・。

最後に

うまく説明できないのですが、「mod_pagespeed」を使ったら、なんとなくサイトの表示に違和感も出ました・・・。それも使わなかった理由です。

それにしても、いろいろ調べて試した結果が「使わない」だなんて・・・。これからは、キャッシュやサイトの表示速度を上げる系のネタには、できるだけ触れない様にします。

もし、「mod_pagespeed」を使われる方がいましたら、「画像の劣化」の部分だけは設定で変更しておいた方がいいと思います。画像にノイズが入ってしまっては、いくらサイトの表示速度が上がっても意味がないですからね。

スポンサーリンク
スポンサーリンク

このサイトで使用しているWPテーマ
「ハミングバード」

2 件のコメント

  • mod_pagespeedを使用して
    サイト速度が若干速くなったと思って
    喜んでいたのですが、画像の劣化は気づきませんでした…

    というかサイトの表示速度ってハッキリいって
    回線速度や、時間帯によって全然違うから
    早くなったとか遅くなったとか判断が難しいですよね…

    にしても作ったばかりのサイトでも修正が必要なんて
    どういう事なんでしょうか(笑)

    ただ1つだけ言えるのは
    ロリポップサーバーからXサーバーに変更したら
    かなりページ表示速度が速くなりました。

    WPの記事を投稿するページ等でも体感的
    にわかるくらい快適になりました。高いだけはあるかと。

    • そうですよね。

      時々、ページが表示されるまでに10秒以上かかる様なサイトもありますが、極端に重いサイトでなければ個人的にはそこまで気になりません。

      そこまで拘る必要もない気がします。

      mod_pagespeedについては、記事に載せている小さな画像では少し気付きにくいのですが、メインカラム幅いっぱいの大きな画像を使えば、画像の劣化にすぐに気づくはずです。ですから、画像がメインのレビューサイトでは、画像が劣化しない設定は必須だと思います。

      レンタルサーバーについては、僕は最初からXサーバーを利用しているので、他のサーバーとの比較はできないのですが、今までに不満を感じたことがないので、それだけでも凄く優秀なんだなって思います。

  • コメントを残す

    メールアドレスが公開されることはありません。