PageSpeed Insights の「レンダリングを妨げるリソースの除外」をAsync JavaScriptで対処したメモ

PageSpeed Insights の改善に向けて、、「レンダリングを妨げるリソースの除外」に対処します。まずは状況の確認

調べると以下の2つのjqueryが引っかかっているみたいです。
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js

解決策として「Async JavaScript」をインストール

Async JavaScript

Async JavaScriptをインストールして、JavaScriptの読み込みを非同期化します。前提として同じ作者が作ったAutoptimizeをインストール済みです。この2つのプラグインを使います。

Async JavaScriptの設定方法

  • 「Enable Async JavaScript」にチェックを入れます。
  • 「Quick Settings」は「Apply Async」または「Apply Defer」を選択します。

※今回はApply Asyncにしましたが、Apply Asyncにした場合に画像の読み込みができなかったという書き込みがありました。その場合はApply Deferで試してみます。

最後にAutoptimizeでキャッシュを削除します。←これ大事

設定は以上です。

結果

PageSpeed Insights を確認したところ、見事に対処できました。「レンダリングを妨げるリソースの除外」の項目がきれいに無くなっています。
数値もけっこう上がりました。

コメント