1. はじめに
こんにちは。
「ウラセツログ」へようこそ。
このブログでは、WordPressの見えない構造――設計・運用・SEOの“なぜ？”に静かに光を当て、
その背景や仕組みを丁寧に言語化することをコンセプトとしています。
今回のテーマは、PageSpeed InsightsやLighthouseなどの速度診断ツールでよく目にする
「クリティカルリクエストチェーン（Critical Request Chain）」という警告について。
この警告が意味するものは何か？
そして、WordPressサイトの表示速度を根本から改善するには、どこに着目すべきなのか？
読み込みの“連鎖”が生むボトルネックの正体を紐解きながら、
具体的な改善策と実装方法を、設計視点から解説していきます。
その正体と根本的な改善策を深掘りします。
2. クリティカルリクエストチェーンとは？
PageSpeed InsightsやLighthouseなどの速度診断ツールで表示される
「クリティカルリクエストチェーン（Critical Request Chain）」という警告。
これは、ページの初期表示に必要なリソース（CSS・JavaScript・フォントなど）が、連鎖的に依存し合っている状態を指摘するものです。
たとえば、CSSファイルの読み込みが終わらないとJavaScriptが実行できず、
そのJavaScriptがさらに別のファイルに依存している――というように、
リソース同士が“順番待ち”をしている構造が、表示の遅延を引き起こします。
このような依存関係の連鎖は、読み込みのボトルネックとなり、
特に LCP（Largest Contentful Paint） に大きな影響を与えます。
LCPとは、ユーザーが「ページの主要コンテンツを視認できるまでの時間」を示す指標であり、
ここが遅れると、ユーザビリティの低下や検索エンジンからの評価にも直結します。
3. なぜ「読み込みの連鎖（チェーン）」が問題なのか？
Webページを表示する際、ブラウザはHTMLを上から順に解析しながら、
CSSファイル、JavaScriptファイル、フォントや画像などのリソースを次々にリクエストしていきます。
このとき、各リソースに依存関係があると、読み込みの順番が固定されてしまい、処理が“待ち”の状態になることがあります。
たとえば、以下のような読み込みの連鎖があるとします：
HTML → style.css → jQuery → script.js → front-page.js → ...このように依存関係が深くなるほど、
- 次の処理を待つ時間が長くなり
- ページの表示に必要なリソースがすべて揃うまでに時間がかかる
という問題が発生します。
3-1. 依存関係の具体例
- CSSの依存
style.cssの中でさらに別のCSSファイルを@importしている場合、
後者の読み込みは前者が完了するまで始まりません。 - JavaScriptの依存
script.jsがjQueryに依存している場合、jQueryが読み込まれるまでscript.jsは実行できません。 - フォントの依存
Google Fontsなど外部から読み込むフォントは、
サーバー応答の遅延によってレンダリングがブロックされることがあります。
このような“読み込みの連鎖”が表示速度のボトルネックとなり、LCPの遅延にもつながるため、
構造的に断ち切ることが重要です。
4. 実際の読み込み連鎖例を見てみる
ここでは、あるWordPressサイトの読み込みチェーンの一例をもとに、
どのような依存関係が表示速度に影響しているのかを具体的に見ていきます。
4-1. 読み込みチェーンの例（実測値）
| リソース | 読み込み時間 | サイズ |
|---|---|---|
| HTML本体 | 124 ms | 11.74 KiB |
| CSSファイル群（9個以上） | 150〜200 ms | 小さめの複数ファイル |
| jQuery系JavaScript（jquery.min.jsなど） | 160〜202 ms | 31.67 KiB以上 |
| 自作JavaScript（script.jsなど） | 194〜202 ms | 小さめ |
| Webフォント（Google Fontsなど） | 129〜345 ms | 48〜114 KiB |
4-2. 読み込み連鎖から見える課題
① CSSファイルが細かく分割されている
- リクエスト数が多く、ブラウザは1つずつ順番に読み込むため時間がかかる。
- 特に
@importを使ったCSSは、読み込みの遅延を招きやすい。
② jQuery系JavaScriptの依存関係が深い
jquery.min.jsが読み込まれるまで、script.jsなどの自作スクリプトが実行できない。- 表示に必要な処理が後ろ倒しになる。
③ Webフォントの読み込みが遅い
- Google Fontsなど外部CDNからの読み込みは、ネットワーク遅延の影響を受けやすい。
- フォントが表示されるまで、テキストのレンダリングがブロックされることもある。
このように、リソースの数・順番・依存関係が複雑になるほど、表示速度に悪影響を与えることがわかります。
次のセクションでは、これらの連鎖を断ち切るための具体的な改善策を設計視点から解説していきます。
5. クリティカルリクエストチェーンを断ち切る具体的な対策
読み込みの連鎖（チェーン）を断ち切るには、依存関係を減らし、リソースの読み込み順を最適化することが重要です。
ここでは、WordPressで実践できる具体的な改善策を4つ紹介します。
5-1. JavaScriptは defer またはフッターで読み込む
JavaScriptはHTMLの解析をブロックしやすく、特にjQueryなどのライブラリに依存したスクリプトは、
前のスクリプトの読み込みを待つため、表示が遅れがちです。
✔ 対策：wp_enqueue_script() の第5引数を true に
// functions.php にて、スクリプトをフッターで読み込む
wp_enqueue_script(
'custom-script',
get_template_directory_uri() . '/js/script.js',
array('jquery'),
null,
true // ← これでフッター読み込みに
);
これにより、スクリプトはHTMLの解析後に読み込まれ、描画のブロッキングを回避できます。
5-2. CSSはまとめる or 条件付きで読み込む
CSSファイルが多すぎると、リクエスト数が増えて読み込みが遅延します。
✔ 対策：
ページごとにしか使わないCSSは、条件付きで読み込む
複数の小さなCSSを1つにまとめて、リクエスト数を削減する
// FAQページだけで使うCSSを限定読み込み
if (is_page('faq')) {
wp_enqueue_style(
'faq-css',
get_template_directory_uri() . '/custom-wordpress-faq/wordpress-faq.css'
);
}
5-3. Webフォントの読み込みを最適化する
Webフォントは視覚的に重要ですが、読み込みが遅いとLCPに悪影響を与えます。
✔対策A：preload を使って先読み
<link rel="preload" href="https://fonts.gstatic.com/s/inter/v19/xxx.woff2" as="font" type="font/woff2" crossorigin>
✔ 対策B：自前ホスティング
CDN経由の遅延が気になる場合は、フォントファイルを自サーバーに置いて直接配信する方法もあります。
※キャッシュ戦略やライセンスには注意が必要です。
5-4. 外部リソースには preconnect を使う
Google FontsやCDNなど、外部リソースへの初回接続の遅延も見逃せません。
✔ 対策：preconnect で接続準備を先に行う減らせます。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
これにより、DNSルックアップやTLSハンドシェイクの時間を短縮できます。
6. ブラウザが実際にどう動いているかイメージしよう
ブラウザがWebページを表示する際、リソースの読み込みはパイプライン処理のように順番に進むように見えます。
しかし実際には、依存関係による「待ち時間」が発生するため、読み込みの流れがスムーズに進まないことがあります。
たとえば、以下のような読み込み順があるとします：
HTML → CSS → JavaScript → Webフォントこの順番で読み込む必要がある場合、
どれか1つのリソースの読み込みが遅れるだけで、後続の処理がすべて後ろ倒しになるという構造的な問題が発生します。
6-1. 依存関係による「待ち」のイメージ
- HTMLの解析中にCSSが読み込まれる
- CSSの読み込みが完了しないと、JavaScriptの実行が始まらない
- JavaScriptが完了しないと、Webフォントの適用が遅れる
このように、1つの遅延が連鎖的に他のリソースに影響を与えるため、
クリティカルリクエストチェーンの解消は、表示速度改善の鍵となります。
7. WordPressで具体的に何をどうすればいいのか？
ここまでで、クリティカルリクエストチェーンの仕組みと、表示速度への影響を理解してきました。
では、WordPressサイトで実際にどのような改善を行えばよいのか？
その具体的なポイントを、設計視点から整理していきます。
✔ 改善の起点は functions.php の見直し
WordPressでは、CSSやJavaScriptの読み込みを functions.php で制御します。
このファイルの設計次第で、読み込み順・依存関係・リクエスト数を最適化できるのです。
7-1. 実践すべき改善ポイント
① JavaScriptはフッターで読み込む（第5引数を true に）
wp_enqueue_script(
'custom-script',
get_template_directory_uri() . '/js/script.js',
array('jquery'),
null,
true // ← フッター読み込み
);
② 不要なJS・CSSは削除、または条件付きで読み込む
if (is_page('faq')) {
wp_enqueue_style(
'faq-css',
get_template_directory_uri() . '/custom-wordpress-faq/wordpress-faq.css'
);
}
③ Webフォントの preload・preconnect を wp_head に追加
function add_font_optimizations() {
echo 'https://fonts.gstatic.com';
echo '<link://fonts.gstatic.com/s/inter/v19/xxx.woff2';
}
add_action('wp_head', 'add_font_optimizations');
8. まとめ｜改善ポイントの整理
ここまで解説してきた内容を、改善策とその目的に沿って整理します。
| 順位 | 対策内容 | 目的 |
|---|---|---|
| 1 | JavaScriptを defer またはフッター読み込みに変更 | 連鎖を断ち、HTMLの解析・描画をブロックしないようにする |
| 2 | CSSをまとめる or 条件付き読み込み | HTTPリクエスト数を削減し、必要なCSSだけを早く読み込むことで描画遅延を減らす |
| 3 | Webフォントを preload または自前ホスティング | フォント読み込みの遅延を減らし、文字の表示タイミングを改善する |
| 4 | preconnect を追加 | 外部リソースへの接続準備を先に行い、初回接続遅延を軽減する |
9. おわりに｜構造を理解すれば、速度は変えられる
クリティカルリクエストチェーンは、見た目には現れない「読み込みの依存関係」という構造的な問題です。
しかし、この“見えない構造”を理解し、設計視点で改善することで、サイトの表示速度は大きく変わります。
WordPressの裏側に潜む「連鎖」を断ち切り、
ユーザーに「速い」と感じてもらえるサイトを、一緒に設計していきましょう。
9-1. ご相談もお気軽に
functions.php のコード改善や、読み込み設計の見直しなど、
具体的なコード相談も大歓迎です。
いつでもお気軽にお声がけください。
