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

Googleの「PageSpeed Insights」でサイトを診断したとき、「レンダリングを妨げるリソースの除外」という改善項目が表示されることがあります。これは、CSSやJavaScript、外部フォントなどがページの描画開始を遅らせている、というサインです。本記事では、この項目が示す意味と、初心者でも取り組みやすい改善の考え方を、原因となるリソースごとに整理して解説します。

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

「レンダリング」とは、ブラウザがHTML・CSS・JavaScriptなどを解釈して、実際に画面に文字や画像を描画していく一連の処理のことです。このとき、ページの先頭付近で読み込まれるファイルの中に、その描画処理を一時的にストップさせてしまうものがあります。これが「レンダリングを妨げるリソース（render-blocking resources）」と呼ばれるものです。

ブラウザは基本的に、CSSファイルやJavaScriptファイルを読み込むと、その処理が完了するまで以降のコンテンツの表示を保留します。そのため、こうしたファイルの数が多かったり、サイズが大きかったりすると、ページ本体が表示されるまでの「待ち時間」が長くなってしまうのです。

PageSpeed Insightsでは、この項目とあわせて「推定削減時間」が表示されます。この数値が大きいほど、改善に取り組んだときの効果も大きくなる可能性が高いと考えてよいでしょう。

表示速度の改善がなぜ重要なのか

ページの表示速度は、ユーザーの離脱率に直結する要素です。表示が始まるまでに時間がかかるだけで、最後まで読まれることなく「戻る」ボタンを押されてしまうケースは珍しくありません。さらにGoogleは、モバイルでの使いやすさやページの表示速度を、検索順位を決める評価要素の一つとして取り入れています。

つまり、レンダリングを妨げるリソースを減らす取り組みは、訪問者の離脱を防ぐユーザー体験の改善と、検索からの流入を増やすSEO対策の両方に効果が期待できる、優先度の高い改善といえます。

レンダリングを妨げる主な原因

「レンダリングを妨げるリソース」として指摘されるものは、主に次の3つに分けられます。

• ページ上部で読み込まれるJavaScriptファイル
• ページ全体に適用されるCSSファイル
• Google Fontsなどの外部Webフォント

すでに使っているCSSやJavaScript、フォントをまるごと削除してしまうのは現実的ではありません。デザインが崩れたり、メニューの開閉などの動きが止まってしまったりするおそれがあるからです。目指すべきは「削除」ではなく「読み込み方の最適化」です。具体的には、次のような方向で対策を考えていきます。

• JavaScriptは「async」「defer」で読み込みのタイミングをずらす
• CSSは最小化したうえで、最初の表示に不要な部分は読み込みを後回しにする
• 外部フォントの読み込みも非同期化・最適化する
• そもそも使っていないCSS・JavaScript・フォントを減らす

JavaScriptの最適化（async・defer）

JavaScriptによるレンダリングのブロックを防ぐ基本的な方法は、scriptタグに「async」または「defer」属性を付けることです。どちらもHTMLの読み込み・描画を止めずにJavaScriptファイルをダウンロードできますが、スクリプトを実行するタイミングに違いがあります。

asyncとdeferの違い

async属性を付けたスクリプトは、ファイルのダウンロード中もページの描画が止まりません。ただし、ダウンロードが完了した時点で即座に実行されるため、複数のスクリプトを読み込んでいる場合、実行される順番が前後することがあります。

defer属性を付けたスクリプトも、ダウンロード中に描画をブロックしない点はasyncと同じです。大きな違いは、スクリプトの実行がHTMLの解析が完了したあとに、記述された順番どおりに行われる点です。

使い分けの目安としては、複数のスクリプト間で実行順序が重要な場合は「defer」、ほかのスクリプトと依存関係がなく単独で動作させても問題ない場合は「async」を選ぶとよいでしょう。属性を何も付けない通常のscriptタグは、レンダリングをブロックする原因になりやすいため注意が必要です。

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

なお、現在のHTMLではscriptタグに「type=”text/javascript”」と記述する必要はありません。こうした不要な記述を取り除くことも、わずかながらファイルの軽量化につながります。JavaScript自体の処理に時間がかかっている場合は、別記事の「JavaScriptの実行にかかる時間の低減」とは？改善方法を解説もあわせてご覧ください。

CSS・Webフォントの最適化

CSSの読み込み順を手作業で調整するのは、専門知識がないとデザイン崩れを引き起こしやすく、難易度の高い作業です。設定によっては元の状態に戻すのも大変なため、WordPressであれば高速化系のプラグインを使うのが安全で手軽な方法です。

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

• CSSコードの最小化（余白や改行を削ってファイルを軽量化）
• 表示開始に必要な最小限のCSSをHTML内に直接埋め込む
• 最初の表示に不要なCSSの読み込みを後回しにする

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

意外と見落とされがちなのが、Google Fontsなどの外部Webフォントです。サイトのデザインに合わせて装飾フォントを読み込んでいる場合、そのフォントファイルの読み込みも、CSSやJavaScriptと同様にレンダリングを妨げる原因になることがあります。フォントの種類数を絞り込む、必要な文字種だけに限定する、読み込みを非同期化するといった対策が有効です。

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

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

「考え方は理解できたけれど、実際の管理画面でどう設定すればいいのかイメージできない」という方には、CSSとJavaScriptの遅延読み込みによってこの項目を実際に解消した手順をまとめた記事がおすすめです。スクリーンショットを交えながら一連の流れを紹介しているので、初めての方でも操作をなぞりやすい内容になっています。

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

対策しても表示が遅いと感じたら

CSSやJavaScript、フォントの読み込みを最適化しても、PageSpeed Insightsのスコアや体感速度が思ったほど改善しない場合、原因がサーバー側のレスポンス速度にあることもあります。サーバーがリクエストに応答するまでの時間が長いと、いくらフロントエンドのコードを軽くしても、ページ表示の起点となる最初の応答そのものが遅くなってしまうためです。

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

まとめ

「レンダリングを妨げるリソースの除外」は、CSS・JavaScript・外部フォントなどがページの描画開始を遅らせている状態を示す改善項目です。改善のポイントを整理すると、次のようになります。

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

一つひとつの改善は小さく見えても、積み重ねることでページの表示速度は確実に良くなっていきます。PageSpeed Insightsのスコアを確認しながら、できるところから少しずつ取り組んでみてください。