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

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

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

PageSpeed から使用していない 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 の改善となりました。
パフォーマンス改善の参考としてください。

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