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