ブラウザの「読み込みの序列」を支配せよ:Priority Hints (fetchpriority) の深淵
Webブラウザのレンダリングエンジンは、常に「限られた帯域」と「CPUリソース」の奪い合いという戦場にあります。パーサーがHTMLを一行ずつ舐め、DOMを構築しながら外部リソースを検知する。その時、ブラウザは「何から先にダウンロードすべきか?」というヒューリスティックな判断を、独自の優先度キュー(Priority Queue)で行っています。
しかし、ブラウザの「推測」は必ずしも開発者の「意図」と一致しません。そこで登場するのが `fetchpriority` 属性、すなわち Priority Hints です。単なる「読み込みの優先度指定」と侮るなかれ。これはブラウザのプリロードスキャナー(Preload Scanner)の制御権を、エンジニアの手に引き戻すための強力なレバーなのです。
1. プリロードスキャナーと優先度の「不一致」
ブラウザの内部構造を覗けば、メインスレッドとは別に「プリロードスキャナー」という軽量スレッドが存在します。こいつはDOMツリーの構築を待たずに、HTMLのソースを先読みしてリソースを特定し、ネットワークリクエストを叩き込みます。
問題は、このスキャナーが抱える「優先度のデフォルト値」の硬直性です。
例えば、LCP(Largest Contentful Paint)対象のヒーロー画像であっても、ブラウザが発見するタイミングやドキュメント内での位置によっては、後から読み込まれる非同期JSよりも優先度が低く見積もられてしまうことが多々あります。これが、Web Vitalsのスコアをドブに捨てる原因です。
2. fetchpriority が解き明かす内部の序列
`fetchpriority` には `high`, `low`, `auto` の3つが存在しますが、重要なのは「ブラウザが本来持っている優先度のバイアスをどう上書きするか」です。


なぜ `high` を指定すると速くなるのか?
ブラウザのネットワークスタックにおいて、`high` を指定されたリソースは、リクエストキューの先頭近くに配置されます。具体的には、HTTP/2やHTTP/3のストリームにおいて、優先度が高いフレームが優先的に送信されます。これにより、TCPの輻輳制御(Congestion Control)が本格化する前に、最も重要なデータが回線に流れるという戦略的優位性が生まれます。
3. 実務レベルで陥りやすい「最適化の罠」
上級エンジニアとして注意すべきは、`fetchpriority` を「魔法の杖」と勘違いすることです。
1. 「すべてを `high` にする」という愚行:
すべてを `high` にすれば、優先度の相対関係は元に戻ります。むしろ、帯域を詰め込みすぎてネットワークのバッファ溢れを引き起こし、かえって全体的なロード時間を悪化させる「ネットワーク・コンジェスチョン(輻輳)」を招くリスクがあります。
2. JSとの競合:
`fetchpriority` は `

コメント