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