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

プリロードとは？

リソースをプリロードすると、ブラウザのメインレンダリングが開始される前であっても、ブラウザにリソースを早期にダウンロードさせることができます。これにより、リソースがより早く利用可能になり、ページのレンダリングをブロックする可能性が低くなるため、ほとんどの場合パフォーマンスが向上します。

<link rel="preload" 
as="image" 
href="image.jpg" 
imagesrcset="image_400px.jpg 400w, image_800px.jpg 800w">

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

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

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

Largest Contentful Paint画像のプリロードはページパフォーマンスにどう影響するか？

Largest Contentful Paint画像をプリロードすると、レンダリングプロセスの早い段階で画像がレンダリング可能になります。これは通常、より良いLCPスコアにつながります。ほぼすべてのケースで、LCP要素のプリロードによりLighthouseとRUMのスコアが向上します。

LCP要素のプリロードは、何らかの理由でLCP画像が最初にダウンロードされる画像ではない場合に、さらに効果的です。これは次のような場合に発生します：

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

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

LCP画像のプリロードは比較的簡単です。必要な手順はわずか3つです：

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

<link 
   <!-- indicate preload -->
   rel="preload" 
   <!-- as is required and indicates we are preloading an image -->
   as="image" 
   <!-- image src -->
   href="wolf.jpg" 
   <!-- optional: the responsive image srcset -->
   imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w">

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());
 <link rel="preload" 
       as="image" 
       href="<?php echo $imgurl;?>" 
       imagesrcset="<?php echo $srcset;?>">
<?php } ?>.