やあ。最近、プロダクトのCore Web Vitals（特にLCP：Largest Contentful Paint）の数値改善に頭を悩ませていないかい？
「画像やフォント、スクリプトを最適化したはずなのに、どうもLCPの数値が頭打ちになる……」
「ブラウザのネットワークタブを見ると、なぜか本当に読み込んでほしいメインビジュアルの画像より先に、どうでもいいアナリティクス系のスクリプトが帯域を食いつぶしている……」
現場でフロントエンドをやっていると、こういう「ブラウザの勝手な気まぐれ」に泣かされる場面によく遭遇するよね。今日は、そんなブラウザのスケジューリングの機嫌を完全にコントロールし、LCPを劇的に改善するための秘密兵器――「Priority Hints（`fetchpriority`属性）」について、ブラウザの内部挙動の裏側から実務での使いこなし方まで、徹底的に解説しよう。
—
1. なぜブラウザは「空気の読めない」読み込みをするのか？
まず、敵を知るためにブラウザの気持ちになってみよう。
私たちが書いたHTMLをブラウザが受け取ったとき、レンダリングエンジンは画面を少しでも早く表示するために、必死のパッチで先読み（プリロード）を行う。これを「プリスキャナー（Preloader）」と呼ぶ。
ブラウザのプリスキャナーは非常に優秀だ。HTMLを上からパースしていく中で、``、`
ブラウザのプリスキャナーは、「HTMLの上の方にあるから重要だろう」という単純なヒューリスティック（経験則）でリクエストの優先度（Priority）を決定する。そのため、画面の下の方（あるいはファーストビューのギリギリ外）にあるはずの要素や、最悪の場合は外部のサードパーティ製スクリプトが、ファーストビューを飾るべき「ヒーローイメージ」よりも先に、貴重なネットワークの帯域（Bandwidth）を占有してしまうことが多々起きるんだ。
「いやいや、こっちのヒーロー画像の方が100倍大事なんだよ！」と、いくら私たちが心の中で叫んでも、デフォルトのブラウザは忖度してくれない。そこで登場するのが、ブラウザに直接「これ最優先な！」と指示できる`fetchpriority`属性というわけだ。
---
2. Priority Hints（`fetchpriority`）の仕様と内部挙動
`fetchpriority`属性は、指定できる値として以下の3つが用意されている。
1. `high`：他のリソースよりも優先して読み込ませたい場合（高優先度）
2. `low`：急ぎではないので、他のリソースを邪魔しないように後回しにしたい場合（低優先度）
3. `auto`：ブラウザのデフォルトの優先度アルゴリズムに任せる（デフォルト）
対象となる要素は、``、``（stylesheetやpreload）、`
コメント