「レンダリングをブロックしているリクエスト」の改善策を解説

2025年12月11日

PageSpeed Insightsで「レンダリングをブロックしているリソースの除外」という警告が表示されていませんか？

この問題は、CSSやJavaScriptファイルがページの初期表示を遅延させていることを意味します。

適切な対処法を実践すれば、大幅なスピード改善が可能です。

本記事では、具体的な解決方法を分かりやすく解説します。

レンダリングブロックとは？

レンダリングブロックとは、Webページの表示処理において、CSS・JavaScriptなどの外部リソースの読み込み完了を待つ間、ブラウザが画面の描画を停止する現象です。

ブラウザはHTMLを上から順番に解析しますが、<head>内のCSSファイルや同期的なJavaScriptに遭遇すると、これらの処理が完了するまで画面表示を中断します。

この「待機時間」がレンダリングブロックです。

このレンダリングブロックは、表示速度の指標の「LCP」や「FCP」「SI」といった指標にも影響を与えます。

レンダリングブロックが起こる仕組み

まず、ウェブページへアクセスすると、ブラウザがサーバーへリクエストを送り、HTMLファイルを取得（ダウンロード）します。

ブラウザがHTMLを取得（ダウンロード）した後は、基本的にHTMLドキュメントを上から順番に読み込んでいき解析が始まります。

この過程で<link rel="stylesheet">に遭遇すると、HTML解析を継続しながら並行してCSSファイルのダウンロードを開始します。

CSSダウンロード完了後にCSS規則を解析してCSSOMツリーを構築し、セレクタの優先度計算を行います。（この間HTMLのレンダリングは待機）

JavaScriptタグに遭遇した場合は、HTML解析を完全停止してJavaScriptのダウンロードから解析完了を待機します。

下記は読み込みタイムラインのイメージです。

このCSSOMツリーを構築やJavaScriptの実行完了待ちの状態が「レンダリングブロック」の正体です。

この外部ファイルの読み込みでレンダリングブロックが発生している間は、HTML解析は継続されてもユーザーには何も表示されません。

下記はHTMLの読み込まれ、レンダリングブロックが発生しているタイムラインのイメージ（青い部分）です。

レンダリングブロックの原因となる要素

レンダリングブロックの原因となる要素は主に下記が挙げられます。

CSS
JavaScript
フォント

CSS関連では<head>内の外部スタイルシート（<link rel="stylesheet">）、CSS内の@import文、BootstrapやFoundationなどの大容量CSSフレームワークが代表例です。

これらはCSSOM構築完了まで画面描画を完全に停止させます。

JavaScript関連では同期読み込みの<script src="">タグ、特に<head>内配置されたjQuery・React・Vueなどのライブラリファイルです。

HTML解析自体を停止させるため、CSS以上に深刻な影響を与えます。

その他の原因としてWeb Fonts（@font-face）、Google Analytics・広告タグ・SNSボタンなどの外部サービス、未使用CSS・重複CSSコードも蓄積すると大きな遅延要因となります。

これらの要素が複合的に作用して表示遅延を引き起こします。

JavaScriptの最適化について詳しくは「JavaScriptの速度改善方法」もご覧ください。

PageSpeed Insightsの「レンダリングをブロックしているリクエスト」の改善項目

PageSpeed Insightsでは「レンダリングをブロックしているリクエスト」として具体的な基準値が設定されており、とても重要な要素と言えます。

項目の内容は下記の通りです。

リクエストがページの最初のレンダリングをブロックしているため、LCP が遅れる可能性があります。これらのネットワークリクエストを遅らせるかインライン化すると、クリティカルパスから移動できます。

これは、ここまでで解説してきたレンダリングブロックの回避方法を実践していただくことで、「レンダリングをブロックしているリクエスト」の項目の改善にもなります。

「レンダリングをブロックしているリクエスト」で表示される内容の確認方法

PageSpeed Insightsの場合、下記の手順でレンダリングブロックされている箇所を探すことができます。

PageSpeed InsightsでチェックしたいURLを入力し、分析ボタンを押します。

計測結果が出た後は画面をスクロールし、パフォーマンス項目の下の「Insights」という箇所で様々な改善項目が洗い出されます。

「レンダリングをブロックしているリクエスト」という項目を開くとURLや転送サイズなどと言った情報が出てきますので、ここに表示されている箇所がレンダリングブロックの対象となっているということが判断できます。

主にここではCSSやJavaScriptのファイルでレンダリングブロックが発生している場合に表示されます。

上の画像の赤枠部分でどのファイルがレンダリングブロックされているかが確認でき、青枠の部分で転送サイズや接続までの時間が確認できます。

接続時間が長ければ長いほど、LCP画像やその他コンテンツの表示に時間がかかるということになります。

項目が出てこなければ、レンダリングブロックの問題はおきていないと判断していいでしょう。

「レンダリングをブロックしているリクエスト」の改善策

「レンダリングをブロックしているリクエスト」の具体的な改善方法を詳しく解説します。

①対象のファイルがCSSの場合の改善法

例えば下記の画像の赤枠部分の下部の「...css/swiper.min.css」となっているファイルはCSSファイルです。

最後に「.css」となっているファイルがある場合は、この方法を実践してみてください。

CSSのレンダリングブロックを回避する方法は、主に下記のやり方があります。

内部CSS化と`rel="preload"`の実施

ファーストビュー表示に必要な最小限のCSSを<style>タグ内に内部CSS化し、残りのCSSはrel="preload"で非同期読み込みします。

具体的なソース例は下記のようになります。

<head>
  <!-- 内部CSS化 -->
  <style>
    body { font-family: Arial; margin: 0; }
    .header { background: #333; height: 60px; }
  </style>
  
  <!-- 非同期CSS読み込み（head内） -->
  <link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</head>

基本的には上記のように<head>内にファーストビューですぐに表示させる必要がある部分のCSS（の箇所）を直接書き込みます。

すぐに表示させる必要がない部分（ ）のCSSファイルはrel="preload"で非同期読み込みしするという指示をしています。

また、読み込み完了時にonloadイベントでrel="stylesheet"に変更して適用します。

そうすることでレンダリングブロックを防ぎ表示速度が早くなります。

※rel="preload"について詳しくは「rel="preload"とは」の記事で解説しています。

②対象のファイルがJavaScriptの場合の改善法

JavaScriptファイルには、async属性やdefer属性を付与することでレンダリングブロックを回避できます。

具体的には、ファーストビュー表示に必要なJavaScriptは「async属性」を使って非同期読み込みを実施し、読み込み時間を短縮させます。

それ以外の優先度の低いJavaScriptは「defer属性」を使って遅延読み込みをさせます。

ソース例

<!-- 非同期読み込み -->
<script src="script.js" async></script>

<!-- 遅延読み込み -->
<script src="script.js" defer></script>

Google AnalyticsやSNSボタンなどの実行順序を問わないスクリプトには「async属性」が最適です。

DOM操作が必要なスクリプトや依存関係があるライブラリには「defer属性」を適用します。

Chrome DevToolsでの確認方法

まずはChromeでチェックしたいウェブページを開きます。

ページを右クリックし「検証」を選択すると下記のような画面が表示されます。

ここの画面の上部に「パフォーマンス」というタブがあるのでそちらをクリックします。

下記画像の赤枠部分のリロードボタンをクリックすると、計測が開始されます。

数秒程度計測に時間がかかりますが、計測が終わると画像右側のような結果が出ます。

計測結果が出たら下記の画像箇所を参考に「メイン」の箇所を開きます。

ここの黄色い処理ブロック（上の赤枠内の黄色い部分）をクリックします。

下部のボトムアップなどのタブを開き、赤枠にある合計時間の箇所で影響度を確認できます。

もしくは、ネットワークの箇所でもそれぞれのタスクの状況が確認できます。

レンダリングブロックまとめ

レンダリングブロックの問題を解決することで、ユーザー体験は劇的に改善されます。

特にCSSやJavaScriptの同期読み込み、Webフォントの最適化に着手することで、First Paintの大幅な短縮が期待できます。

表示速度の改善は、ユーザーエクスペリエンスの向上だけでなく、SEO効果やコンバージョン率の改善にも直結する重要な投資です。

レンダリングブロック対策を通じて、より高速で快適なWebサイトを構築し、ユーザーにとって価値のあるデジタル体験を提供していきましょう。

記事を書いた人

井上寛生

LandingHub 執行役員 / 事業責任者 / 技術責任者

大学院では情報工学を専攻し、修了後に株式会社TeNへ新卒入社。当時は社内唯一のエンジニアながら、開発部門をゼロから立ち上げ、採用・育成を一手に担い、全員が未経験からスタートした精鋭エンジニアチームを組成。2021 年にはWEBサイト高速化プラットフォーム「LandingHub」を立ち上げ、プロダクトオーナー兼事業責任者として企画・開発・グロースを牽引。現在は執行役員として、会社の技術戦略と事業成長の双方をリードしている。

コラム一覧に戻る