PageSpeed の「レンダリングを妨げるリソースの除外」対策でJS読み込み速度改善

PageSpeed Insights の表示で、「レンダリングを妨げるリソースの除外」をせよと指示されるケースの JavaScript の対策です。

上図では、JavaScript の jQuery などライブラリファイルがレンダリングを妨げるリソースとして指摘されています。

改善対策

JavaScript の読み込みを遅らせることで、レンダリングの妨げにならないようにします。基本的には遅延ロードなどをすれば点数改善ができます。

link タグに defer 属性を追加

JavaScript の遅延読み込みには、async と defer があるそうなのですが、今回は defer を使います。

元のタグ

以下のように外部 JS を読み込んでいた箇所が PageSpeed の指摘です。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
             crossorigin="anonymous">

改善したタグ

defer 属性を足します。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
             crossorigin="anonymous" defer>

script タグの最後に defer を足しています。一番後ろに書きましたが、属性なので script タグ内のどこに足しても大丈夫です。

PageSpeed で指摘された読み込み JS には全部 defer を足しておくとパフォーマンス改善が期待できます。

パフォーマンスの確認

PageSpeed Insights を確認して「レンダリングを妨げるリソースの除外」という記述で該当の JS（jquery-3.2.1.slim.min.js）が消えていれば OK です。

パフォーマンスへの影響

defer 属性で PageSpeed の点数に改善がみられました。

defer 設定前の点数

defer 設定なしでは、モバイル41点でした😇

defer 設定ありの点数

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

モバイルで、17点の改善です😁
defer 設定、やる価値のある対応ですね。

WordPress の wp_head() でライブラリが出力される場合は？

当記事でご紹介した手法を WordPress で使う場合は wp_head() をカスタマイズする必要がある場合があります。wp_head() で出力される JavaScript に defer 属性を付与するには、functions.php で wp_head() の出力を変更します。

以下の記事も合わせてご覧ください。