レンダリングを妨げるリソースの除外を解決・改善する方法

当記事では、PageSpeed Insightsで「レンダリングを妨げるリソースの除外」という警告が出ている場合の解決方法をご紹介しています。

僕自身、ブログを複数運営しており、全てのブログに「レンダリングを妨げるリソースの除外」という警告が出ていましたが、今回ご紹介する方法でかなり解決できました。

方法は簡単です。

以下２つのプラグインを導入するだけです。

上記2つのプラグインを導入することで

• Javascript の読み込みを遅くする
• Javascript と CSS を縮小する

ことができ、レンダリングを妨げるリソースの除外が可能となります。

上記項目を見ても「Javascriptとかcssなんて意味不明すぎる…、改善できる気がしないよ…」という場合は、プラグインを導入して解決しましょう。

プラグインを導入すれば「レンダリングを妨げるリソースの除外」という警告の原因になっているJavascript と CSS の量を簡単に減らせます。

各プラグインの設定方法を解説します。

「Autoptimize」の設定方法

WordPress管理画面左メニューの「プラグイン」にカーソルを合わせて「新規追加」をクリックします。

「Autoptimize」を入力し、プラグインをインストール後に有効化をクリックします。

有効化後に「設定」をクリックします。

1：JS、CSS & HTML

まずは「JS、CSS & HTML」タブを選択します。

チェックを入れる項目は以下です。

JavaScript オプション

チェックする項目は2つです。

• JavaScript コードの最適化
• JS ファイルを連結する

にチェックを入れます。

CSS オプション

チェックする項目は3つです。

• CSS コードを最適化
• CSS ファイルを連結する
• インラインの CSS も連結

にチェックを入れます。

HTML オプション

チェックする項目は1つです。

• HTML コードを最適化

にチェックを入れます。

CDN オプション

何も入力しなくてOKです。

その他オプション

チェックする項目は3つです。

• 連結されたスクリプト / CSS を静的ファイルとして保存
• 除外された CSS ファイルと JS ファイルを最小化
• ログイン状態の編集者、管理者にも最適化を行う

にチェックを入れます。

最後に「変更の保存」をクリックします。

2：画像

次に「JS、CSS & HTML」タブを選択します。

チェックを入れる項目は1つです。

• 画像の遅延読み込み (Lazy-load) を利用

にチェックを入れて「変更の保存」をクリックします。

「Async JavaScript」の設定方法

WordPress管理画面左メニューの「プラグイン」にカーソルを合わせて「新規追加」をクリックします。

「Async JavaScript」を入力し、プラグインをインストール後に有効化をクリックします。

有効化後に「設定」をクリックします。

Async JavaScriptの設定は「Settings」タブの項目のみ設定します。

Enable Async JavaScript

チェック項目は1つです。

• Enable Async JavaScript?

にチェックを入れます。

Async JavaScript Method

「Async」を選択します。

jQuery

「Async」を選択します。

jQuery移行の項目はスルーして「Async JavaScript For Plugins」までスクロールします。

Async JavaScript For Plugins

「Plugin:Autoptimize」欄の「Async」を選択して「Save Setting」をクリックします。

これで作業は完了です。

再度「PageSpeed Insights」で調べてみると、「レンダリングを妨げるリソースの除外」項目の警告が減少しているはずです。

まとめ

サイトによって効果がかなり違うため、改善できていない項目を細かく見ながら一個ずつ改善していきましょう。

他にも表示速度アップの解決・改善方法を記事にまとめているので、解決できていないものがあれば試してみてください。