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


モバイルファーストインデックスの時代にPageSpeed Insightsで28点という低いモバイルページの点数を出したため、少しずつ改善していく企画です。

今回の改善項目

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

レンダリングを妨げるリソースを除外することで推定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の「キーリクエストのプリロード」も改善項目として出ている人はこちらも読んでみてください。