Sofia Emelianova
ブラウザでは、ウェブページのコンテンツの一部が先に表示され、一部が後で表示されます。Fetch Priority API を使用すると、重要なリソースの初期取得優先度をブラウザに通知して、リソースの読み込みを最適化できます。
動画で次の方法を学びます。
- [パフォーマンス] パネルで、読み込み指標の Largest Contentful Paint（LCP） を確認します。
- [ネットワーク] パネルとパフォーマンス トレースのネットワーク トラックで、初期優先度と最終優先度を確認します。
- ローカル オーバーライドを使用して、
<img>、<link>、<script>要素のfetchpriority属性をテストします。 loading属性とfetchpriority属性の違いをご確認ください。- リソースの優先度を下げるタイミングを学びます。
LCP 画像は fetchpriority="high" のメリットを明確に享受できます。別のヒントは、ブラウザが画像の優先度を自動的に上げる場合、最初に設定することをおすすめします。
詳しくは以下をご覧ください。