Priority HintsとLCP（Largest Contentful Paint）の最適化
https://imkev.dev/fetchpriority-opportunityより転載
Priority Hints（プライオリティヒント）は、リソースの相対的な優先度をブラウザに示すために使われます。<img>、<link>、<script>、<iframe>要素にfetchpriority属性を追加するか、またはFetch APIのpriority属性を通じてPriority Hintsを設定できます。
ブラウザのローディングプロセスは複雑です。ブラウザは主にリクエストの種類とドキュメント内の位置によってリクエストの優先度を決定します。例えば、ドキュメントの<head>内でリクエストされたCSSファイルにはHighest優先度が割り当てられ、defer属性を持つ<script>要素にはLow優先度が割り当てられます。ブラウザは同じ優先度を持つリソースを発見された順にダウンロードします。
fetchpriority
fetchpriority属性は、リクエストされたリソースの優先度を上げるか下げるかをブラウザにヒントを出すために使われます。この列挙型属性は以下の3つの値を持つことができます：
high- リソースはデフォルトの優先度と比較してより重要ですlow- リソースはデフォルトの優先度と比較してあまり重要ではありませんauto- デフォルト値
<img src="/lcp.jpg" alt="A dog" fetchpriority="high" />
上の例では、<img>の優先度がデフォルトよりも重要であることをブラウザに示しています。
priority属性はfetchメソッドにも対応しています。
fetch("/api/data.json", { priority: 'high' })
上のfetchリクエストでは、ブラウザにfetchリクエストの優先度がデフォルトと比べて高いことを示しています。
デフォルト優先度
Priority Hintsはリソースの優先度をそのデフォルト優先度に対して増減させます。例えば、画像はデフォルトでLow優先度で始まります。fetchpriority="high"を割り当てると、優先度がHighに増加します。一方で、レンダリングをブロックするスタイルシートはデフォルトでHighest優先度が割り当てられています。それにfetchpriority="low"を割り当てると優先度がHighに下がりますがLowにはなりません。fetchpriorityはリソースの優先度を明示的に設定するのではなく、デフォルトに対する相対的な調整に使われます。
ChromiumでのPriority Hintsの影響についてのドキュメントは異なるリソースタイプ、デフォルトの優先度（◉）、fetchpriority="high"（⬆）やfetchpriority="low"（⬇）を使用した結果の優先度を記載しています。
画像がビューポート内に存在すると発見されれば、優先度はHighに増加します。しかしこれはローディングプロセスのかなり遅い段階であり、リクエストが既に送信されていればあまり効果がないかもしれません。fetchpriority="high"を使うと、ブラウザがビューポート内か外かを知るのを待つことなくHigh優先度で開始できます。
タイトモード
ほとんどのブラウザは2段階でリソースをダウンロードします。初期段階（Chromiumではこれを「タイトモード」とも呼びます）では、2つ未満のリクエストが進行中でなければ、ブラウザはLow優先度のリソースをダウンロードしません。
こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/imkevdev/priority-hints-and-prioritizing-lcp-529d
