jqueryによるレンダリングブロック問題解決法

pagespeedサイトの警告の1つとして以下警告がありますが、

“スクロールせずに見えるコンテンツのレンダリングをブロックしてaいる JavaScript/CSS を排除する”

今回はjqueryを使う際の問題解決方法を紹介します。
一番最初に対応したのがscriptの属性としてasync属性(*1)を付けるというものですが、
これだとjqueryをasync属性とするとjqueryをベースとしてるjsが動作しなくなり、
どうしてもjqeuryをasync属性にできない問題がありました。

(*1: asyncってのはjsの読み込み自体を非同期にするもの)

そこでひらめいたのが、
js自体を中段コンテンツ(2画面目)あたりで挿入する方法。
元々headタグ内に配置してたjqueryを2画面目あたりに入れることでうまく回避することができました。
jqueryプラグインのjsもうまく動作します。
例えばテンプレファイルとしてmiddle_head.tplなるものを用意してそこに挿入するjsを追加すれば
管理しやすいと思います。

pagespeedはスコアが悪ければそれがトリガーとなり
検索ランクの1要素として評価される可能性も十分あるので、
スコアを上げればseoに効く可能性があります。
やっておいて損はないと思います。

対応前
スクリーンショット 2015-09-16 15.49.12

対応後
スクリーンショット 2015-09-16 15.40.21