エックスサーバーやwpXで簡単に導入できる「mod_pagespeed」。サイト内の様々なデータを軽量化する便利な仕組みです。
容量削減が必須のレスポンシブサイトでは特に便利そうですが、やはりデメリットもあるのでその回避方法などまとめてみます。
mod_pagespeedの主な仕様
- ファイルそのものの圧縮（gzip）
- JavaSriptのコードを短縮（改行など空白文字を削除）
- 画像を圧縮する（劣化させる）
- 画像の大きさをHTMLの指定サイズに縮小
- 小さい画像はインライン化
- 対応ブラウザにはGoogle開発の画像フォーマット「WebP」に変換
- Google公式ドキュメント（英語）
- エックスサーバ マニュアル「mod_pagespeed設定について」
mod_pagespeedの主なデメリット
- CPUを多めに使う
- 画像が劣化する
- 非対応のSafariなどでも「WebP」を出力してしまう
この中で一番の問題は「WebP」。wpXのサポートに確認したところ、対策を検討中とのことでした。今できることとして、以下の方法を薦められました。
（以下設定はwpXを前提としています）
.htaccessで設定の上書きができる
ルートにある「.htaccess」を使って、モジュールの設定を上書きします。
画像変換に関する処理をしない
ModPagespeedDisableFilters rewrite_images
サポートからはこの設定を薦められましたが、これを行うと画像に関する処理が全て無効になるようです。転送量圧縮の中で画像処理が一番大きいように思うのでこれはかなり思い切った設定。またこの記述を入れると以下の設定も無効になります。
画像の圧縮率変更
画像のクオリティ（圧縮率）は、Googleのドキュメントによれば「85」がデフォルトと書かれているので少し上げます。
ModPagespeedImageRecompressionQuality 90
そもそもwpXでの初期設定が不明ですが、出力される画像ファイルのサイズから推測すると「85」のままのようです。「90」にするだけでもある程度改善します。ただ違いがたったの「５」でも容量は大きく変わります。
WebPへの変換のみ停止
そして一番の問題「WebP」へのフォーマット変換。
まずドキュメントには「対応ブラウザにてWebPを表示」と書かれていますが、それでも対応していないSafariなどに出力してしまう場合があるようです（画像が非表示となります）。
wpXのサポートからも情報は得られなかったので、モジュールの仕様なのか、サーバ側で設定が足りてないのか原因は不明ですが、これについてはWebPへの変換さえ停止できれば解決します。
ModPagespeedDisableFilters convert_jpeg_to_webp,convert_to_webp_lossless
「画像圧縮率の指定」と「WebP変換停止」は並記できます。
他にもフィルタはたくさんあるので、サイトに合った微調整が考えられそうです。