
PageSpeed Insightsの改善項目で、「レンダリングを妨げるリソースの除外」とあるけど、これって何?どうすれば改善できるか教えて。
こんな悩みを解決します。
- レンダリングを妨げるリソースとは?
- レンダリングを妨げるリソースを除外する方法
PageSpeed Insightsを使用してページ表示速度のスコアを調べたら、驚愕のモバイル37、パソコン52!


これはマズい…。
そこで、PageSpeed Insightsの改善できる項目を確認してみると、どうやら主な要因は「レンダリングを妨げるリソースの除外」のようでした。
そこで今回は、以下の2つのプラグインを使って「レンダリングを妨げるリソースの除外」を超簡単にする方法をご紹介します。
- Async JavaScript
- Autoptimize
参考にしたのはこちらの記事です。
最終的にはスコアを50以上改善させたので、ぜひ試してみてください。
この記事を読めば、レンダリングを妨げるリソースを除外して、スコアを劇的に改善できます。
PageSpeed Insightsのレンダリングを妨げるリソースの除外とは

ブラウザのレンダリングとは、簡単に言うと「単なる文字情報(htmlファイル)を色や文字サイズなど見た目を変えて表現していること」です。
ウェブを訪問すると、Webブラウザがサイトの情報を上から下まですべて読み進めて、そこで読み取ったデータを元に、わかりやすいように表示してくれます。
その際に、途中でCSSやJavaScriptに出会うと、それらを読み込もうとして一旦停止します。

その処理を終えるまで、ウェブサイトを表示してくれないのです。
もし処理に時間がかかるリソースが一番下にあると、ウェブサイトを訪問した直後はスクロールをしていないので、一番下は見ないにもかかわらず、その処理が終わるまでサイトの表示をしてくれません。
レンダリングを妨げるリソースとは、JavaScriptとCSSのような、読み込みを遅くさせているリソースのことです。
ですので、レンダリングを妨げるリソースの除外とは「読み込みを遅くさせている不要なJavaScriptとCSSを除外しましょう」という意味です。
レンダリングを妨げるリソースを見てみる

では実際に、改善できる項目を見ていきましょう。
PageSpeed Insights分析画面を下にスクロールすると、改善できる項目でレンダリングを妨げるリソースの除外というものが出てきました。

ここをクリックして、リソースの中身を見ていきましょう。

これすべて修正するの・・・。
上記は一部で、まだまだ下にズラーっと続いています。
しかしご安心ください。これを簡単に解決するプラグインがあったのです。
レンダリングを妨げるリソースを除外するプラグインと設定方法【Autoptimize&Async JavaScript】

レンダリングを妨げるCSSとJavaScriptリソースを除外するには、以下の2つの無料プラグインを使用します。
- Async JavaScript
- Autoptimize
まずはAsync JavaScriptとAutoptimizeの両プラグインをインストールします。
次に各プラグインの設定方法を見ていきます。
Async JavaScriptの設定方法
まず、Async JavaScriptの設定をしていきます。
- 「設定」→「Async JavaScript」に行きます。
- 「Settings」→Enable Async JavaScriptで、Enable Async JavaScript?にチェックを入れます。
- その一段下「Quick Settings」で「Apply Async」を選択します。

最後に一番下までスクロールし、Save Settingsで保存します。
「Async」で問題が起きた場合には「Defer」に変更してみるか、「Apply Async (jQuery excluded)」「 Apply Defer (jQuery excluded)」で「jQuery」を除外するといいそうです。
僕は問題は起きませんでした。
Autoptimizeの設定方法
続いて、Autoptimizeを設定していきます。
- 「設定」→「Autoptimize」に行きます。
- 「JS、CSS & HTML」→JavaScript オプション内の最上部、JavaScript コードの最適化にチェックを入れます。
- CSSオプション内の最上部、CSS コードを最適化にチェックを入れます。

最後に一番下までスクロールし、変更の保存とキャッシュの削除で保存します。
以上です。
AutoptimizeとAsync JavaScript使用後の改善スコアは?


見事、モバイル・パソコンともに90以上を記録!
たったこれだけで50以上スコアが改善しました!
このプラグインは同じ開発者のため相性も良く、簡単にスコアを改善させることができます。
難しい操作も不要なため、何をしてもPageSpeed Insightsのスコアが改善しない方にはおススメの方法です。
まとめ:レンダリングを妨げるリソースの除外にはプラグイン【AutoptimizeとAsync JavaScript】
以上、Async JavaScriptとAutoptimizeの両プラグインを使用して、レンダリングを妨げるリソースを除外する方法を紹介しました。
ページの表示速度は、直帰率に大きく影響します。
表示速度が1秒から3秒になると直帰率が32%増え、3秒以上かかるモバイルユーザーは53%が離脱するというデータも出ています。
どれだけいいコンテンツでも、読まれる前に閉じられてしまっては評価されず、SEOにも影響してしまいます。
ページの表示速度を上げて、ユーザーに快適な環境を整えましょう。
SEO対策で表示速度は必須の要素です。高速化を実現するには、サーバー選びがかなり重要です。
おすすめはConoHa WINGです。理由はいたってシンプルで、「コスパがとてもいい」からです。