「クリティカルなリクエストの深さの最小化」とは？PageSpeed Insightsの改善方法を解説

PageSpeed Insightsの診断結果に「クリティカルなリクエストの深さの最小化」と表示されて、意味がよくわからない……という方も多いと思います。この記事では、この項目の意味と具体的な改善方法をわかりやすく解説します。

「クリティカルなリクエストの深さの最小化」とは？

「クリティカルなリクエストの深さの最小化」とは、Webページの表示に欠かせないリソース（CSS・JS・画像など）の読み込み順序を最適化して、ページ表示速度を上げることを指します。

PageSpeed InsightsでURLを診断すると、ページ読み込み時のリソース依存関係がツリー（木）構造で表示されることがあります。これを「クリティカルリクエストチェーン」と呼びます。

このチェーンが深くなる（階層が多くなる）と、ブラウザが次のリソースを取得するまでに何度も通信の往復が発生し、ページ表示が遅くなります。この「深さ」を減らすことが、この項目の目的です。

ブラウザがページを表示するには、まずHTMLを読み込み、そこからCSS・JS・画像などを順番に取得していきます。あるリソースを取得してはじめて次のリソースのURLがわかる、という依存関係が連鎖すると「チェーン（鎖）」が長くなります。

たとえば「HTMLを読み込む→CSSを読み込む→CSSの中で参照されているフォントを読み込む」という3段階の連鎖があると、チェーンの深さは3になります。この深さが大きいほど、初期表示まで時間がかかります。

使っていないCSSやJavaScriptを削除し、複数のファイルをひとつにまとめる（結合）ことで、チェーンの本数と深さを減らせます。WordPressであれば、不要なプラグインを停止するだけで改善することもあります。

JavaScriptに defer 属性や async 属性を付けると、HTMLの解析をブロックせずに読み込めます。初期表示に必要のないスクリプトは、ページ読み込み完了後に実行させる設定が有効です。

最初から必要とわかっているリソース（ファーストビューのフォントや画像など）には、<link rel="preload"> タグを使って事前に取得を開始させることができます。ブラウザが「必要になってから取得を開始する」のを待たずに済むため、表示が速くなります。

画像サイズが大きいとリソースのダウンロードに時間がかかり、チェーン全体の遅延につながります。WebP形式への変換・適切なサイズへのリサイズ・遅延読み込み（loading="lazy"）の設定が効果的です。

使っていないCSSルールが多いと、ブラウザがCSSの解析を終えるまでページの描画がブロックされます。不要なCSSを削除し、ファイルを圧縮（ミニファイ）することで改善できます。WordPressプラグインでは「Autoptimize」「LiteSpeed Cache」などに対応機能があります。

上記の改善はコードを直接触らなくても、キャッシュ・最適化系プラグインで対応できることが多いです。代表的なプラグインとしては以下があります。

ただし、最適化系プラグインはサイトの表示崩れを引き起こすこともあるため、設定変更後は必ずサイトの見た目・動作を確認してください。

また、サーバー自体の処理速度もPageSpeed Insightsのスコアに大きく影響します。表示速度にこだわるなら、高速なサーバーへの乗り換えも有効な手段です。

「クリティカルなリクエストの深さの最小化」は、ページ表示に必要なリソースの読み込み連鎖を短くして表示速度を上げることが目的です。改善のポイントをまとめると以下のとおりです。

PageSpeed Insightsの他の改善項目も合わせて対策することで、スコアが大きく改善するケースも多いです。ひとつひとつ着実に対応していきましょう。