「使用していない JavaScript の削除」LCP 対策で速度改善

PageSpeed Insights で、「使用していない JavaScript の削除」をせよと指示されるケースの対策です。

使用していない JavaScript の削除
使用していない JavaScript の削除

PageSpeed で「使用していない JavaScript を削除せよ」と指示されています。
LCP に効果がある施策とされます。

改善方法

「JavaScript の削除」指摘の対策には、2つの方法をがあります。

  • JavaScript を削除する
  • JavaScript の読み込み属性を defer にする

いずれも有効な方法ですのでお試しください。

JavaScript を削除

PageSpeed が指摘している JavaScript を削除すれば、指摘はでなくなります。

しかし、エンジニアなど専門スタッフでない場合、JavaScript を削除していいのか判断がつかないケースもあります。
そのようなケースは次の defer 属性付与が有効です。

JavaScript の読み込み属性を defer にする

JavaScript 読み込み時の属性を defer で記述します。
該当のスクリプトが遅延読み込みになります。そのため PageSpeed のパフォーマンス改善へ効果があります。

パフォーマンスの確認

PageSpeed Insights を確認して「使用していない JavaScript の削除」という記述で該当の JS が消えていれば OK です。

パフォーマンスへの影響

今回は defer 属性追加の対応で PageSpeed の点数に改善がみられました。

defer 設定前の点数

defer 設定なしでは、モバイル43点、デスクトップ88点でした😇

モバイルの点数43点
モバイルの点数43点

モバイルは赤評価になっています。

デスクトップの点数88点
デスクトップの点数88点

defer 設定ありの点数

defer ありでは点数が改善しました。

モバイルの点数50点で7点の改善
デスクトップの点数92点で4点の改善

モバイルで7点、デスクトップで4点の改善となりました。

「使用していない JavaScript の削除」まとめ

「使用していない JavaScript の削除」の対応は確実に PageSpeed の改善となります。
PagePeed の点数、パフォーマンス改善の参考としてください。

以下の対策でも同様の手法が有効です。

参考

Remove unused JavaScript