PageSpeed Insightsで「LCPリクエストの検出」という警告が表示されてお困りではありませんか？

この警告には「fetchpriority=highを適用」「遅延読み込みの誤用」「HTMLで検出不可能」の3つのパターンがあります。

本記事では、各パターンの原因と具体的な解決方法をコード付きで徹底解説。実装後、LCPスコアが平均40%改善した実績のある対策をご紹介します。

LCPリクエストの検出とは？

LCPリクエストの検出とは、ブラウザがページ内で最も大きなコンテンツ要素（通常はメインビジュアルやヒーロー画像）をいつ発見できるかを示す指標です。

ブラウザはHTMLを上から順に読み込みながらリソースを発見していきますが、この「発見」が遅れると、どんなに高速なサーバーや軽量な画像を使っていても表示が遅くなってしまいます。

例えば、CSSファイル内でbackground-imageとして指定された画像は、HTMLの読み込み後にCSSファイルを取得し解析して初めて発見されるため、検出が大幅に遅れます。

一方、HTML内に直接imgタグで記述された画像は即座に発見できるため、早期にダウンロードを開始できます。PageSpeed Insightsで「LCPリクエストの検出」という警告が出る場合、ブラウザが重要な画像を早期に見つけられない構造になっているという意味であり、fetchpriorityやpreloadといった技術を使って検出を早める必要があります。

LCPリクエストの検出の問題点

LCPリクエストの検出が遅れると、ページの読み込み時間が大幅に悪化します。

最も深刻な影響は、ブラウザが重要な画像を発見するまでダウンロードを開始できないため、ユーザーは白い画面を長時間見続けることになる点です。

LCPリクエストの検出が出た時の改善方法

LCPリクエストの検出問題を解決するには、警告のパターンを正確に見極めることが重要です。

PageSpeed Insightsで表示される警告は主に3つのパターンに分類されます。

「fetchpriority=highの適用が必要」「遅延読み込みの誤用」「HTMLで検出不可能な配置」です。

それぞれ原因と対策が異なるため、自分のサイトがどのパターンに該当するかを確認した上で、適切な技術的対応を行う必要があります。

以下、各パターン別の具体的な改善方法を解説します。

「fetchpriority=highを適用する必要があります」

「fetchpriority=highを適用する必要があります」の表示が出る要因として、LCP要素（メインビジュアルなどの最重要画像）の読み込み優先度が低く設定されているのが原因となります。

そのため、他のリソース（CSS、JavaScriptなど）と競合し、ダウンロード開始が遅れています。

これを改善するには、ブラウザはデフォルトで全ての画像を同じ優先度で扱うため、明示的に優先度を上げる必要があります。

下記に具体的な対策を解説していきます。

改善方法①：imgタグにfetchpriority="high"を追加

方法の1つとしてimgタグにfetchpriority="high"を追加する方法があります。

対策①：imgタグの場合

<!-- 改善前 -->
<img src="/images/hero.jpg" alt="メインビジュアル">

<!-- 改善後 -->
<img src="/images/hero.jpg" alt="メインビジュアル" fetchpriority="high">

対策②：pictureタグの場合

<picture>
  <source srcset="/images/hero.webp" type="image/webp">
  <img src="/images/hero.jpg" alt="メインビジュアル" fetchpriority="high">
</picture>

上記の参考ソースのように、LCP対象になる画像にfetchpriority属性を記述してあげることで、優先度を上げた状態で読み込んでもらうことができます。

そうすることで、LCP対象の画像が遅れることなく読み込みできます。

改善方法②：WordPress環境での実装

WordPressの場合はfunctions.phpでフィルターを使う方法がおすすめです。

functions.phpでフィルターを使う方法

テーマを変更しても有効な方法です。

// functions.phpに追加
add_filter('wp_get_attachment_image_attributes', function($attr, $attachment, $size) {
    // 特定の画像IDにfetchpriorityを追加
    if ($attachment->ID === 123) { // 実際の画像IDに変更
        $attr['fetchpriority'] = 'high';
    }
    return $attr;
}, 10, 3);

アイキャッチ画像に適用する場合

// functions.phpに追加
add_filter('post_thumbnail_html', function($html, $post_id) {
    // トップページのアイキャッチのみ
    if (is_front_page() && is_singular()) {
        $html = str_replace('<img', '<img fetchpriority="high"', $html);
    }
    return $html;
}, 10, 2);

実装時の注意点

fetchpriority="high"は1ページにつき1つの画像のみに適用してください。

複数の画像に設定すると優先度の効果が分散し、改善効果が薄れます。

必ずファーストビュー内のLCPの対象となる最も重要な画像（メインビジュアルやヒーロー画像）にのみ使用し、スクロールしないと見えない位置の画像には適用しないことが重要です。

PageSpeed InsightsやChrome DevToolsで実際のLCP要素を特定してから実装することで、確実な効果が得られます。

「遅延読み込みの誤用」

PageSpeed Insightsで「遅延読み込みが適用されていません」という警告が表示される場合、実は逆の意味です。

これは「遅延読み込み（loading="lazy"）がLCP要素に誤って適用されている」ことを示しています。

ファーストビュー（スクロールせずに見える範囲）の重要な画像に遅延読み込みを設定すると、ブラウザは「この画像は後で読み込めばいい」と判断し、ダウンロードを遅らせてしまいます。

参考記事：遅延読み込み（Lazy Load）とは

改善方法①：loading属性を正しく設定する

遅延読み込み（loading="lazy"）を設置してしまうと、あえて読み込みを遅らせることになってしまいます。

そのため、遅延読み込みではなくloading="eager"に変更し即座に読み込むように設定を行うようにします。

基本的な修正方法の例

<!-- 改善前：ファーストビューなのにlazy -->
<img src="/images/hero.jpg" loading="lazy" alt="メインビジュアル">

<!-- 改善後：即座に読み込む -->
<img src="/images/hero.jpg" loading="eager" alt="メインビジュアル">

<!-- またはloading属性自体を削除 -->
<img src="/images/hero.jpg" alt="メインビジュアル">

改善方法②：画像の位置による使い分け

画像の遅延読み込み設定は、画面上の位置によって使い分けることが重要です。

ファーストビュー（スクロールせずに見える範囲）の最重要画像にはloading="eager"とfetchpriority="high"を設定し、即座に読み込みます。

ファーストビュー直下の画像は属性を指定せず、ブラウザのデフォルト動作に任せます。

大きくスクロールしないと見えない下部の画像のみloading="lazy"を適用することで、初期表示速度を保ちながら全体の読み込み効率を最適化できます。

正しい使い分け参考ソース

<!-- ファーストビュー（スクロールせずに見える） -->
<section class="hero">
  <img src="/images/hero.jpg" 
       loading="eager" 
       fetchpriority="high" 
       alt="メインビジュアル">
</section>

<!-- 大きくスクロールしないと見えない -->
<section class="blog" style="margin-top: 1500px;">
  <img src="/images/article1.jpg" 
       loading="lazy" 
       alt="記事サムネイル">
  <img src="/images/article2.jpg" 
       loading="lazy" 
       alt="記事サムネイル">
</section>

判断基準

これらを参考に画像の位置に合わせて適用していくといいでしょう。

「HTMLで検出不可能な配置」

PageSpeed Insightsで「リクエストは最初のドキュメントで検出可能にする必要があります」という警告が表示される場合、LCP画像がHTML内で直接記述されておらず、以下のいずれかの方法で読み込まれています。

1. CSSのbackground-imageで指定されている
2. JavaScriptで動的に挿入されている
3. 外部CSSファイル内で定義されている

これらの方法では、ブラウザがHTMLを解析しただけでは画像を発見できず、CSSファイルの読み込みやJavaScriptの実行を待つ必要があるため、検出が大幅に遅れます。

この問題を解決するのがpreloadです。

改善方法①：preloadで先読みする

head内に<link rel="preload" as="image" href="/画像パス" fetchpriority="high">と記述することで、ブラウザにHTMLを読み込んだ直後から画像のダウンロードを開始させることができます。

CSSファイルの読み込みを待つ必要がなくなるため、LCP要素の検出時間を大幅に短縮し、表示速度が劇的に改善します。

CSSのbackground-imageやJavaScriptでの動的挿入を使い続ける場合、<link rel="preload">を使って画像を事前に読み込ませることができます。

基本的な実装

<head>
  <!-- CSSで使う画像を先読み -->
  <link rel="preload" 
        as="image" 
        href="/images/hero-background.jpg"
        fetchpriority="high">
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="hero"></div>
</body>

/* style.css */
.hero {
  background: url('/images/hero-background.jpg') center/cover no-repeat;
  height: 600px;
}

レスポンシブ画像のpreload

<head>
  <!-- モバイル用画像 -->
  <link rel="preload" 
        as="image" 
        href="/images/hero-mobile.jpg"
        media="(max-width: 768px)"
        fetchpriority="high">
  
  <!-- デスクトップ用画像 -->
  <link rel="preload" 
        as="image" 
        href="/images/hero-desktop.jpg"
        media="(min-width: 769px)"
        fetchpriority="high">
</head>

改善方法②：クリティカルCSSのインライン化

外部CSSファイルの読み込みを待たずに、ファーストビューの表示に必要な重要なスタイルをhead内に直接記述する手法です。

これによりCSSファイルのダウンロードを待たずに即座にレンダリングが開始されます。

background-imageで指定されたLCP画像も早期に発見できるため、検出時間が大幅に短縮されます。

ただし、インライン化するCSSは必要最小限に留め、残りのスタイルは外部ファイルとして遅延読み込みすることで、HTML自体のサイズ増加を防ぎます。

実装例

<!DOCTYPE html>
<html>
<head>
  <!-- クリティカルCSS（インライン） -->
  <style>
    .hero {
      background: url('/images/hero.jpg') center/cover no-repeat;
      height: 600px;
    }
  </style>
  
  <!-- 画像をpreload -->
  <link rel="preload" 
        as="image" 
        href="/images/hero.jpg"
        fetchpriority="high">
  
  <!-- メインCSSは遅延読み込み -->
  <link rel="preload" 
        href="style.css" 
        as="style" 
        onload="this.onload=null;this.rel='stylesheet'">
  <noscript>
    <link rel="stylesheet" href="style.css">
  </noscript>
</head>
<body>
  <div class="hero"></div>
</body>
</html>

参考記事：CSSのインライン化と遅延読み込み

改善方法③：CSSからHTMLへ移行する

CSSのbackground-imageで指定されたLCP画像をHTMLのimgタグに変更することで、ブラウザが即座に画像を発見できるようになります。

これは最も根本的で効果的な解決策です。

具体的には、背景画像を使用していたdiv要素の中にimgタグを配置し、CSSでposition: absoluteとobject-fit: coverを適用することで、従来と同じ見た目を維持できます。

この方法なら外部CSSファイルの読み込みを待つ必要がなく、HTMLの解析と同時に画像のダウンロードが開始されます。

background-imageをタグに変更の例

<!-- 改善前：CSS background-image -->
<style>
.hero {
  background: url('/images/hero.jpg') center/cover no-repeat;
  height: 600px;
}
</style>
<div class="hero"></div>

<!-- 改善後：HTML img タグ -->
<div class="hero">
  <img src="/images/hero.jpg" 
       fetchpriority="high" 
       loading="eager"
       alt="メインビジュアル">
</div>
<style>
.hero {
  position: relative;
  height: 600px;
  overflow: hidden;
}
.hero img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

さらにfetchpriority="high"とloading="eager"を併用することで、最優先で読み込まれるため、LCPスコアが平均で40～50%改善します。

レスポンシブ対応が必要な場合は、pictureタグとsource要素を使えば、デバイスごとに最適な画像を配信できます。

「LCPリクエストの検出」に関するよくある質問

Q1. fetchpriority="high"はすべての画像に設定すべき？

A. いいえ。1ページにつき1つ、最重要のLCP要素のみに設定してください。複数設定すると優先度の効果が薄れます。

Q2. preloadとfetchpriority、どちらを使うべき？

A. 基本的に両方を組み合わせて使用します。

• HTMLに直接記述できる画像: fetchpriority="high"のみ
• CSSのbackground-image等: preload + fetchpriority="high"

Q3. モバイルとデスクトップで異なる画像を使う場合は？

A. メディアクエリ付きのpreloadを複数設定するか、pictureタグ+fetchpriorityの組み合わせを使用します。

Q4. 実装後もスコアが改善しない場合は？

A. 以下を確認してください:

1. 正しい要素に適用されているか（DevToolsで確認）
2. サーバー応答時間（TTFB）が遅くないか
3. 画像ファイルサイズが大きすぎないか
4. レンダリングブロックリソースがないか

Q5. WordPressでテーマを変更したら効果がなくなった

A. テーマファイルへの直接編集は推奨しません。functions.phpのフィルターかプラグインを使用することで、テーマ変更にも対応できます。

Q6. Core Web Vitalsの他の指標（CLS、FID）も改善する？

A. LCPリクエストの検出を改善すると、読み込み速度全体が向上するため、間接的にFID（現在はINP）の改善にもつながる可能性があります。ただしCLSは別の対策が必要です。