mod_pagespeedカスタマイズで高速化を詳細解説・Google謹製

Google謹製mod_pagespeedの詳細設定方法解説

mod_pagespeedとは？

　
mod_pagespeedは、Googleが作成した Apacheのモジュールで、Webサイトの画面表示スピードを簡単に高速化してくれます。
　
　
Googleは、Webサイトの環境を快適にするため Webサイトの表示の高速化を求めています。
　
そして、Googleは、Webサイトの高速化の支援として、Google Search Console（旧 Webmaster Tools）の中に Webサイトの表示スピードのチェックツールとして Page Speed Insightsを提供し、スピードアップのためのアドバイスも提示してくれます。
　
そして、実際にそのスピードアップの対策を行うためのモジュールとして、mod_pagespeedを提供しています。
　
　
つまりは、Googleは、Webサイトの表示スピードを速くするために Page Speed Insightsでポイントを指摘し、mod_pagespeedを使って高速化するよう促しているわけです。
　
その流れから行くと、mod_pagespeedを使わない手はないワケなんですが、この記事ではデフォルトのままでも十分に効果が出る mod_pagespeedをさらに効果が出るよう、自分のサイトへの最適設定をする方法を解説する記事です。
　
　
そもそも「mod_pagespeedってなに？」ということについては「高速化の最終兵器・Google謹製mod_pagespeedでWebサイトを超簡単高速化」に記事を書いています。
また、この記事を書くきっかけになったサーバの引越しについては「ロリポップからX-Serverに引越し。サーバの月額費用が増えても求めた理由は？」に記事を書いていますので併せて参考にしてください。
　
　

mod_pagespeedは多機能

　
mod_pagespeedモジュールは、一つの技術でできているものではありません。
　
このエス技研ブログでも Page Speed Insightsの指摘に合わせて .htaccessの設定をしたり、プラグインを導入したり、とスピードアップの対策を行ってきましたが、それらの対策を行ってきた内容と同じような仕組みがどっさりと入っている多機能なモジュールになります。
　
【mod_pagespeedの機能一覧】
　

　
　
一覧表を見て分かる通り、多機能なモジュールなのですが、デフォルトで有効になっているもの、なっていないものとあります。
また、機能によっては On、Offだけではなく、設定値を持っているものもあります（既定値については後述）。
　
ほとんどの場合、デフォルトの設定でもスピードアップするのですが、デフォルトのままだともったいない！自分のサイトにぴったり来る設定にしよう！
　
　
ただ、モジュールの機能が多彩であることと、各サイトの仕様も多彩であるために、「こうすればどのサイトでも OK」という絶対的な設定はありませんので、各サイトに合わせてそれぞれで最適な設定に変更してもらう必要があります。
その設定をしていくうえで必要となる設定方法について解説をしていきます。
　
　
上記のリストは Googleの mod_pagespeedの説明ページから取得しています。
　https://developers.google.com/speed/pagespeed/module/config_filters?hl=ja
　
ですが、X Serverのデフォルトとは設定が違う可能性もありますのでご注意ください。
　
　

mod_pagespeedの設定の基本

　
mod_pagespeedの設定は、.htaccessに記載することで行います。
※ここで説明しているのは、X Serverでの動作を想定していますので、Apacheでの設定方法です。
　Nginxでは記述方法が違いますのでご注意ください。
　
　

mod_pagespeedの設定の基本・mod_pagespeedの On／Off

　
まずは、.htaccessに「ModPagespeed On」を記述して、mod_pagespeedを有効にします。
「ModPagespeed Off」と記述、もしくは、「ModPagespeed On」の記述がなくなると mod_pagespeedは無効になります。

　
X Serverの場合は、On／Offの切り替えはコントロールパネルから行うことができ、管理画面から Onにすると、.htaccessに「ModPagespeed On」が追記されます。
メインドメインに対して設定されるため、メインドメインの「public_html」の中の .htaccessに追記されます。
また、.htaccessに「ModPagespeed On」を直接追記すると管理画面でも Onになり、「ModPagespeed On」を削除すると管理画面でも「Off」になります。
　
　

mod_pagespeedの設定の基本・Filtersの On／Offの設定

　
特定のフィルタを有効化する場合は、「ModPagespeedEnableFilters」を使い、無効化する場合は「ModPagespeedDisableFilters」を使います。
　

　
特定のフィルタを Offにしても、クリエパラメータ、リクエストヘッダによってオンにされることを禁止する指定をする場合は、「ModPagespeedForbidFilters」を使います。
　

mod_pagespeedの設定の基本・Filtersを複数指定する設定

　
フィルタの指定の仕方は、「ModPagespeedEnableFilters」の後ろにフィルタ名を記述するだけです。
複数のフィルタを設定する場合は、上記の通り「,（カンマ）」で区切ることで可能になります。
ただし、「,」の後ろにスペースを入れるとエラーになりますので、スペースなどは入れずに続けて記述する必要があります。
　

　
また、複数のフィルタを設定する方法は、「,（カンマ）」で区切るだけではなく、上記の様に複数行に渡って記述することも可能です。混在していても問題ありません。
記述する順番による影響はないようです。
また、同じフィルタを重複して記述していても正常に動作するようです。
　
　

mod_pagespeedの設定の基本・Filtersを Enable／Disable両方記述した場合

　
上記のようにフィルタを Enableと Disableの両方に記述した場合は、デフォルトの設定になるようです。
（これはドキュメントに書いていなかった内容のため不確実ですが、実験してみた結果、デフォルト Onのものは有効となり、デフォルト Offのものは無効になりました。）
　
　

mod_pagespeedの設定の基本・Filtersを一括 Offにする設定

　
上記の記述をすることで全てのフィルタを強制的に Offにすることが出来ます。
これは、まさに X Serverに必要なフィルタですね。
X Serverは、メインドメインのドキュメントルートの中にサブドメインのドキュメントルートが生成されますので、メインドメインには mod_pagespeedが必要だけど、サブドメインには必要ないという場合にはこのフィルタの設定が必要です。
　
　

mod_pagespeedの設定の基本・フィルタの基本値

　
先に少し触れましたが、フィルタによっては On／Offだけではなく数値による設定値を持つものもあり、各既定値は下記のようになっています。
　

mod_pagespeedの設定の基本・ImageRecompressionQualityにより画像をキレイに

　
上記の既定値の中で多くのユーザに影響をすると思われるものが、「ImageRecompressionQuality」です。
これは、画像のファイル容量を圧縮してページの表示を高速化するための方法として利用する仕組みで、どれくらいの圧縮を行うかを規定している値になります。
既定値は「85」で、画像を粗くしない「100」に対して「15」ほど圧縮する処理をすることになります。
　

　
実際に比較したものが上記の画像で、上が元の画像で下が粗くなった画像です。
分かりやすく 2倍に拡大していますが、パッと目にもわかるくらい画像が粗くなります。
このエス技研ブログの様に技術ブログであれば、多少画像が粗くなっても納得できる場合もあるでしょうが、イラスト系や写真系の画像を見せることをメインとしているサイトでは致命的な障害です。
　

　
そんな場合のこの既定値の変更方法としては、上記のようにフィルタ名と値を記述することで既定値を変更することができます。
　
　

　
また、「ImageRecompressionQuality」は「rewrite_images」で設定されている画像書き換えの処理の中の一つの既定値ですので、例えば、上記のように「rewrite_images」を「DisableFilters」の設定をすると、画像の圧縮処理が無効になりますので、そのあとに「ImageRecompressionQuality」の設定をしても意味がありません（書いていても害にはなりませんが）。
　
　

　
デフォルトでは Onになっている lazyload_images、inline_preview_images、inline_imagesの特定のビーコンのみを Offにする場合は上記の様に設定を行います。
　
　
以上の基本的な設定方法に基づいて、各設定を行います。
　
　

mod_pagespeedの設定に対する考え方

　
mod_pagespeedは、多様な仕組みの組み合わせによって成り立っているモジュールです。
そのため、すでに対策を行っている仕組みとバッティングしている場合も多々あります。
　
その場合は、すでに対策を行っている仕組みをそのまま活かすのか、mod_pagespeedの機能を活かすのか、それを決めて対応をしていくことになります。
　
　
具体的に、私の場合は「WordPressの高速化でSEO対策！広告費も削減！高速化の施策のまとめ」にも書いていますが、これまで多様な施策を試してきています。
　
例えば、Lazy Loadについて。
Lazy Loadは、画面の表示に必要な画像を必要に応じて読み込むことで、画面の表示を速くする処理のことなのですが、WordPressではプラグイン Lazy Load、BJ Lazy Load、Unveil Lazy Loadなどを利用することで実現できます。
各プラグインの紹介記事は下記に書いています。
　SEO効果絶大！PVもアップするWordPressの高速化プラグイン元祖Lazy Load
　SEO効果絶大！PVもアップするWordPressの高速化プラグインBJ Lazy Load
　SEO効果絶大！PVもアップするWordPressの高速化プラグインUnveil Lazy Load
　
この Lazy Loadは、WordPressのプラグインを利用して実装することもできますが、mod_pagespeedの機能を利用して実装することもできます。
　
　
また、画像ファイルを圧縮して軽量化する処理については「EWWW Image Optimizerで画像の圧縮でWordPressを高速化」に記事を書いていますが、「EWWW Image Optimizer」というプラグインを使っています。
これも mod_pagespeedの機能を利用して実装することもできます。
　
　
Lazy Loadはデフォルトでは有効になっていませんが、画像ファイルの圧縮に関してはデフォルトで有効になっています。
　

• もうすでにプラグインで実装して効果が出ているのでそれでいい
• デフォルトで有効になっているものは mod_pagespeedの方を利用する
• 少しでも速くしたいからプラグインと mod_pagespeedの両方を試して見ないと気が済まない
• Googleを信じて mod_pagespeedで実装できるものは mod_pagespeedの方を利用する

などなどいろいろな考え方があると思います。
一番最後のは Googleを信じるというか、いろいろなプラグインを入れるより高速化は mod_pagespeedにまかせる、と言う考え方ですかね。
　
また、サイトの内容（画像が多いサイト、文章が長いサイト、JavaScriptによる動的なサイトなどなど）によっても結果は違ってくるものと思いますので、少しでも高速化したいと思う場合は各自である程度の試行錯誤は必要でしょう。
　
　
今回の記事も、このエス技研ブログで使うことを前提に実験をしている記事となりますので、WordPressに提供されているプラグインとの比較の内容になっています。
　
そのため、WordPress以外の CMSや静的な HTMLのサイトなどの場合は、比較するまでもなく mod_pagespeedを使って実装すると便利に高速化が出来るでしょう。
　
　

Lazy Load（画像呼び出しの最適化）

　
Lazy Loadは先にも説明した通り、画像を適時に読み込む処理です。
「PageSpeed Insights」での計測で、Lazy Loadの有無によって 10～15ポイントも差が出ますので、Lazy Loadはいずれかの方法で導入は必須の処理です。
　
プラグインの BJ Lazy Loadは画像以外の iframeなども処理が可能で、細かな設定が行えるために、私はプラグインの BJ Lazy Loadを使うことにしました。
ただ、mod_pagespeedとの比較実験では明確な差は見られませんでしたので、好みでもいいのではないでしょうか。
　
Lazy Loadを有効にする場合は下記を追記します。

画像の最適化

　
画像を最適化するプラグインとしては「EWWW Image Optimizer」がメジャーです。
そのため、すでに「EWWW Image Optimizer」によって画像を管理している場合は、改めて画像の最適化をする必要はないと思いますので、「rewrite_images」を Offにしておく方がサーバの処理が無駄にならずに済むでしょう。
　

　
画像の最適化に関しては、「rewrite_images」が Onになっているときにそれに関連する設定が付随して呼び出されるものが多いため、「rewrite_images」を Offにすることで画像に関連する最適化をまとめて無効にできます。
　
ただ、「rewrite_images」は、画像そのものの最適化だけではなく、小さい画像をインライン化（HTMLのなかに取り込む処理）する処理など、後述する「Autoptimize」の機能も有していますので、新たにサイトを構築する場合には「rewrite_images」を使うことを前提にプラグインを選定していくのも良さそうです。
　
　

HTML、CSS、JavaScriptの最適化

　
HTML、CSS、JavaScriptの不要なコードを削除したり、ファイルを統合させたり、読み込むタイミングを変えたりといった最適化を行い、レスポンスを速くしようとする仕組みです。
WordPressのプラグインでは「Autoptimize」が有名で、「Autoptimizeで簡単設定！HTML、JS、cssを圧縮しWordPress高速化！」として記事も書いています。
　
Autoptimizeを使う場合など、mod_pagespeedの CSS、JavaScriptの最適化の処理を止める場合は以下の記述を行います。
　

HTMLコメントの最適化（remove_comments）

　
HTMLの最適化の関連する処理として「remove_comments」があります。
これは、HTML内のコメントを削除する処理ですが、Onにする場合は下記の記述を追記します。
　

　
HTMLのコメントを削除する処理は「Autoptimize」にもありますが、一部の広告関連のタグに含まれる HTMLのコメントが影響を受けるとの指摘もあり、コメントは削除しない方がいいようです。
そのため、デフォルトでは Offになっているのではないかとも考えられます。
　
　

HTMLのリンクの最適化（trim_urls）

　
HTMLの最適化の処理として「trim_urls」もあります。
これは、URLを少しでも短くするために、内部リンクが URL付のリンクで設定されている場合は相対パスに置換する処理です。
有効にする場合は下記を追記します。
　

　
SEO的には URLのリンク、相対パスのいずれでも差はないと見られていますが、Google Search Console（旧 Webmaster Tools）内のヘルプで URLの記述が推奨されています。
　https://support.google.com/webmasters/answer/35156?hl=ja
これは、サイトの構造が変わった場合にリンク切れになる可能性が高くなるための要望と見られています。
WordPressの場合は、構造が変わっても自動的にリンクは切り替えられますので、相対パスに切り替えられても問題ない場合が多いため、「trim_urls」を有効にしておく方がいいでしょう。
　

JavaScriptの最適化（defer_javascript）

　
HTMLの最適化の一つとして、JavaScriptの読み込みを最適化する方法があり「defer_javascript」として提供されています。
　
HTMLを読み込みながら JavaScriptを実行すると、処理が終わるまでページの表示が終わらず表示スピードに影響が出る場合があるため、まずは HTMLを全て読み込み終わらせて、そこから JavaScriptを実行させることによってページ表示を高速化させる仕組みです。
これを有効にするには下記を追記します。
　

　
ページの構造に影響を与える処理が含まれる場合は不具合の原因につながりますので、Onにした場合は各ページの表示を確認しておきましょう。
　
　

headタグの最適化（add_head）

　
WordPressの場合は、head要素がないことはないはずなので、「add_head」を Offにして少しでも処理を減らしましょう。
　

imgタグの最適化（insert_image_dimensions）

　
<img> タグに widthと height属性がない場合に追加する処理です。widthと height属性を指定してある方がブラウザの画面描写が速くなるといわれています。
WordPressであれば必要ありませんが、静的なページなどではついつい忘れがちなため、widthと height属性を設定していない場合は mod_pagespeedで対応するという方法もあるでしょう。
下記の設定で有効になります。
　

Google Analyticsのタグの追加／書き換え（insert_ga／make_google_analytics_async）

　
mod_pagespeedには、Google Analyticsのタグを編集するフィルタも用意されています。
WordPressの場合は、ヘッダー、フッターとそれぞれファイルが分かれていますので、ヘッダーのテンプレートファイル 1箇所に追記すれば済みますが、静的な HTMLのサイトなどの場合であとから追加する必要がある場合などに役に立つでしょう。
　
また、Google Analyticsのタグは同期タグと非同期タグとありますが、非同期タグの方がページの表示に影響を与えずに処理されますので、非同期タグが推奨されています。
そのため、自動的に非同期タグに置き換えてくれるフィルタも用意されています。
　

　
　
mod_pagespeedは、多機能ですので全てを説明し切れていませんが、仕組みを理解するとよりよい設定が見えてきますので、その一助になればと思います。
　
また、各フィルタの詳細設定のためのリファレンスが下記にありますので、より詳しく知りたい方は参考にしてみてください。英語ですが．．．
　https://developers.google.com/speed/pagespeed/module/filter-head-add