Webページの読み込み速度を解析するPageSpeed insightsで提示される改善できる項目として「レンダリングを妨げるリソースの除外」があります。
おそらくほとんどのサイトで改善できる項目の中でも比重が高くなっている項目のひとつでしょう。
当記事では、「レンダリングを妨げるリソースの除外」の項目においてパフォーマンスを改善するための対処方法についてお伝えします。
サイト表示速度の改善はSEOの内部対策の観点から見ても重要になってきますので、検索上位を狙っている方は是非チェックしてくださいね！
※そもそも何のことかよく分からないという人のために概要も解説します。手っ取り早く対処方法のみ知りたい場合には「レンダリングを妨げるリソースの除外方法」まで飛ばして読んでください。
レンダリングを妨げるリソースの除外って何？
レンダリングを妨げるリソースを除外すればいいのね…って「え？何すればいいの？」って感じではないでしょうか？
対処方法の説明に入る前に、「レンダリングを妨げるリソースの除外」とは実際どういうことをすればいいのかについて説明します。まずは言葉の意味から確認しましょう。
そもそもレンダリングとは？
レンダリングとは、画面の描画処理のことを言います。
つまり、Webサイトのデータが読み込まれて、あなたのディスプレイに表示させる処理のことです。
「render（レンダー）」には英語で「表現する。描写する」という意味があります。
リソースとは？
一方リソースとは何でしょうか？
英語では「resource」は資源や資産のことを指しますが、ここではCSSやJavascriptファイルのことを指します。
Webサイトの元となっているデータというイメージです。
レンダリングを妨げるリソースとは…
つまりレンダリングを妨げるリソースを除外と言うのは、Webサイトの描画を妨げているCSSファイルやJavaScriptファイルを除外してください！という指示をしているということになります。
ちょっとまだ分かりづらいですね。なぜこのようなことが必要になるのかを理解するためには、どのようにWebサイトが表示されているか理解する必要があります。
次項で見ていきましょう。
なぜレンダリングを妨げるリソースを除外する必要があるのか？
結論からお話しすると、レンダリングを妨げるリソースを除外することによって、サイトの表示速度（ファーストビュー）を速くすることができます。
PageSpeed Insightsで「レンダリングを妨げるリソースの除外」の項目の詳細を見てみると
ページの First Paint をリソースがブロックしています。重要な JavaScript や CSS はインラインで配信し、それ以外の JavaScript やスタイルはすべて遅らせることをご検討ください。
との記載があると思います。
First Paint（ファーストペイント）はファーストビュー、つまりサイトを表示したときに一番最初に画面に表示される部分のことです。
別名でよくAbove the fold（アボーヴ ザ フォルド）と呼ばれたりします。
この注釈が意味していることを分かりやすく言い換えるとするならば、ファーストビューに関係のないCSSやJavaScriptファイルは読み込みを遅らせましょう、ということなんです。
サイトの読み込みの仕組み
基本的にページはコードがかかれている順に上から下にデータを読み込みます。
その際、CSSやJavascriptファイルなどを読み込むコードがあれば、その指示に従います。
そしてこれらのリソースの読み込みが終わってからレンダリング、つまり描画処理をするという形になっているわけですね。
つまり、コード上HTMLのコンテンツ（<body></body>部分に当たる）よりも前にCSSやJavaScriptファイルの読み込みがあると、スクロールせずに見える部分の表示までに時間がかかるということなのです。
そのため、ファーストビューと関係のないファイルを先に読み込んでいると、ユーザーは体感的に読み込みが遅いと感じてしまいます。
この問題のポイントは人が体感的に遅いと感じることです。全体の読み込みは変わらないのですが、ユーザビリティを考えたときにはより早く表示されるということが大切になります。
だからこそ可能な限りファイルの読み込みを最適化するという考え方が必要になってくるのです。
どのリソースがレンダリングを妨げているのか
実際にどのファイルがレンダリングを妨げているのか、「レンダリングを妨げるリソースの除外」の詳細を見ると確認することができます。
これらのデータの読み込みを最適化していくことになります。
では、ここからは実際に「レンダリングを妨げるリソースの除外」を行う方法を解説します。
レンダリングを妨げるリソースの除外方法
小難しいことをつらつらと説明してきましたが、実はプラグインを使えば簡単に対応できてしまいます。
- Autoptimize
- Async JavaScript
この２つのプラグインがおすすめです。
実際の設定方法は、個別に記事を書きましたのでこちらをご覧ください▼
これらのプラグインでやっていることはファイルの圧縮などの最適化と読み込みの最適化です。
以下で簡単に補足します。
非同期化と遅延化について
ファイルの読み込みを遅らせる場合、非同期と遅延の２種類の方法があります。
非同期化（Async）
ひとつは非同期化する方法です。「Async（エイシンク）」と呼ばれます。
非同期ではファイルを読み込む際にHTMLの読み込みをストップせずに並行して読み込むので、よりスムーズにサイトを表示することが可能になります。
そして読み込みが完了したら、HTML読み込みを一時停止してプログラムを実行します。
遅延化（Defer）
もうひとつは遅延化する方法です。「Defer（デファー）」と呼ばれます。
こちらも非同期と同様に、HTMLと同時にファイルを読み込みます。
非同期と違う点は、遅延の場合にはHTMLを全部読み込んでからプログラムを実行するという点です。
CSS配信の最適化
初心者には少し難しいので、こちらは無理にやる必要はないかなと思います。労力に対しての効果はそこまで…という感じがしますので、完璧を目指す方向けです。実際私はここまでやっていません。
先ほど「なぜレンダリングを妨げるリソースを除外する必要があるのか？」という項目で、PageSpeed Insightの注記に「重要な JavaScript や CSS はインラインで配信し、それ以外の JavaScript やスタイルはすべて遅らせることをご検討ください。」と書かれていましたが、このCSSに当たる部分の対応になります。
詳細はGoogleが「CSSの配信を最適化する」という内容でリファレンスを出していますので気になる方は一読をおすすめします。
概要は以下の通り。
ファーストビューに関係のあるスタイルをHTMLのインライン要素として設定
必要なCSSはインラインで記述し（やり方が分からなければ調べてください）、それ以外は読み込みを遅らせることで対応します。
どのCSSがファーストビューに関わる主要なCSSか特定するには、Critical Path CSS Generatorなどのサイトを活用すると便利です。
残りのCSSの読み込みを遅らせる
主要なCSSをインラインで記述したら、残りのCSSは読み込みを遅らせます。
やり方はいくつかあるので、こちらも気になる方は調べてみると良いでしょう。
まとめ：レンダリングを妨げるリソースの除外はプラグインで対応可能
PageSpeed Insightsの「レンダリングを妨げるリソースの除外」という項目を改善するには、プラグインでの対応が簡単で間違いありません。
少しでもサイト表示速度がはやくなると、ユーザーにとってメリットとなり検索順位にも良い影響を与えます。
スコアが伸び悩んでいる方はぜひ試してみてくださいね。