ちょっと前にロフトワーク社で開催された表示高速化イベントに参加してきました。その名も「CMSプロレス」。参加した際に設定したGoogle PageSpeed Moduleについて、どんな設定をしたのか書いていきます。

「表示最速王」の栄冠は誰の手に？ CMSバトルイベント第3回CMSプロレス

なお、導入は超簡単、効果は抜群なので、表示高速化を考えている方はぜひぜひ入れちゃってください。ローカルでgulpなどのタスクランナーで走らせている内容は、ほぼほぼコレでサーバサイドで出来ちゃいます。

Google PageSpeed Module | Google Developers

PageSpeed Moduleの設定値

.htaccessに以下の内容を記載。利用は自己責任で。


# mod_pagespeed

# pagespeedの有効化
#ModPagespeed off
ModPagespeed on

# 有効化
ModPagespeedEnableFilters sprite_images,rewrite_css,combine_css,inline_google_font_css,prioritize_critical_css,outline_css,remove_comments,collapse_whitespace
#ModPagespeedEnableFilters rewrite_javascript,combine_javascript,inline_javascript,defer_javascript
ModPagespeedEnableFilters rewrite_javascript,combine_javascript,inline_javascript
ModPagespeedEnableFilters make_google_analytics_async,trim_urls

# 無効化
ModPagespeedDisableFilters lazyload_images,inline_preview_images
ModPagespeedCriticalImagesBeaconEnabled false

ON/OFFは調整で頻繁に利用するので、コメントアウトで切り替えられるようにしておいたほうがラクです。
あとは、有効と無効を明示的に記述するほうが、把握しやすいです。基本的にカンマ区切りで記述していけるのですが、自分がわかりやすい項目ごとに、行を変えたほうがいいと思います。CSS用とかJS用とか画像用とか。

わりとハマるポイント

JSもCSSも結合してくれる処理( combine_css, combine_js )があるのですが、JSを結合するとページでエラーが出やすいです。CSSはレイアウト崩れが起きやすいです。結合系の処理は、しっかりと検証しましょう。
あと、画像最適化は軽くなるんですが、結構荒くなります。注意が必要です。

個人的に良かったポイント

画像のWebP配信はいいですね。ブラウザ判定して、対応ブラウザにはWebP配信してくれます。JPGから比べても1割くらい軽くなります。
GAタグを非同期で読み込んでくれるとか、CSSの主要なレイアウトの記述をページ側に記述してくれるとか、ページ最適化をかゆいところに手が届くレベルで自動で処理してくれます。便利です。
あとは、インストールはコマンド数行で終わりますし、.htaccessで設定できるのも便利です。confに書かないので、リスクを減らせます。

参考サイト