Fetch priority
fetchpriority 属性（high / low / auto）は画像、スクリプト、CSSなどのリソース取得の優先度をブラウザに明示的に伝えます。
概要
fetchpriority 属性（high / low / auto）は画像、スクリプト、CSSなどのリソース取得の優先度をブラウザに明示的に伝えます。
対応ブラウザ
デスクトップ
Chrome 103+
Edge 103+
Safari 17.2+
Firefox 132+
モバイル
Chrome Android 103+
Safari iOS 17.2+
Firefox Android 132+
基本構文
HTML
<!-- LCPの画像を高優先度に -->
<img src="hero.jpg" fetchpriority="high" alt="ヒーロー画像">
<!-- ファーストビュー外は低優先度 -->
<img src="footer.jpg" fetchpriority="low" loading="lazy" alt="フッター画像">
<script src="analytics.js" fetchpriority="low"></script>実務での使いどころ
-
Fetch priority の活用
Fetch Priority API。リソースの取得優先度を明示的に指定する属性。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。