Webサイトの表示を高速化させる”PageSpeed Module”ですが、大半のサイトが正確に使いこなせていないのでは？と思っています。
なぜかといえば使い方を調べようと検索しても、詳しい使い方を解説しているサイトがほとんど出てこないからです。
もしもあなたが”PageSpeed Module”機能をオンにするだけで満足しているのであれば、使い方が間違っています。
1.PageSpeed Module とは
PageSpeed Moduleとは、Googleが開発したWebサイトの表示速度を高速化させる拡張機能です。
サーバーへインストールして使用します。
この機能をインストールすると、サーバー側でHTML、Javascript、CSS,画像などの最適化や縮小を自動で行ってくれます。
それによりWebサイトが高速で表示されるようになるというものです。
この機能自体は前から知られていたのですが、2014年11月に大手レンタルサーバーのエックスサーバー
がこの機能を追加したことで、注目を浴びるようになりました。
エックスサーバーが”mod_pagespeed設定”という名称でこの機能を導入したため、この名称で呼ばれることが多いですが、正式名称はPageSpeed Moduleです。
PageSpeed Moduleが導入されているレンタルサーバーでこの機能をオンにするには、以下のいずれかをおこなう必要があります。
- htaccessファイルへ「ModPagespeed on」を追記する。
- レンタルサーバーの管理画面から”mod_pagespeed設定”を有効にする（自動で1が行われる）。
これは簡単にできますが、ここで満足してはいけません。
2.mod_pagespeedの本当の使い方
エックスサーバーへの導入後、”PageSpeed Module”の解説をおこなうサイトやブログが非常に増えました。
でもほとんどのサイトは、”PageSpeed Module”の機能をオンにしてみて、「あんまり変わらない」とか「表示が崩れた」とか、そういう部分に注目したものばかりでした。
まず一つ知っておくべきことは、”PageSpeed Module”がカスタマイズして使うものであるということです。
”PageSpeed Module”を使用した結果、サイトの表示速度があまり変わらないのも、CSSの縮小が失敗して表示が崩れたのも、”PageSpeed Module”の本当の使い方を理解していないからです。
ⅰ.”PageSpeed Module”は複数の機能の集合体
”PageSpeed Module”の機能は、実は細かく分けることができます。
この細分化した個別の機能をフィルタと呼びます。
デフォルトで動作しているものは、以下の１４フィルタです。
- add_head（<head> 要素がない場合は挿入する。）
- inline_import_to_link（CSSの@importsしか行なっていない<style>タグを <link> タグによる読込に書き換える。）
- extend_cache（最適化を行わなかったCSS、JSおよび画像のキャッシュ保持期間をコンテンツのハッシュ付きURLを付与することで延長する。）
- convert_meta_tags（meta タグのうち http-equiv 属性のものをレスポンスヘッダ値に置き換える。）
- combine_css（複数のCSS要素を１つに結合する。）
- rewrite_css（CSS内のスペースやコメントを除去する。また画像系オプションが有効な場合、CSS内でロードしている画像も書き換えたりキャッシュ延長の対象とする。）
- fallback_rewrite_css_urls（解析・圧縮できないCSSでもURLに関しては書き換えを行うフォールバックオプション。）
- rewrite_style_attributes_with_url（スタイル属性内のurlを含むCSSルールも、rewite_cssの設定を適用する。）
- flatten_css_imports（@import句を事前に読み込み１枚のフラットファイルにする。）
- rewrite_javascript（Javascript内の不要な空白やコメントを除去する。）
- inline_css（小さな外部CSSファイルを、HTML内に埋め込む。）
- inline_javascript（小さな外部JSファイルをHTML内に埋め込む。）
- rewrite_images（画像の最適化、再エンコード、不要なピクセルの除去を行う。また、小さな画像はインライン化する。）
- convert_jpeg_to_progressive（巨大なjpegファイルをプログレッシブファイルに変更する。）
それぞれのフィルタの詳細な説明は、以下のサイトが参考になります。
ⅱ.個別に機能をオンオフできる
”PageSpeed Module”で動作する１４のフィルタですが、実は個別にオンオフを切り替えることができます。
これを利用すれば、”PageSpeed Module”を利用して不具合が発生してしまった場合でも、原因になっている機能だけをオフにすることができます。
具体的には、htaccessファイルに以下のように書き加えることで、一部のフィルタのみを無効化することができます。
#PageSpeedをオン
ModPagespeed on
#不要なフィルター
ModPagespeedDisableFilters add_head
ModPagespeedDisableFilters convert_meta_tags「ModPagespeedDisableFilters ＋ 機能名」 と記載するだけです。
”PageSpeed Module”は圧縮の処理を行っている分、サーバーへ負荷がかかっています。
特に不具合が起きていなくても、必要がないまたは効果が見込めないフィルタは、無効化した方がサイトの高速化につながります。
3.カスタマイズでのみ得られる追加機能
”PageSpeed Module”で初期設定で有効になっているフィルタは１４種類ですが、実はそれ以外にも追加できるフィルタがあります。
デフォルトでは有効になっていませんから、個別にフィルタをオンにして使用しましょう！
たくさんの機能がありますが、その中からぜひ利用すべきオススメの機能をいくつかご紹介します。
ⅰ.lazyload_images
画像を遅延読み込みさせる機能です。
WordPressのプラグインなどでも類似機能がありますので、そちらを利用している方も多いかと思います。
このサイトもプラグインを利用していたのですが、バージョンが上がった際に動作に不具合が出るようになってしまいました。
それ以来”PageSpeed Module”のlazyload_imageを利用しています。
ⅱ.insert_dns_prefetch
DNSプリフェッチのタグを、自動で追加してくれる機能です。
DNSプリフェッチとは、外部ドメインの名前解決を事前に（そのリンクを読み込む前に）行ってくれる技術のことです。
外部から取得している画像やJavascriptの、読込速度の高速化が期待できます。
（※この記事を書くに当たって効果を確認してみたのですが、当サイトではうまく動作していませんでした。）
ⅲ.defer_javascript
JavaScriptの実行を、HTMLページがロード完了するまで遅延させる機能です。
JavaScriptの読み込みはレンダリングなどの処理をストップさせてしまうため、HTMLをすべて読み込んでからJavaScriptを実行した方がサイトの表示速度が速くなります。
通常は比較的導入の難しい機能ですが、”PageSpeed Module”を使えば簡単に導入することができます。
#PageSpeedをオン
ModPagespeed on
#不要なフィルター
ModPagespeedDisableFilters add_head
ModPagespeedDisableFilters convert_meta_tags
#追加するフィルター
ModPagespeedEnableFilters lazyload_images
ModPagespeedEnableFilters insert_dns_prefetch
ModPagespeedEnableFilters defer_javascript4.まとめ
レンタルサーバー会社で”PageSpeed Module”が使えるのは、現時点でエックスサーバー社だけのようです。
そのためこの機能が使えるのは、同社の代表的なサービスであるエックスサーバー やWordpressに特化したwpXレンタルサーバー 
になります。
（他のレンタルサーバーでも自分でインストールすれば使えるかもしれません。）
当サイトはwpxで運用しています。
レンタルサーバーを使用する目的が、Wordpressの運用であればwpXレンタルサーバーをオススメします。
その他の目的の場合は、エックスサーバーを利用するのが良いと思いますね。
”PageSpeed Module”もそうですが、必要な新しい機能はドンドン導入してくれます。
サーバーの応答時間も、0.2～0.3秒で安定していて速いです。
“PageSpeed Module”(mod_pagespeed機能)は、機能をただオンにするだけでは勿体ないです。
あなたのサイトに本当に必要な機能だけを選ぶことで、ベストパフォーマンスを発揮することができます。
ぜひ一度カスタマイズを試してみて下さい。
