2021/09/23 (更新日: 2021/12/02)

WordPressのレンダリングを妨げるリソースの除外の簡単な改善方法｜JSとCSSを非同期で解決

ブログ

※本ページにはプロモーションが含まれている場合があります。

サイト速度を計測するツールであるPageSpeed Insightsで、

上の画像のように「レンダリングを妨げるリソースの除外」という項目が表示されて速度がなかなか改善できない方も多いはず。

対処してみたものの改善されなかったり、ややこしそうなイメージで手をつけていない方もいると思いますが、

本記事を読めば「レンダリングを妨げるリソースの除外」はしっかり改善できます。

という方も「レンダリングを妨げるリソースの除外」を簡単に解消してサイト速度を高速化できるように、本記事では以下のことを解説します。

本記事の内容

• そもそも「レンダリングを妨げるリソースの除外」とは？(意味や原因)
• 解決方法の概要
• 解決する具体的な手順(プラグインあり・なしどちらも解説)

というわけで！

本記事を読むと、「レンダリングを妨げるリソースの除外」の意味や原因の理解も深めながら、誰でも「レンダリングを妨げるリソースの除外」を解決してPageSpeed Insightsのスコアを上げることができます。

以下の経歴と実績を持つなべたろ(@seonabe)が解説するよ♪

>> 【2021年】おすすめのアフィリエイトASP15選【初心者に必須のASPを厳選】
>> 【超豪華特典】AFFINGER6(アフィンガー6)の豪華13特典付き購入方法【レビュー】

＼　月間1300万PVのプロが解説　／
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓

>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！

関連記事

【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！ ブログのSEO対策にも『抑えどころ』があります。検索順位1位を取りまくってブログを爆速で伸ばすためのSEOの基礎から『抑えどころ』まで約4万文字でプロが解説。読者にもGoogleにも評価されるSEO対策とブログ作りのノウハウがまる分かり。初心者から中級者まで学べるブログのSEO戦略の決定版。

「レンダリングを妨げるリソースの除外」の意味と原因

サイト速度を計測できるPageSpeed Insightsでよく指摘される「レンダリングを妨げるリソースの除外」。

解決方法どころか

という方も多いと思うので、まずは

• 「レンダリングを妨げるリソース」とはなんなのか
• 何が原因なのか

を簡単に解説します。

「レンダリングを妨げるリソース」とは

ページの First Paint をリソースがブロックしています。重要な JavaScript や CSS はインラインで配信し、それ以外の JavaScript やスタイルはすべて遅らせることをご検討ください。
引用元：PageSpeed Insights

「レンダリングを妨げるリソースの除外」の欄を確認すると、上記のように記載されています。

「First Paint」とは、スクロールせずに最初に画面に表示される箇所のことで、ファーストビューのことを表します。

「レンダリング」とは、ページを組み立てて描画することを表し、そのレンダリング妨げているのは「JavaScript」と「CSS」の2つであることが書かれています。

つまりざっくり言うと、、、

どうして「JavaScript」と「CSS」が邪魔なの？

ページを組み立てるためのコードの読み込みの順番に理由があるよ♪

通常の場合Webページが表示される時には、上から順番にコードが読み込まれていきます。

しかしWebページの多くは上の画像のように、ファーストビューに不要なJavaScriptやCSSのファイルが一番最初の方に読み込まれているので、その分だけファーストビューの表示が遅くなります。

つまりファーストビューを構成するHTMLと、そのために必要な最低限のJavaScriptとCSSがあれば十分なのに、

ページの最後の方やフッターでしか使わないJavaScriptやCSSまで一番最初に読み込んでいるので、ページの表示に余分な時間がかかります。

なのでこれらの無駄なコードの読み込みを、最初ではなく後回しにすることで、ページの表示を速くすることができます。

>> 【WordPress】使用していないJavaScriptの削除の簡単・本格的な改善方法【速度改善】
>> 【使用していないCSSの削減】不要なCSSを自動で抽出・削除する方法

「レンダリングを妨げるリソース」の要因は大きく2つ

先ほども少し触れましたが、「レンダリングを妨げるリソース」の要因は以下の2つです。

• ファーストビューに不要なJavaScript
• ファーストビューに不要なCSS

これらの2つの読み込みを遅らせたり、あるいはHTMLと同時に読み込ませてファーストビューの読み込みを邪魔しないようにすることが、「レンダリングを妨げるリソースの除外」を解決する意味になります。

この「ファーストビューに不要な」という部分が重要で、ファーストビューに使うCSSまで後回しにしてしまうとファーストビューのデザインが崩れる、などの問題につながります。

具体的な解決策は後から解説！ここでは、「使わないJavaScriptとCSSを後回しにすれば良いんだな」くらいの理解でOK！

【補足1】PageSpeed Insightdeで「レンダリングを妨げるリソース」を確認できる

具体的にどのファイルが邪魔しているのかは、PageSpeed Insightsの測定結果から上の画像のように確認することができます。

【補足2】画像はレンダリングを妨げるリソースに含まれる？

画像はレンダリングを妨げるリソースには含まれません。

理由は、画像は最初に全て読み込まれるわけではないので、ファーストビューを組み立てることの邪魔にはならないからです。

よって「レンダリングを妨げるリソースの除外」を解決するにはJavaScriptとCSSの2つでOKです。

レンダリングを妨げるリソースには含まれませんが、画像の最適化はサイト高速化にはとっても重要です。
>> WordPressブログの最適な画像容量(ファイルサイズ)の目安と圧縮方法【2021年】
>> 【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】
>> WordPressでWebP画像に変換・対応させる3つの方法【WebP画像】

「レンダリングを妨げるリソースの除外」の解決方法の概要

それでは、ここからは解決方法の解説をするよ♪

ざっくりと言うと

ファーストビューに必要なJavaScriptとCSS以外は、読み込みを後回し(あるいは並行して同時に)することで、ファーストビューの読み込みを邪魔しないようにします。

JavaScriptとCSSで分けてそれぞれ具体的に解説します。

JavaScriptを除外する方法

JavaScriptがレンダリングを邪魔しないようにするには、以下のいずれかの方法を使います。

1. 非同期(async)・遅延(defer)読み込みにして、HTMLと並行して読み込む
2. コードをタグの最後に移動させて、HTMLの後に読み込む

方法①非同期(async)・遅延(defer)読み込みを使う

JavaScriptがレンダリングを邪魔しないようにする1つ目の方法は、以下の読み込み方法を使うことです。

• 非同期(async)読み込み
• 遅延(defer)読み込み

非同期？遅延？

ざっくり言うとどちらも、HTMLと並行して同時に読み込む方法だよ♪

JavaScriptの通常の読み込み方法(同期読み込み)

通常の場合、JavaScriptはHTMLの途中で読み込まれ、JavaScriptが読み込まれている間はHTMLの読み込みが中断されます。

最初に必要ないJavaScriptのためにHTMLの読み込みが中断されるから、「レンダリングを妨げる」ことになるよ！

HTMLの読み込みが途中で中断されているので、その分だけページの表示に時間がかかります。

JavaScriptの非同期(async)読み込み

非同期読み込み(async)とは、HTMLの読み込みを中断させずに、HTMLと並行して同時にJavaScriptを読み込む方法です。

順序は上の画像のようなイメージで、JavaScriptを実行する時のみHTMLの読み込みが中断されます。

JavaScriptの遅延(defer)読み込み

遅延読み込み(defer)も非同期読み込み(async)と同じく、HTMLと並行して同時にJavaScriptを読み込む方法ですが、

JavaScriptの実行を最後に行う点が非同期読み込み(async)と異なります。

この非同期読み込み(async)か遅延読み込み(defer)を使うことでJavaScriptがレンダリングを邪魔しないようにします。

具体的なやり方は後ほど解説するよ♪

非同期(async)・遅延(defer)読み込みのリスク

JavaScriptを非同期(async)・遅延(defer)で読み込むリスクは、

必要なタイミングでJavaScriptが読み込まれていないことが原因で、表示が崩れたり動作に不具合が生じる可能性があることです。

ただこれはJavaScriptのコードによるので、とりあえず実際にやってみて崩れたらやめればOK！

方法②コードを<body>タグの最後に移動する

もう１つの方法は、JavaScriptを<body>タグの中の最後で読み込む方法です。

最初に読み込まれる<head>ではなく、ページを構成するHTMLよりも一番最後にJavaScriptを設置することで、そもそも読み込み自体を遅らせる方法です。

CSSを除外する方法

CSSがレンダリングを邪魔しないようにするためには、以下の2つを(両方)行います。

1. クリティカルCSSを特定してインラインにする
2. 不要なCSSを非同期読み込み(先読み：preload)にする

方法の概要をざっくり解説すると

と言う感じです。

方法①クリティカルCSSを特定してインラインにする

JavaScriptと同様CSSも非同期読み込みにするのですが、

ファーストビューに必要なCSSまで非同期にしてしまうとページのデザインが崩れてしまいます。

よってCSSは、ファーストビューに必要なCSS(クリティカルCSS)だけは残して、残りのCSSを非同期にするという方法で行います。

具体的なやり方は後ほど解説するよ♪

方法②非同期読み込み(先読み：preload)を使う

ファーストビューに必要ないCSSは、JavaScriptを除外する方法と同じように非同期で読み込みます。

CSSの非同期には「先読み(preload)」という読み込み方法を使いますが、JavaScriptの非同期と同じで

とだけわかればOKです。

通常はCSSを読み込んでいる間はHTMLの読み込みは中断されるのですが、preloadを使うことでスムーズにHTMLを読み込むことができます。

レンダリングをCSSが邪魔しなくなる！

「レンダリングを妨げるリソースの除外」の解決手順(プラグインあり)

それではここからは、具体的な手順を解説していきます。

画像で解説する通りに行うだけなので、難しくないから安心してね♪

「レンダリングを妨げるリソースの除外」をプラグインで解決するには以下の4ステップで進めます。

1. 「Autoptimize」と「Async JavaScript」をインストールする
2. 「Autoptimize」を設定する(JS・CSSの圧縮や最適化)
3. 「Async JavaScript」を設定する(JSの非同期・遅延読み込み)
4. CSSを手動で非同期にする

【Step1】「Autoptimize」と「Async JavaScript」をインストールしよう

まずは以下の2つのプラグインをインストールしましょう。

• Autoptimize：JS・CSSの圧縮・最適化ができる
• Async JavaScript：JSの非同期・遅延読み込みができる

【Step1-1】Autoptimizeをインストール・有効化する

Autoptimizeとは、JavaScriptやCSSコードを圧縮・結合などしてファイルサイズを小さくするためのプラグインです。

サイト高速化のために必須の超定番プラグイン！

さらに詳しく知りたい方は以下の記事をどうぞ。
>> 【2021年最新】Autoptimizeの設定方法と使い方：コード最適化プラグイン【WordPress】

WordPressの管理画面から「プラグイン」→「新規追加」をクリックします。

検索窓に「Autoptimize」と入力して検索します。

上の画像のプラグインがAutoptimizeです。

「今すぐインストール」をクリックします。

「有効化」をクリックすればAutoptimizeのインストールと有効化は完了です。

【Step1-2】Async JavaScriptをインストール・有効化する

Async JavaScriptはAutoptimizeと同じ企業がリリースしているプラグインで、JavaScriptを非同期・遅延読み込みをするためのプラグインです。

同じ会社がリリースしているのでAutoptimizeと連携して使えるよ♪

さらに詳しく知りたい方は以下の記事をどうぞ。
>> Async JavaScriptで読み込みを非同期化して高速化する方法【WordPressプラグイン】

WordPressの管理画面から「プラグイン」→「新規追加」をクリックします。

検索窓に「Async JavaScript」と入力して検索します。

上の画像のプラグインがAsync JavaScriptです。

「今すぐインストール」をクリックします。

「有効化」をクリックすればAsync JavaScriptのインストールと有効化は完了です。

【Step2】「Autoptimize」を設定しよう(JS・CSSの圧縮や最適化)

このステップではJavaScriptとCSSの除外ではなく、圧縮や最適化をしてファイルサイズを小さくします。

まずはWordpressの管理画面から「設定」→「Autoptimize」をクリックします。

「JS、CSS & HTML」のタブが開かれていることを確認します。

上の画像を参考に、以下の3箇所にチェックを入れましょう。

あとは、「変更を保存」をクリックして設定を保存すれば完了です。

Autoptimizeについてさらに詳しく知りたい方は以下の記事をご覧ください。
>> 【2021年最新】Autoptimizeの設定方法と使い方：コード最適化プラグイン【WordPress】

【Step3】「Async JavaScript」を設定しよう(JSの非同期・遅延読み込み)

このステップでは、JavaScriptのコードを非同期・遅延読み込みを使ってレンダリングを邪魔しないようにします。

WordPressの管理画面から「設定」→「Async JavaScript」をクリックします。

「Settings」のタブが開かれていることを確認します。

上の画像を参考に、以下の3点を設定します。

「Save Settings」をクリックして設定を保存すれば、Async JavaScriptの設定は完了です。

これでJavaScriptのための対策は全て完了！

Async JavaScriptについてさらに詳しく知りたい方は以下の記事をご覧ください。
>> Async JavaScriptで読み込みを非同期化して高速化する方法【WordPressプラグイン】

【Step4】CSSを非同期にしよう

このステップではCSSを非同期で読み込むようにします。

CSSの非同期読み込みだけは、ちょうど良いプラグインがないので手動で行う必要があります。

【補足】有料プラグイン「WP Rocket」でもできる

今回は無料で超定番のおすすめのプラグイン「Autoptimize」と「Async JavaScript」での方法を解説しましたが、

有料プラグイン「WP Rocket」を使われている方はWP Rocketでも設定することもできるので、上記の2つのプラグインは不要です。

「レンダリングを妨げるリソースの除外」の解決手順(プラグインなし)

次はプラグインを使わずに解決する方法を解説するよ♪

プラグインなしで手動で行う場合は以下の2ステップで行います。

1. JavaScriptを非同期化(async)・遅延化(defer)する
2. CSSを先読み(preload)する

それぞれ順番に解説します。

【Step1】JavaScriptを非同期化(async)・遅延化(defer)する

JavaScriptを非同期化(async)・遅延化(defer)するには、後ほど紹介するコードをfunction.phpに貼り付けるだけでOKです。

コピペするだけだから一瞬で終わるよ♪

まずはWordPressの管理画面から「外観」→「テーマエディター」をクリックします。

画面右側の「テーマファイル」の項目にある「function.php」をクリックします。

function.phpの編集画面が表示されるので、以下のコードをfunction.phpの最後に貼り付けて「ファイルを更新」ボタンをクリックすれば完了です。

if ( !(is_admin() ) ) {    
    //JSを遅延(defer)読み込みにする
    function my_func_defer_js ( $tag ) {
        if ( !preg_match( '/b(async|defer)b/', $tag ) ) {
            return str_replace( "type='text/javascript'", 'defer', $tag ); //非同期にする場合はdeferをasyncに変更
        }
        return $tag;
    }
    add_filter( 'script_loader_tag', 'my_func_defer_js' );
}

これだけでJavaScriptの遅延化が完了！

コードについて簡単に解説

JavaScriptを非同期化・遅延化するには、JavaScriptファイルを読み込む<script>タグの中にasyncやdeferを追加します。

例えば、通常・非同期・遅延の場合のサンプルはそれぞれ以下のようになります。

//通常の読み込みの場合
<script src="sample.js"></script>

//非同期(async)の場合
<script src="sample.js" async></script>

//遅延(defer)の場合
<script src="sample.js" defer></script>

先ほどfunction.phpにコピペしたコードは、<script>タグの中にdeferの文字を追加するためのコードです。

【Step2】CSSを先読み(preload)する

次はCSSを、非同期読み込みである「先読み(preload)」にします。

CSSもJavaScriptと同様にfunction.phpにコードを追加すればOKですが、その前にクリティカルCSSをインライン化する必要があります。

つまり、

ということを行います。

【Step2-1】クリティカルCSSを特定してインラインにする

まずはCSSコードの中からクリティカルCSSを特定する必要があります。

Critical Path CSS Generatorというツールを使うことで、クリティカルCSSを抽出することができます。

Critical Path CSS Generatorにアクセスしたら、

の3ステップで、クリティカルCSSを抽出できます。

クリティカルCSSが抽出されるので、すべてコピーします。

これでクリティカルCSSの抽出は完了！

次はこのクリティカルCSSを、ページの<head>タグの中に貼り付けていきます。(インライン化)

WordPressの管理画面の「外観」→「テーマエディター」を開きます。

画面右側の「header.php」をクリックします。

<head>タグの中に、

と入力します。

<style>タグの中に、先ほどコピーしたクリティカルCSSを全て貼り付けたら、「ファイルを更新」をクリックすれば完了です。

【Step2-2】残りのCSSを先読み(preload)にする

あとはJavaScriptのときと同じように、CSSを非同期化するためのコードをfunction.phpに追記するだけで完了です。

画面右側の「function.php」をクリックします。

ファイルの最後に以下のコードをコピペしましょう。

if ( !(is_admin() ) ) {   
    //CSSを非同期読み込み(先読み)にする
    function my_func_preload_css($tag){

        $match = preg_match("/sample.css/", $tag); //非同期にしないファイル名を正規表現で記述
        if (!$match) {
            $tag = preg_replace( '/stylesheet/' , 'preload', $tag );
            $tag = preg_replace( '/ />/' , ' as="style" onload="this.onload=null;this.rel='."'stylesheet'".'" />', $tag );
        }
        return $tag;
    }
    add_filter('style_loader_tag', 'my_func_preload_css');
}

コピペできたら、「ファイルを更新」ボタンをクリックして変更を保存すれば完了です。

コードについて簡単に解説

CSSを非同期にする場合、CSSを読み込むlinkタグを以下のように記述する必要があります。

//通常のCSSの読み込みの場合
<link rel="stylesheet" href="sample.css">

//非同期(preload)にする場合
<link rel="preload" href="sample.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

先ほどfunction.phpにコピペしたコードは、linkタグの中身を上記のように変更するためのコードです。

「レンダリングを妨げるリソースの除外」を解決してサイトを高速化しよう！

PageSpeed Insightsでよく提案される「レンダリングを妨げるリソースの除外」の意味や原因と解決方法を解説しました。

WordPress初心者の方やプログラミングの知識がない方は困った方が多いと思いますが、

本記事で解説しているようにその原因や解決方法はとてもシンプルです。

今回ご紹介した方法で「レンダリングを妨げるリソースの除外」を解決するだけで、モバイルの表示速度もかなり改善されてSEOでの検索順位も改善されるはずなので、早速試してみてください。

まだ設定が途中の方は、以下のリンクから解決方法の見出しに戻ることができます。

• プラグインで「レンダリングを妨げるリソースの除外」を解決する方法
• プラグインなしで「レンダリングを妨げるリソースの除外」を解決する方法

合わせて解決すべきPageSpeed Insightsの項目については以下の記事で詳しく解説しています。
>> 【WordPress】使用していないJavaScriptの削除の簡単・本格的な改善方法【速度改善】

関連記事

【WordPress】使用していないJavaScriptの削除の簡単・本格的な改善方法【速度改善】 PageSpeed Insightsで提案される「使用していないJavaScriptの削除」や「使用していないCSSを削除してください」のWordPressプラグイン「Flying Scripts by WP Speed Matters」での簡単な改善方法からプラグインなしの本格的な方法まで3つの方法を画像付きで解説。

>> 【使用していないCSSの削減】不要なCSSを自動で抽出・削除する方法

関連記事

【使用していないCSSの削減】不要なCSSを自動で抽出・削除する方法 PageSpeed Insightsの「使用していないCSSの削減」はツールを使えば簡単に改善できます。使用していないCSSのセレクタを「Unused CSS」で抽出、使用していないCSSを「UnCSS Online!」で自動で削除して「使用していないCSSの削減」を改善してWordPressを高速化する方法を解説。

サイトを高速化するための他の方法は以下の記事でそれぞれ解説しています。

関連記事

【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】 【2021年最新版】EWWW Image Optimizerのインストール・設定方法・使い方を画像付きで詳しく解説しています。EWWW Image Optimizerは画像のサイズを自動で最適化(圧縮)・リサイズしてサイトの表示速度を速くしてくれるWirdPressプラグインです。2021年ばんの最新の設定方法を解説。

関連記事

WordPressでWebP画像に変換・対応させる3つの方法【WebP画像】 WordPressで画像をWebPに自動変換する方法やWebP画像をアップロードする3つの方法を解説。プラグインで自動で変換する方法や、プラグインなしで簡単にWordPressをWebP対応させる方法も。次世代フォーマットのWebPはGoogleも推奨しているのでWordPressに導入してサイトを高速化させましょう。

関連記事

WordPressブログの最適な画像容量(ファイルサイズ)の目安と圧縮方法【2021年】 WordPressブログの画像の容量(ファイルサイズ)はどれくらいが最適なのかの目安とその目安に合わせて画像の容量(ファイルサイズ)を小さくする4つの方法と裏技を解説します。WordPressブログの画像のファイルサイズを小さくする方法は圧縮だけではありません。リサイズ・画像形式の変換もしてサイト速度を改善しましょう。

関連記事

【2021年最新】Autoptimizeの設定方法と使い方：コード最適化プラグイン【WordPress】 【2021年最新】AutoptimizeはHTML・CSS・JavaScriptのコードを最適化してサイトを高速化してくれるWordPressのプラグインです。Autoptimizeを使うとソースコードの改行やスペースを自動で削除したり、ファイルを結合して自動で最適化してくれます。WordPressに必須のプラグイン。

関連記事

【2021年最新】WordPressのキャッシュプラグインおすすめ8選【比較表付き】 【2021年最新版】WordPressサイトを高速化するためにおすすめの8つのキャッシュプラグインを紹介。WordPressを高速化するにはキャッシュプラグインが必須とも言えます。初心者向けから本格的なものまで、速さ・安全性・機能などを表にして徹底比較。ニーズごとに最もおすすめなキャッシュプラグインも紹介。

関連記事

【2021年最新】W3 Total Cacheのおすすめの設定方法と注意点

＼【無料ブログ講座】LINE限定でノウハウを配信／

公式LINE限定で読めるパスワード付きの記事でがっつり解説しています。

LINE参加者の声

400名が以上参加中！無料で読めます♪

＼ 最短で収益化 ／公式LINEで無料で学ぶ

• facebook
• Tweet
• hatebu
• Share
• Read Later