[WordPress] ngx_pagespeed moduleを試したらPageSpeedスコアがかなり伸びた

pagespeed

前回nginxをソースからインストールしてngx_pagespeed moduleを使えるようにしたので試してみたところ予想以上の効果でした。

ngx_pagespeed

ngx_pagespeedはGoogleが提供しているNginx用のモジュールで、さくっとサイトの表示速度を向上させることができます。これのいいところはnginxやapacheなどのWebサーバ側で最適化を行ってくれるので、WordPressプラグインで出力されるcssファイルやjsファイルなどこちらでは変更が加えにくい部分に対しても最適化してくれるところが一番のメリットなのかなと思います。
前回はnginxをソースからインストールしてこれを使えるようにしました。

導入前と導入後

今までいくつかPageSpeedの最適化関連の対策をしてきました。

以下がngx_pagespeed module導入前のスコアです。

「スクロールせずに見えるコンテンツのレンダリングブロック JavaScript/CSS を排除する」項目が非常に厄介で、以下がその部分の詳細です。

詳しい対策方法はこちらなどに載っていますが、小さいscriptはインライン化したり、javascriptの読み込みを遅延させたり、cssはjavascriptより上に書いたりすると良いらしいです。
しかしWordPressの場合はjQueryやプラグインで使用するcssやjsなどはwp_head()内で呼ばれるため、それらの順番を入れ替えたり、読み込みを遅延させたり、ひとつのファイルにまとめたりなどはできない(やり方がわからない)わけです。
そこで今回Webサーバ側でこれらの最適化が行えるpagespeed moduleを試してみた結果がこちら。

夢の90点台突入と思いきや95点オーバー!
警告されるファイルが12個から1つだけになりました。
トップページは記事ページに比べてソーシャルモジュールなどの外部リソースが少ないので点数高めになりました。
Googleが提供しているだけあってさすがですな。

pagespeedの設定

このページの様に以下をnginx設定ファイルのserverブロックに追加

server {
	listen   80;
	
	## 中略 ##
	
	pagespeed on;

	# Needs to exist and be writable by nginx.
	pagespeed FileCachePath /var/ngx_pagespeed_cache;

	# Ensure requests for pagespeed optimized resources go to the pagespeed handler
	# and no extraneous headers get set.
	location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {
		add_header "" "";
	}
	location ~ "^/ngx_pagespeed_static/"; { }
	location ~ "^/ngx_pagespeed_beacon$" { }
	location /ngx_pagespeed_statistics { allow 127.0.0.1; deny all; }
	location /ngx_pagespeed_global_statistics { allow 127.0.0.1; deny all; }
	location /ngx_pagespeed_message { allow 127.0.0.1; deny all; }
	location /pagespeed_console { allow 127.0.0.1; deny all; }
	
	pagespeed RewriteLevel PassThrough;
	pagespeed EnableFilters move_css_above_scripts,move_css_to_head;
	pagespeed EnableFilters combine_css,rewrite_css,fallback_rewrite_css_urls;
	pagespeed EnableFilters inline_css,extend_cache_css;
	pagespeed EnableFilters rewrite_javascript,combine_javascript;
	pagespeed EnableFilters defer_javascript,inline_javascript;
}

Filterはこのページに載っています。

pagespeed RewriteLevel CoreFilters;

にするとGoogleおすすめのフィルターが有効になりますが、画像圧縮はできているので改めてrewrite_imagesフィルターやrecompress_pngフィルターなどはいらないため今回は「スクロールせずに見えるコンテンツのレンダリングブロック JavaScript/CSS を排除する」対策ということで

pagespeed RewriteLevel PassThrough;

にしてcssやjs関係のフィルターを中心に以下を適用しました。

move_css_above_scripts
cssをjsの上に移動する
move_css_to_head
cssをhead内に移動する
combine_css
複数のcssをひとつにまとめる
rewrite_css
minifyやコメント除去、書き換え
fallback_rewrite_css_urls
fallbackメソッドを使ってCSS内のURLを書き換える
inline_css
小さなcssをインライン化する
extend_cache_css
cssのcache lifetime延長
rewrite_javascript
jsをminify
combine_javascript
複数のjsをひとつにまとめる
defer_javascript
jsの読み込みを遅延
inline_javascript
小さなjsをインライン化

他にもsprite_imagesやlazyload_imagesなど興味深いフィルターがあるので色々と試してみたいと思います。