Webブラウザの「中身」の世界へようこそ。フロントエンドの迷宮を歩んでいると、時折こんな壁にぶつかりますよね。「大事な画像なのに、なぜか後回しで表示される……」。
今日は、そんなもどかしさを解決する魔法の杖、`fetchpriority`（フェッチプライオリティ）属性について、現場の知見を交えながら優しく解説します。
—
ブラウザは「優秀な新人スタッフ」である
まず、ブラウザがWebページを表示する過程を想像してみてください。ブラウザという優秀なスタッフは、あなたの書いたHTMLを読み込みながら、必要なリソース（画像、CSS、JavaScriptなど）をせっせと集めてきます。
しかし、このスタッフは非常に真面目すぎるがゆえに、「何が一番大切か」を見失うことがあります。例えば、ページの冒頭にある大きなメインビジュアル（LCP画像）よりも、画面の外にある小さなアイコンを先にダウンロードしてしまう……なんてことが日常茶飯事なのです。
そこで登場するのが `fetchpriority` です。これはブラウザに対して、「今はこれこそが一番大事だから、他のことは後回しにしてでも最優先で取ってきて！」と、優先順位を直接指示する仕組みなんです。
—
「お買い物」で例える優先順位
スーパーでの買い物をイメージしてください。あなたは「夕食のカレー」を作りたいと思っています。
- `high`（高優先度）: カレーの「ルー」と「肉」。これがなきゃ始まらない！
- `low`（低優先度）: カレーの横に置く「箸休めの漬物」。あってもいいけど、最後でいい。
- `auto`（自動）: ブラウザにお任せ。
これまでは、ブラウザのさじ加減一つで、漬物を先にカゴに入れ、ルーは最後……なんてことが起きていました。`fetchpriority` を使うと、レジの店員さんに「先にルーをスキャンして！」と伝えることができるようになるわけです。
—
実際にどう書くの？
使い方は驚くほどシンプルです。``タグや`
コメント