レンダリングを妨げるリソースを簡単に除外できるプラグイン

こんな悩みを解決します。

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の設定方法

まず、Async JavaScriptの設定をしていきます。

1. 「設定」→「Async JavaScript」に行きます。
2. 「Settings」→Enable Async JavaScriptで、Enable Async JavaScript?にチェックを入れます。
3. その一段下「Quick Settings」で「Apply Async」を選択します。

最後に一番下までスクロールし、Save Settingsで保存します。

「Async」で問題が起きた場合には「Defer」に変更してみるか、「Apply Async (jQuery excluded)」「 Apply Defer (jQuery excluded)」で「jQuery」を除外するといいそうです。

僕は問題は起きませんでした。

Autoptimizeの設定方法

続いて、Autoptimizeを設定していきます。

1. 「設定」→「Autoptimize」に行きます。
2. 「JS、CSS & HTML」→JavaScript オプション内の最上部、JavaScript コードの最適化にチェックを入れます。
3. CSSオプション内の最上部、CSS コードを最適化にチェックを入れます。

最後に一番下までスクロールし、変更の保存とキャッシュの削除で保存します。

以上です。

AutoptimizeとAsync JavaScript使用後の改善スコアは？

見事、モバイル・パソコンともに90以上を記録！

たったこれだけで50以上スコアが改善しました！

このプラグインは同じ開発者のため相性も良く、簡単にスコアを改善させることができます。

難しい操作も不要なため、何をしてもPageSpeed Insightsのスコアが改善しない方にはおススメの方法です。

まとめ：レンダリングを妨げるリソースの除外にはプラグイン【AutoptimizeとAsync JavaScript】

以上、Async JavaScriptとAutoptimizeの両プラグインを使用して、レンダリングを妨げるリソースを除外する方法を紹介しました。

ページの表示速度は、直帰率に大きく影響します。

表示速度が1秒から3秒になると直帰率が32%増え、3秒以上かかるモバイルユーザーは53%が離脱するというデータも出ています。

どれだけいいコンテンツでも、読まれる前に閉じられてしまっては評価されず、SEOにも影響してしまいます。

ページの表示速度を上げて、ユーザーに快適な環境を整えましょう。