「レンダリングを妨げるリソースの除外」とは？CSSとJSの改善方法を解説【PageSpeed Insights】

PageSpeed Insightsでサイトを診断すると、改善項目に「レンダリングを妨げるリソースの除外」と表示されることがあります。これはCSSやJavaScriptがページの表示をブロックしている、というサインです。この記事では、その意味と、初心者でもできる具体的な改善方法を、CSS・JavaScriptそれぞれに分けてわかりやすく解説します。

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

「レンダリング」とは、ブラウザがHTMLやCSSを読み込んでページを画面に描画する処理のことです。ところが、ページの先頭で読み込まれるCSSやJavaScriptの中には、その描画を一時的に止めてしまうものがあります。これが「レンダリングを妨げるリソース（render-blocking resources）」です。

ブラウザは、CSSファイルやJavaScriptファイルに出会うと、原則としてその読み込みと処理が終わるまで先のコンテンツを表示しません。そのため、これらのファイルが多かったり大きかったりすると、本文が表示されるまでの待ち時間が長くなってしまうのです。

PageSpeed Insightsでは、この項目とあわせて「除外できれば短縮できる時間（短縮可能時間）」も表示されます。ここの数値が大きいほど、改善したときの効果も大きいと考えてよいでしょう。

なぜ表示速度の改善が大切なのか

ページの表示速度は、ユーザーの離脱率に直結します。表示が遅いだけで「戻る」ボタンを押されてしまうことは珍しくありません。また、Googleはモバイルでの使いやすさ（モバイルフレンドリー）や表示速度を検索順位の評価要素としています。

つまり、レンダリングを妨げるリソースを減らすことは、ユーザー体験の向上とSEO対策の両方につながる、取り組む価値の高い改善といえます。

改善の基本的な考え方

「レンダリングを妨げるリソースを除外する」といっても、すでに使われているCSSやJavaScriptをまるごと削除するのは現実的ではありません。デザインが崩れたり、動きのある機能が止まってしまったりするからです。

目指すのは「削除」ではなく「読み込み方の最適化」です。具体的には、次の3つの方向で考えます。

• JavaScriptは「async」「defer」で読み込みのタイミングをずらす
• CSSは最小化し、最初の表示に不要な分は後回しにする
• 使っていないCSS・JavaScriptはそもそも減らす

それぞれ順番に見ていきましょう。

JavaScriptの最適化（async・defer）

JavaScriptによる表示のブロックを防ぐには、scriptタグに「async」または「defer」を付けて読み込ませる方法が基本です。どちらもHTMLの読み込みを止めずにJavaScriptをダウンロードできますが、実行のタイミングが異なります。

asyncとdeferの違い

asyncを付けると、JavaScriptの読み込み中もページの描画は止まりません。ただし、読み込みが終わった時点ですぐにスクリプトが実行されるため、複数のファイルがある場合は実行順が前後することがあります。

deferを付けた場合も、読み込み中に描画を妨げない点は同じです。違いは、スクリプトの実行がHTMLの読み込み完了後に、記述された順番どおりに行われることです。

判断の目安としては、複数のJavaScriptを読み込んでいて実行順が大事な場合は「defer」、単独で動かしても問題ない場合は「async」と覚えておくとよいでしょう。

属性	読み込み中の描画	実行タイミング	向いているケース
async	止めない	読み込み完了後すぐ（順不同）	単独で動くスクリプト
defer	止めない	HTML解析後・記述順を維持	複数・順番が重要なスクリプト
なし	止める	その場で即実行	（ブロックの原因になりやすい）

なお、HTML5ではscriptタグの「type=”text/javascript”」は省略できます。不要な記述を削ることもわずかながら軽量化につながるので、あわせて見直しておくとよいでしょう。JavaScriptそのものの処理が重い場合は、別記事の「JavaScriptの実行にかかる時間の低減」とは？改善方法を解説もあわせて参考にしてください。

CSSの最適化

CSSの読み込み順を手作業で最適化するのは、知識がないとデザイン崩れの原因になりやすく、難易度の高い作業です。元に戻せなくなるリスクもあるため、WordPressであればプラグインを使うのが安全で手軽です。

高速化系のプラグインには、CSSに対して次のような最適化機能が用意されていることが多くあります。

• CSSコードの最小化（余白や改行を削ってファイルを軽くする）
• 小さなCSSをHTMLに埋め込んで読み込み回数を減らす
• 最初の表示に不要なCSSの読み込みを後回しにする

プラグインによって項目名や仕様は異なりますが、画面の案内にしたがってCSS関連のオプションを有効にすれば、レンダリングを妨げる状態をある程度回避できます。

ただし、CSSの読み込み方を変えるとデザインが崩れる可能性があります。設定を変えたら、必ずスマホ・PC両方で表示や動作に不具合が出ていないかを確認してください。CSSのファイルサイズそのものを軽くする方法は「CSSの最小化」とは？意味と改善方法を初心者向けに解説で、不要なCSSを減らす方法はPageSpeed Insightsの「使用していないCSS」を削除する方法でそれぞれ詳しく解説しています。

実際にプラグインで改善した手順を見たい方へ

「考え方はわかったけれど、実際にどう設定すればいいの？」という方は、CSSとJavaScriptの遅延読み込みでこの項目を実際に解決した手順をまとめた記事が参考になります。スクリーンショット付きで流れを追えるので、はじめての方でも真似しやすい内容です。

▶ 「レンダリングを妨げるリソースの除外」をCSSとJSの遅延読み込み処理で解決する方法

それでも表示が遅いと感じたら

CSSやJavaScriptを最適化しても表示速度が伸び悩む場合、原因がサーバー側の処理速度にあることもあります。サーバーの応答が遅いと、いくらコードを軽くしても最初の反応そのものが遅くなってしまうためです。

表示速度に本気で悩んでいる場合は、サーバー環境の見直しも検討してみてください。レンタルサーバーごとの速度の違いについては、レンタルサーバーの速度比較（ペガブロ）で詳しく解説されています。

まとめ

「レンダリングを妨げるリソースの除外」は、CSSやJavaScriptがページの表示をブロックしている状態を指します。改善のポイントは次のとおりです。

• JavaScriptはasync・deferで読み込みのタイミングをずらす
• CSSは最小化し、不要な分は読み込みを後回しにする
• 難しい場合は高速化プラグインを使い、変更後は必ず表示を確認する
• コードを直しても遅いときはサーバー環境も見直す

一つひとつは小さな改善でも、積み重ねることで表示速度は確実に良くなります。PageSpeed Insightsの数値とにらめっこしながら、できるところから取り組んでみてください。