LCP画像の先読み

Silktideは、ページ上のメイン画像（読み込み時に訪問者が目にする最大の要素）が、ブラウザーに早く取得するよう指示することで、より早く表示できるかどうかをチェックします。ページは最大のコンテンツが表示されたときに読み込みが完了したように感じられるため、この1枚の画像がページ全体の体感速度を左右することがよくあります。

その画像が表示される瞬間はLargest Contentful Paint（LCP）として測定され、Googleのの1つです。

重要な理由

ブラウザーは、ファイルをおおむね発見した順にダウンロードします。しかしメイン画像は、スタイルシートやスクリプトの後ろに隠れていたり、から参照されていたり、スクリプトによって挿入されたりするため、発見が遅れることがよくあります。その結果、ページの枠組みはすぐに構築される一方で、最も重要なコンテンツが表示されるべき場所が空白のままになります。

訪問者はメインコンテンツが表示されるまでの時間で速度を判断し、GoogleもLCPを検索順位の要素に含めています。そのため、この1つのファイルを優先するようブラウザーに伝えることは、利用できる速度改善の中でも特に効果の高い方法です。

修正方法

画像を先読みして、読み込みの最初からブラウザーが取得するようにします。

<!-- <head>内: ヒーロー画像を直ちに取得 -->
<link rel="preload" as="image" href="hero.jpg" fetchpriority="high">

または、画像が通常の<img>要素である場合は、そこに直接fetchpriority="high"を追加します。
この画像をしないでください。メイン画像にloading="lazy"を指定すると、最初に表示すべきものの読み込みが遅れます。
メインビジュアルにはCSSの背景画像よりも通常の<img>要素を使用してください。そうすれば、ブラウザーが自動的に早く発見できます。

Silktideによるテスト方法

速度テストに設定されているデバイスの種類、接続速度、テスト場所を使用して、実際のブラウザーでページを読み込みます。
ページの読み込み中に表示される最大のコンテンツ要素を特定します。それが画像の場合は、ブラウザーがその画像を発見してダウンロードしたタイミングをチェックします。
画像を早く取得すれば早く表示できる場合は、推定短縮時間とともに報告します。

トラブルシューティング

ページやデバイスによってメイン画像が変わる

先読みのヒントはページごとに設定され、「最大の」要素はデスクトップとモバイルのレイアウトによって異なる場合があります。テンプレートのロジックでページごとに適切な先読みを出力でき、ヒントのmedia属性とimagesrcset属性でレスポンシブなバリエーションに対応できます。

画像を先読みしたのに問題が残る

先読みURLは、ページが最終的に表示するURLと完全に一致している必要があります。異なるサイズのバリエーションや、によって書き換えられたURLではカウントされません。また、そのヒントが後からスクリプトで追加されたものではなく、ページののhead自体に記述されていることを確認してください。後から追加すると、先読みの目的が損なわれます。