レンダリングブロックをWordPressのプラグインだけで改善する方法 【PageSpeed】

「スクロールせずに見えるコンテンツのレンダリングブロックjavascript/cssを排除する」という対応に、試行錯誤して躓いていたんですが、なんとか対応できた気がするので記事に残しておきます。

jQueryとかはこの警告から外すことができない（ような）ので、できるものだけ外しましょうという路線で数を減らせばよさそうな感じです。スコアも数減らすだけであがりました。

2つプラグインを使いましたが、それぞれのブラグインで使用した機能は、素直な感じなので相性？の問題は出にくいと思うのですが、動作確認はしたほうがよいでしょう。

Javascriptを何とかする

■Asynchronous Javascript
WordPress › Asynchronous Javascript « WordPress Plugins

プラグインを有効にするだけでOKです。

javascriptを非同期で読み込むプラグインなので、本当に効果があるのかは私にはわからないのですが、警告されるJavascriptの数は減ります。

原理は簡単で、head.load.min.jsというスクリプトで複数のスクリプトを読み込むということをしてるようです。

<script type="text/javascript" src="http://blog.example.com/wp-content/plugins/asynchronous-javascript/js/head.load.min.js"></script><script type="text/javascript">head.js({"wfm-lightbox": "http://blog.example.com/wp-content/plugins/old_wordpress-flickr-manager/js/wfm-lightbox.php?ver=3.7.1"},{"respondjs": "http://blog.example.com/wp-content/plugins/respondjs/js/respond.min.js?ver=1.2.0"});</script>

こんな感じで展開されてました。

CSSを何とかする

■Autoptimize
WordPress › Autoptimize « WordPress Plugins


プラグインを有効にして、「Optimize CSS Code?」だけチェックしてください。

複数あるCSSが以下のようにまとめられます。

<link type="text/css" media="all" href="http://blog.example.com/wp-content/cache/autoptimize/autoptimize_27e2ec14936c3c140dd7a26889ca7365.php" rel="stylesheet" />

参考：
・【Wordpress高速化日記】レンダリングブロックjavascript/cssを排除するプラグイン3つ ｜ウェブシュフ
・簡単最適化プラグインAutoptimizeでWordPressをスピードアップ | WordPressのプラグインに感謝

追記：2014/02/05
■WP Minify
WordPress › WP Minify « WordPress Plugins

Autoptimizeの代わりにこちらを使用することも可能。
CSS圧縮だけを利用したいので、「Enable CSS Minification」だけチェックを入れる

参考：
・CSSやJSファイルを1つにまとめてを高速化するWP Minifyというプラグインが効果バツグンだった。 | @attrip　(アットトリップ）
・WP MinifyでCSS/JavaScriptをまとめて軽量化、ページの応答速度を向上させる | ゆっくりと…