「レンダリングを妨げるリソースの除外」と出た場合の対処法

こんにちは。フクミミです。

今回はGoogle PageSpeed Insightsでサイトの測定をした際に「レンダリングを妨げるリソースの除外」と表示されたときの改善方法をご紹介します。

この記事を最後まで読むと、以下の内容をインプットすることが出来ますので是非、最後まで読んで頂けると嬉しいです。

レンダリングを妨げるリソースって何？

「レンダリングを妨げるリソース」は以下の2つが考えられます。

まず、ユーザーがあなたのサイトに訪れたとき、Webブラウザはサイトのコード先頭から確認し、上から下へと読み込んでいきます。その際に、ファーストビューに映らないJavaScriptで記述した動的な何かが、ページ最下部にあるとしたらどうでしょう？

Webブラウザが読み込むソースコードの一般的な構成はこうです。

<head>にあるメタ情報→JavaScriptタグ→htmlコード

ということは、本来訪れた時に一番に見えるはずのHTMLコンテンツよりも先に、ページ最下部にあるJavaScriptがレンダリング（生成）されることで一時的に待ち時間が発生し、結果的に「読み込みが遅いサイト」と評価されてしまいます。

では、どうやってレンダリングを妨げるリソースを除外するのか？

それはWordPressのプラグインを使うことで簡単に除外することが出来ます。

それでは、実際に除外していきましょう。まず、私のサイトをGoogle PageSpeed insightsで測定してみた結果がこちら。

「レンダリングを妨げるリソースの除外」の短縮できる時間が1.87s（秒）と出ています。

今回こちらの時間を短縮して改善していきたいと思います。

改善方法はWordPressの無料プラグインを2つ使用します。ダッシュボード画面からプラグイン→新規追加を選択し、検索窓に「Async JavaScript」と入力します。

すると「Async JavaScript」と一緒に「Autoptimize」というプラグインも表示されますので2つインストールして「有効化」してください。

次に設定から「Async JavaScript」→「Enable Async JavaScript」へチェックを入れます。

そして「Quick Settings」の中から「Apply Async」を選択してページ下部にある「Save Settings」で設定を保存した後、Google PageSpeed insightsで再分析をかけます。

「Apply Async」で再分析をした結果、「レンダリングを妨げるリソースの除外」の時間が1.87sから1.2s（秒）に改善されました。

別の方法も試してみました。「Quick Settings」の中から「Apply Defer」を選択してページ下部にある「Save Settings」で設定を保存した後、Google PageSpeed insightsで再分析をかけます。

「Apply Defer」で再分析をした結果、「レンダリングを妨げるリソースの除外」の時間が1.2sから0.53s（秒）に改善されました。

始めにインストールしておいたもう1つのプラグイン「Autoptimize」を使用して除外していきます。

ダッシュボード画面の設定から「Autoptimize」を開き、「JavaScriptコードの最適化」へチェックを入れます。

更に「CSSオプション」へチェックを入れてページ下部にある「変更を保存してキャッシュを削除」をクリックします。

Google PageSpeed insightsで再分析をかけると、「レンダリングを妨げるリソースの除外」の時間が0.53sから0.41s（秒）に改善されました！

PageSpeed Insightsといったパフォーマンス測定ツールは、ネットワーク環境やサーバー・クライアントの負荷に応じて、テストの度に結果が変動します。

いかがでしたか？

今回は「レンダリングを妨げるリソースの除外」の改善方法をご紹介しましたが、速度改善項目は他にも色々あるので、時間があるときに診てみるのも良いかも知れません。

それではこの辺で＾＾