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

PageSpeed InsightsでURLを診断したとき、「クリティカルなリクエストの深さの最小化」という指摘が出てきて意味がわからない、という方は少なくありません。この項目はLighthouseの診断エンジンが導入されてから継続的に表示されるようになった指標で、ページ表示に必要なリソースの読み込み順序に問題があることを示しています。本記事では、この指摘の意味と原因から、WordPressで実践できる具体的な改善手法まで順を追って説明します。

「クリティカルなリクエストの深さの最小化」が意味すること

ブラウザがWebページを表示する際には、HTML・CSS・JavaScript・画像などのリソースを順番に取得していきます。「クリティカルなリクエストの深さの最小化」とは、このリソース取得の連鎖（依存関係の深さ）を短くして初期表示を速くすることを指します。

PageSpeed Insightsの診断結果では、リソースの依存関係がツリー（木）構造として表示されることがあります。このツリーを「クリティカルリクエストチェーン」と呼び、階層が深いほど通信の往復回数が増え、ページの表示が遅くなります。

GoogleはPageSpeed Insightsのルールとして「クリティカルパスの長さを短くすること」「クリティカルバイト数を減らすこと」「クリティカルリソース自体を削除すること」の3点を推奨しています。

クリティカルリクエストチェーンの具体例

ブラウザがページを描画するとき、HTMLを受け取って初めてCSSのURLがわかり、CSSを受け取って初めてWebフォントのURLがわかる、という連鎖が発生します。この「一つを受け取って次が始まる」という構造が連鎖するほどチェーンが深くなります。

たとえば「HTML取得→CSS取得→フォント取得」という3段階なら深さは3です。深さが増えると、最初のHTMLを受け取ってからページの描画が始まるまでの時間が長くなり、LCP（最大コンテンツの描画時間）などのCore Web Vitals指標にも悪影響を与えます。

クリティカルな深さを改善する5つの手法

①使っていないCSS・JSを削除してリソース数を減らす

ページに読み込まれているCSSやJavaScriptのうち、実際には使われていないファイルを削除・無効化することが基本です。複数のファイルを1つに結合してリクエスト数を減らすことも有効です。WordPressでは、使っていないプラグインを停止するだけでも余分なスクリプトが削減されます。

②defer属性・async属性でJavaScriptを非同期読み込みにする

JavaScriptに defer 属性や async 属性を付加すると、HTMLの解析と並行してスクリプトをダウンロードできます。初期表示に必要のないスクリプトをページ読み込み完了後に実行させることで、レンダリングのブロックを解除できます。レンダリングを妨げるリソースの除外についてはこちらの記事で詳しく解説しています。

③preloadタグで重要リソースの先読みを指示する

ファーストビューに必要なフォントや画像など、最初から必要とわかっているリソースには <link rel="preload"> タグで事前取得を指示できます。ブラウザが「必要になってから発見・取得開始する」のを待たずに済むため、リクエストチェーンの先頭で並行取得が可能になります。

④画像をWebP化・遅延読み込みにしてダウンロード負荷を下げる

大きな画像ファイルはリソースのダウンロード時間を引き伸ばし、チェーン全体の遅延を悪化させます。PNG・JPEGをWebP形式に変換して容量を削減し、スクロールしないと見えない画像には loading="lazy" 属性を付けてオフスクリーン画像の遅延読み込みを設定しましょう。オフスクリーン画像の遅延読み込みについては詳しく解説した記事もあります。

⑤不要なCSSルールを削除してファイルサイズを圧縮する

使われていないCSSセレクタが多い場合、ブラウザがCSSの解析を終えるまでページの描画がブロックされます。不要なルールを削除してファイルをミニファイ（圧縮）することで解決できます。CSSの最小化の具体的な手順は別記事で解説しています。

WordPressはプラグインで効率よく対応できる

上で紹介した改善策は、コードを直接編集しなくても最適化系プラグインで対応できることが多いです。代表的なものを以下に挙げます。

• LiteSpeed Cache：JS・CSSの結合・圧縮・遅延読み込みをまとめて設定でき、機能が豊富
• Autoptimize：HTML・CSS・JSの最適化に特化したシンプルな構成のプラグイン
• Smush / EWWW Image Optimizer：画像の一括圧縮・WebP変換・遅延読み込みに対応

ただし、最適化系プラグインの設定変更後は、サイトのレイアウト崩れや動作不具合が起きないか必ず確認してください。本番環境では慎重に設定を変更しながら検証することが重要です。

なお、サーバー自体の処理速度もPageSpeed Insightsのスコアに直結します。表示速度を根本から改善したい場合は、高速処理に強いレンタルサーバーへの乗り換えも検討する価値があります。

まとめ：リクエストの連鎖を断ち切って表示速度を上げる

「クリティカルなリクエストの深さの最小化」は、ページ初期表示に必要なリソースの読み込み連鎖を短縮し、Core Web Vitalsの改善とともに体感速度を向上させることが目的です。取り組むべきポイントをまとめます。

• 使っていないCSS・JSを削除してクリティカルリソースの数を減らす
• JSにdefer/asyncを付与してHTMLの描画ブロックを防ぐ
• 初期表示に必要なリソースはpreloadで並行取得する
• 画像はWebP変換・遅延読み込みでダウンロード負荷を軽減する
• WordPressはLiteSpeed CacheやAutoptimizeプラグインで効率よく対応できる

この項目以外のPageSpeed Insightsの指摘もあわせて対処することで、スコアが大きく改善するケースがあります。PageSpeed Insightsのスコアを改善した4つの手順もあわせて参考にしてください。