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

2015年4月19日  カテゴリー:WEB WordPress  タグ: , ,
Pocket
LINEで送る

WEBページのパフォーマンス測定ツール Google PageSpeed Insights でページを分析すると、ほぼ必ず「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」の改善方法が提案されます。これに対応するには JavaScript と CSS を最適化することが必要です。そこで今回は、WordPress の「Autoptimize」プラグインを使い、JavaScript と CSS を最適化してみました。

PageSpeed Insights の計測結果

今回計測したページでは、モバイル、パソコン共に「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」優先度が高くなっています。
wp-autoptimize-01

wp-autoptimize-02

「修正方法を表示」をクリックして、詳細を確認すると、レンダリングをブロックしているスクリプトが「5個」、CSSは「12個」もあるそうです。
wp-autoptimize-03

WordPress Autoptimize プラグインの導入

Autoptimize は、JavaScript や CSS、HTML を最適化して、サイズを縮小してくれるプラグインです。WordPressの管理画面 → プラグイン → 新規追加 から「Autoptimize」を検索して、インストールします。

Autoptimize の設定

設定 → Autoptimize の設定画面で、JavaScript と CSS の最適化にチェックを入れて「Save Changes and Empty Cache」をクリックします。
wp-autoptimize-04

Autoptimize の動作

Autoptimize を有効にすると、たくさんあった JavaScript や CSS ファイルが、ごっそり無くなり、「autoptimize_」から始まる1つのファイルにまとめられます。
wp-autoptimize-05


wp-autoptimize-06

まとめられた CSS ファイル
wp-autoptimize-07

Autoptimize の無効化

Autoptimize プラグインを、そのまま無効化すると、最適化されたファイルが残ってしまいますので、JavaScript や CSS など最適化のチェックを全て外し「Save Changes and Empty Cache」をクリックしてから、Autoptimize プラグイン無効にします。

PageSpeed Insights 再計測

JavaScript と CSS を最適化後、再計測してみると、モバイル「51 → 52」、パソコン「85 → 86」と、微増ながら、スコアが改善されました。
wp-autoptimize-08

wp-autoptimize-09

スコアは微増ですが、レンダリングをブロックしている JavaScript は「5個 → 0個」、CSS は「12個 → 3個」 と大幅に削減できたようです。
wp-autoptimize-10

Google Chrome ブラウザでの計測

最適化したことにより、JavaScript と CSS の読込みが完了するまでの時間 (DOMContentLoaded) が、約「-0.3秒」改善されました。

Autoptimize1回目2回目3回目4回目5回目平均
無効1.631.461.251.291.321.39
有効1.161.151.081.061.091.11
差異-0.47 -0.31 -0.17 -0.23 -0.23 -0.28
Chrome デベロッパーツール>Network(Disable cache ON)DOMContentLoaded の計測値

終わりに

PageSpeed Insights のスコアが、もう少し伸びてくれると嬉しいのですが、ページが表示されるまでの時間は、Autoptimize プラグインにより、確実に短縮できているようです。

Autoptimize プラグインの設定は簡単ですので、実際に JavaScript と CSS を最適化するまでに、3分もかかりません。WordPressを使っている方は、ぜひ一度ためしてみてはいかがでしょうか

スポンサーリンク
Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です