PageSpeed Insights対策、「JavaScript to Footer」で.jsをフッターに移動する [ #WordPress ]

PageSpeed Insightsのスコアを上げるため、WordPressプラグイン「JavaScript to Footer」を導入し、JavaScript(.js)をHTMLのフッター部に移動しました。

プラグイン導入契機

さいきんGoogle AdSenseのホーム画面を表示すると、「スコアカード」が表示されるようになりました。

2013-09-08_0630

「収益の最適化」や「Google+」は高得点ですが、「サイトの状況」にある「ページの読み込み時間のパフォーマンス」にビックリマークが表示されています。

気になったので「分析したページ:」のURLをクリックしたところ、PageSpeed Insightsによる解析画面が表示されました。

2013-09-08_0647

当ブログでいま最も効果的なページ読み込み時間の短縮方法は「Remove Render-Blocking JavaScripts」とのこと。HTMLヘッダーでロードしているJavaScriptがページの描画を邪魔しているので、これを避ければ良いそうです。

と言うことで、一番簡単な解決方法である「ヘッダーのJavaScriptをフッターに移動する」を実行することにしました。

「JavaScript to Footer」導入

上記PageSpeed Insightsで指摘された「ヘッダーでロードしているJavaScript」は、WordPress本体が呼び出しているJavaScriptファイルです。

これを手動でフッターに移動するのは少々面倒なので、プラグインを利用することにしました。

2013-09-08_0700

「JavaScript to Footer」は、その名の通りJavaScriptをフッターに移動するプラグインです。

プラグインを導入するだけでヘッダーのJavaScriptがフッターに移動するので、実に手軽で良いですね。

WordPress › JavaScript to Footer « WordPress Plugins

PageSpeed Insightsのスコアが改善した

「JavaScript to Footer」を導入後、ふたたびPageSpeed Insightsのスコアを確認してみました。

2013-09-08_0635

無事にRemove Render-Blocking JavaScriptsの警告が消え、Insightsスコアもアップしました。

やったね!

最後に

JavaScriptをフッターに移動することで、体感でもページ表示が早くなったような気がします。プラグインを導入するだけで手軽に改善できますので、ページ表示時間を気にする人は一度試してみてください。

で、次に必要な対策はCSSの圧縮らしいんだけど、指摘されてるのがFacebookやPocketなんかのブログパーツが呼び出してるCSSファイルなんだよなぁ…一般的なブログだと対応が難しいと思うんだけど、みんな一体どうしてるんだろう?

もし何か外部CSSの圧縮に効果的な手段がありましたら、ツイッター @hideto かコメント欄で教えてもらえると嬉しいです。

そんな感じで!

TwitterやRSSでも最新情報をお届けしています。フォローよろしくお願いします。

follow us in feedly