WEBページのパフォーマンス測定ツール Google PageSpeed Insights でページを分析すると、ほぼ必ず「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」の改善方法が提案されます。これに対応するには JavaScript と CSS を最適化することが必要です。そこで今回は、WordPress の「Autoptimize」プラグインを使い、JavaScript と CSS を最適化してみました。
PageSpeed Insights の計測結果
今回計測したページでは、モバイル、パソコン共に「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」優先度が高くなっています。
「修正方法を表示」をクリックして、詳細を確認すると、レンダリングをブロックしているスクリプトが「５個」、CSSは「１２個」もあるそうです。
WordPress Autoptimize プラグインの導入
Autoptimize は、JavaScript や CSS、HTML を最適化して、サイズを縮小してくれるプラグインです。WordPressの管理画面 → プラグイン → 新規追加 から「Autoptimize」を検索して、インストールします。
Autoptimize の設定
設定 → Autoptimize の設定画面で、JavaScript と CSS の最適化にチェックを入れて「Save Changes and Empty Cache」をクリックします。
Autoptimize の動作
Autoptimize を有効にすると、たくさんあった JavaScript や CSS ファイルが、ごっそり無くなり、「autoptimize_」から始まる１つのファイルにまとめられます。
↓
まとめられた CSS ファイル
Autoptimize の無効化
Autoptimize プラグインを、そのまま無効化すると、最適化されたファイルが残ってしまいますので、JavaScript や CSS など最適化のチェックを全て外し「Save Changes and Empty Cache」をクリックしてから、Autoptimize プラグイン無効にします。
PageSpeed Insights 再計測
JavaScript と CSS を最適化後、再計測してみると、モバイル「51 → 52」、パソコン「85 → 86」と、微増ながら、スコアが改善されました。
スコアは微増ですが、レンダリングをブロックしている JavaScript は「５個 → ０個」、CSS は「１２個 → ３個」 と大幅に削減できたようです。
Google Chrome ブラウザでの計測
最適化したことにより、JavaScript と CSS の読込みが完了するまでの時間 (DOMContentLoaded) が、約「-0.3秒」改善されました。
| Autoptimize | 1回目 | ２回目 | ３回目 | ４回目 | ５回目 | 平均 |
|---|---|---|---|---|---|---|
| 無効 | 1.63 | 1.46 | 1.25 | 1.29 | 1.32 | 1.39 |
| 有効 | 1.16 | 1.15 | 1.08 | 1.06 | 1.09 | 1.11 |
| 差異 | -0.47 | -0.31 | -0.17 | -0.23 | -0.23 | -0.28 |
終わりに
PageSpeed Insights のスコアが、もう少し伸びてくれると嬉しいのですが、ページが表示されるまでの時間は、Autoptimize プラグインにより、確実に短縮できているようです。
Autoptimize プラグインの設定は簡単ですので、実際に JavaScript と CSS を最適化するまでに、３分もかかりません。WordPressを使っている方は、ぜひ一度ためしてみてはいかがでしょうか
コメント