エックスサーバーの 「mod_pagespeed設定」機能についてのメモ

このページでは、エックスサーバーの 「mod_pagespeed設定」機能についての情報を書いていきます。

PageSpeed モジュール

エックスサーバーの 「mod_pagespeed設定」機能は、Google社が開発した PageSpeed モジュール を利用した機能です。

PageSpeed モジュールは、ウェブサーバーに組み込んで使用するタイプのプログラムで、Apache用 と Nginx 用の2種類が提供されています。

エックスサーバーの 「mod_pagespeed設定」機能

エックスサーバーの「mod_pagespeed設定」機能では Nginx用の PageSpeed モジュールを使っているようです。

この機能が何をするのかについて、エックスサーバーからは以下のように説明されています。

本機能を有効にすることで以下のような最適化処理が実施されます。

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

など。

引用元：mod_pagespeed設定 | レンタルサーバー【エックスサーバー】

「mod_pagespeed設定」機能を有効にする

ドメイン単位で「有効/無効」を切り替えることができます。

また、Xアクセラレータ機能を有効にしておかないと、mod_pagespeed機能は使えません。

少し実験

この機能によってどのような動作になるのか、簡単にテストしてみましたので、そこから分かったことを一部書いておきます。

例えば、https://example.com/ にアクセスして表示されるページの中に、以下の linkタグがあったとします。

<link rel="stylesheet" id="style-css"
      href="https://example.com/css/style.css?ver=1"
      type="text/css" media="all">

これを受け取ったブラウザは、href 属性で指定されている https://example.com/css/style.css?ver=1 にアクセスして CSSファイルを取得しページのレンダリングに利用します。

再度、このウェブページにアクセスすると、今度は PageSpeed が加工を加えた HTML が返ってきます。
こちらの HTML では、先程の linkタグが以下のように書き換えられています。

<link rel="stylesheet" id="style-css"
      href="https://example.com/css/style.css,qver=1.pagespeed.ce.XXXXXXXXXX.css"
      type="text/css" media="all">

当然ブラウザは、今度は https://example.com/css/style.css,qver=1.pagespeed.ce.XXXXXXXXXX.css にアクセスして CSSファイルを取得します。こちらは、PageSpeed が最適化を加えた CSSファイルになっているため転送速度や解析処理の短縮が望めるというわけです。

これは一例に過ぎませんが、PageSpeed はウェブブラウザに返す HTML を書き換えることによって、独自に最適化を施した CSSファイル・JavaScriptファイル・画像ファイルを読み込ませるという処理を行っているようです。

注意点

• CSS ファイルなどを編集して、実際の表示を確認するような作業を行う時には、この機能をオフにしておきましょう。

メモ

• 今回 圧縮していない CSSファイル（余分なスペースや改行を削除していない）が PageSpeed によって別のURLになって転送されましたが、圧縮処理はされていませんでした。そのためファイルサイズは元のままです。それでありながら、PageSpeed の処理が増えているわけですから、TTFB（初期レスポンスの待機にかかった時間。最初のバイトを受け取るまでの時間）は大きくなることがありました。ということで、ウェブサイトによって効果の大きさは違うと思われるため、それぞれのウェブサイト毎に効果測定を行って採用するかどうかを決めることになりそうです。
• 「mod_pagespeed設定」機能を使うと、HTTPレスポンスヘッダに cache-controlフィールドや expiresフィールドが出力されていました（有効期間は1年間）。これによるブラウザキャッシュの効果も期待できます。
  • 「ブラウザキャッシュ設定」機能もこれらのフィールドを出力しますが、「mod_pagespeed設定」機能による出力が優先されるようです。
• cache-controlフィールドや expiresフィールドで指定された有効期限に達する前に、PageSpeed がキャッシュを更新する時があったのですが、条件はよく分かりませんでした。