Largest Contentful Paint 画像をプリロードしてください。

プリロードとは何か？

プリロードは、メインのレンダリングが始まる前にリソースを早期にダウンロードするようブラウザに指示します。ファイルがより早く準備でき、ページのレンダリングをブロックしなくなります。LCPのタイミングにおいて、プリロードはResource Load Delay（ブラウザがHTMLを受信してからLCP画像のダウンロードを開始するまでの時間）を短縮します。

<link rel="preload"
as="image"
href="image.jpg"
fetchpriority="high"
imagesrcset="image_400px.jpg 400w, image_800px.jpg 800w"
imagesizes="100vw">

なぜLargest Contentful Paintの画像をプリロードすべきなのか？

viewport内に表示されている画像は優先度が高く、ページ全体の読み込みプロセスの比較的早い段階でダウンロードされます。Chromeのようなブラウザはこれらの画像を優先しようと努め、多くの場合うまく機能します。それでも、ブラウザは推測でダウンロード順序を決めるため、LCP画像よりもリモートのJavaScriptや他の表示画像を優先することがよくあります。

この挙動により、LCP画像のダウンロードは期待するほど早く開始されません。Largest Contentful Paintの画像をプリロードすることで、この問題を解決できます。

データがこれを裏付けています。2025 Web Almanacによると、モバイルページの76%がLCP要素として画像を持っています。しかし、実際にその画像をプリロードしているページはわずか2.1%です。これは大きな機会損失です。さらに、多くのLCP画像はレンダリングをJavaScriptやCSSに依存しているため、初期HTMLからは発見できません。ブラウザは見つけられないものをダウンロードできません。プリロードタグはこれを解決します。

Largest Contentful Paintの画像をプリロードすると、ページのパフォーマンスにどのような影響があるか？

LCP画像をプリロードすれば、画像が早くレンダリングできるようになります。結果として、Lighthouseとfield dataの両方でLCPスコアが向上します。

CoreDashで監視しているサイトでは、LCP画像をプリロードしたページ読み込みの98%が「good」を記録しています。プリロードなしの場合は88%です。プリロードされた画像のp75 LCPは、プリロードされていない画像より約2倍高速です。

ブラウザが最初にダウンロードする画像がLCP画像でない場合、プリロードはさらに重要になります。次のようなケースです。

• viewport内に複数の画像が表示されている
• LCP画像が背景画像である（背景画像は通常、前面の画像よりも遅くダウンロードされます）
• LCP要素がJavaScriptに依存している。例えばスライダースクリプトを使用している場合や、サイトがReactのようなJavaScriptフレームワークで構築されている場合などです。

それでも、2025 Web Almanacによるとモバイルサイトの17%がLCP画像をlazy loadingしています。LCPに合格しているモバイルオリジンはわずか62%です。この2つの事実は無関係ではありません。LCP画像をlazy loadingしているなら、まずそれを修正してからプリロードしてください。

LCP画像にfetchpriority="high"を使用する

プリロードに加えて、LCP画像要素自体にもfetchpriority="high"を追加すべきです。これにより、ブラウザに他のリソースよりもこの画像を優先するよう指示できます。Google Flightsでのテストでは、この属性を追加しただけでLCPが2.6秒から1.9秒に改善されました。

<img src="hero.jpg"
     fetchpriority="high"
     width="800"
     height="400"
     alt="Hero image">

明示的に優先度を上げない限り、プリロードされた画像はデフォルトの優先度のままです。linkタグとimg要素の両方でrel="preload"とfetchpriority="high"を組み合わせることで、ブラウザに最も明確なシグナルを送ることができます。ブラウザがダウンロードの優先順位を決定する仕組みについては、リソースの優先順位付けに関する完全ガイドを参照してください。

<link rel="preload"
      as="image"
      href="hero.jpg"
      fetchpriority="high">

モバイルサイトでのfetchpriority="high"の採用率は、主にWordPressがコアに組み込んだことにより、2022年の0.03%から2025年には17.3%へと増加しました。使用しているCMSが自動的に設定しない場合は、自分で追加してください。

Largest Contentful Paintの画像をプリロードする方法

LCP画像のプリロードは簡単です。たった3つのステップを実行するだけです。

1. LCP要素を特定する： Lighthouse監査を実行し、Largest Contentful Paint要素を確認します。LCP要素が間違いなく画像であることを確認してください。
2. レスポンシブ画像フォーマットを確認する。レスポンシブ画像を使用している場合、それらすべての画像サイズをプリロードタグのsrcsetに追加する必要があります。そうしないと間違った画像をプリロードしてしまい、ページが遅くなるだけです。
3. プリロードタグを追加する。あとはプリロードタグを追加するだけです。

<link
   <!-- プリロードを指示 -->
   rel="preload"
   <!-- asは必須であり、画像をプリロードすることを示す -->
   as="image"
   <!-- 画像のsrc -->
   href="wolf.jpg"
   <!-- 優先度を上げる -->
   fetchpriority="high"
   <!-- オプション：レスポンシブ画像のsrcset -->
   imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w"
   <!-- img要素のsizes属性と一致させる必要がある -->
   imagesizes="100vw">

imagesizesの値は、<img>要素のsizes属性と一致している必要があります。画像がviewportの幅の半分で表示される場合は、imagesizes="50vw"を使用します。これを間違えると、ブラウザは誤った画像バリアントをプリロードしてしまいます。

プリロードするのはLCP画像のみにしてください。リソースを多くプリロードしすぎると、優先度の引き上げ効果が薄れ、ブラウザは何が最も重要かを区別できなくなります。必要なのはLCP画像のプリロード1つだけです。さらに積極的なアプローチとして、プリロードと103 Early Hintsを組み合わせることで、HTMLが到着する前にダウンロードを開始できます。

プリロードによって画像のダウンロード開始は早まりますが、画像自体の最適化は依然として必要です。WebPやAVIFのようなモダンなフォーマットを使用し、適切なサイズで提供してください。詳細については、Core Web Vitalsのための画像最適化を参照してください。

プリロードはLCPタイミングの一部分、つまり画像のダウンロードが開始されるまでの遅延にのみ役立ちます。Time to First Byteが遅い場合、どれだけプリロードしても補うことはできません。プリロードタグはHTML内に存在するため、ブラウザはまずHTMLを受信する必要があります。プリロードのヒントを追加する前に、TTFBを確認してください。

WordPressでLargest Contentful Paintの画像をプリロードする方法

WordPressでLargest Contentful Paintの画像をプリロードするのは全く難しくありません。通常、Largest Contentful Paintの画像はブログ記事やページのアイキャッチ画像です。わずか数行のコードで、アイキャッチ画像のURLとsrcsetを取得し、ページのheadに追加できます。

現在のテンプレートのheader.phpファイル内の、title要素の直後にこのコードを追加するだけです。

<?php if((int)get_post_thumbnail_id() > 0){
 $imgurl = get_the_post_thumbnail_url();
 $srcset = wp_get_attachment_image_srcset(get_post_thumbnail_id());
 $sizes = wp_get_attachment_image_sizes(get_post_thumbnail_id());
?>
 <link rel="preload"
       as="image"
       href="<?php echo $imgurl;?>"
       fetchpriority="high"
       imagesrcset="<?php echo $srcset;?>"
       imagesizes="<?php echo $sizes;?>">
<?php } ?>