レンダリングを妨げるリソースの除外を試みる

2020年4月6日

スポンサーリンク

今回の改善項目

レンダリングを妨げるリソースの除外

※レンダリングとは「描写処理」と捉えてください。

ここでは、描写を遅らせているファイルの存在と、そのファイルの読み込みを後回しにすることで短縮できる時間が分かります。

レンダリングを妨げるリソースを除外することで、推定1.7sの時間が短縮できるようです。

レンダリングを妨げているリソースも5件以上あります。

ページのFitst Paintがリソースをブロックしています。重要なJavaScriptやCSSはインラインで配信し、それ以外は遅らせてくれと書かれています。

※インラインは「中に埋め込む」とのことで、重要なJavaScriptやCSSは直接書きこんでとのことです。

つまりやることは2点

  • 重要なものはインラインに
  • 重要でないものは遅らせる

ここからはプラグインの力に頼りましょう。
ワードプレスは便利なプラグインが多いですからね。

プラグインAutoptimizeを使う

ワードプレスのプラグインの追加からAutoptimizeを選びます。

Autoptimizeの設定

Autoptimizeをインストールしたら設定を行います。

JavaScriptオプション

JavaScriptコードの最適化とAggregate JS-files?の2つにチェックを入れます。

CSSオプション

CSSコードを最適化とAggregate CSS-files?、インラインのCSSを連結の3つにチェックを入れます。

これで設定は完了です。

今回はJavaScriptオプションとCSSオプションだけ設定しました。

結果

早速結果を見てみましょう。

短縮できる推定時間が1.7sから0.14sに変わりました。
レンダリングを妨げるリソースの数も1件に減っています。

速度テストの点数はというと

点数は33点と5点上がりました。

最後に

今回はレンダリングを妨げるリソースの除外を試みてみました。結果的に少しは速度が改善されてよかったです。これからも少しずつモバイルページの速度改善をしていきます。

PageSpeed Insightsの「キーリクエストのプリロード」も改善項目として出ている人はこちらも読んでみてください。