PageSpeed Insights対策、「JavaScript to Footer」で.jsをフッターに移動する [ #WordPress ]
PageSpeed Insightsのスコアを上げるため、WordPressプラグイン「JavaScript to Footer」を導入し、JavaScript(.js)をHTMLのフッター部に移動しました。
プラグイン導入契機
さいきんGoogle AdSenseのホーム画面を表示すると、「スコアカード」が表示されるようになりました。
「収益の最適化」や「Google+」は高得点ですが、「サイトの状況」にある「ページの読み込み時間のパフォーマンス」にビックリマークが表示されています。
気になったので「分析したページ:」のURLをクリックしたところ、PageSpeed Insightsによる解析画面が表示されました。
当ブログでいま最も効果的なページ読み込み時間の短縮方法は「Remove Render-Blocking JavaScripts」とのこと。HTMLヘッダーでロードしているJavaScriptがページの描画を邪魔しているので、これを避ければ良いそうです。
と言うことで、一番簡単な解決方法である「ヘッダーのJavaScriptをフッターに移動する」を実行することにしました。
「JavaScript to Footer」導入
上記PageSpeed Insightsで指摘された「ヘッダーでロードしているJavaScript」は、WordPress本体が呼び出しているJavaScriptファイルです。
これを手動でフッターに移動するのは少々面倒なので、プラグインを利用することにしました。
「JavaScript to Footer」は、その名の通りJavaScriptをフッターに移動するプラグインです。
プラグインを導入するだけでヘッダーのJavaScriptがフッターに移動するので、実に手軽で良いですね。
☆ WordPress › JavaScript to Footer « WordPress Plugins
PageSpeed Insightsのスコアが改善した
「JavaScript to Footer」を導入後、ふたたびPageSpeed Insightsのスコアを確認してみました。
無事にRemove Render-Blocking JavaScriptsの警告が消え、Insightsスコアもアップしました。
やったね！
最後に
JavaScriptをフッターに移動することで、体感でもページ表示が早くなったような気がします。プラグインを導入するだけで手軽に改善できますので、ページ表示時間を気にする人は一度試してみてください。
で、次に必要な対策はCSSの圧縮らしいんだけど、指摘されてるのがFacebookやPocketなんかのブログパーツが呼び出してるCSSファイルなんだよなぁ…一般的なブログだと対応が難しいと思うんだけど、みんな一体どうしてるんだろう？
もし何か外部CSSの圧縮に効果的な手段がありましたら、ツイッター @hideto かコメント欄で教えてもらえると嬉しいです。
そんな感じで！