優先度のヒントと fetchpriority を使用してリソースの読み込みを高速化する
公開: 2022-09-30最も重要なリソースの読み込み速度は?
この正確な質問には、ピンと針に関する Web サイトの所有者 (および経験豊富な Web の専門家) がいます。 そして、最初の数ミリ秒であなたのウェブサイトを成功させるか失敗させるかはたまたまです。
リソースの読み込みを最適化するには、次の 2 つのオプションがあります。
- ブラウザのメカニズムに完全に依存して、最適な順序でリソースをダウンロードおよびフェッチします。
- リソースのヒントを実装して、それらを支援してください。
残念ながら、最新のブラウザはどれだけ優れていても、サイトやアプリケーションごとに設定やコンテキストが異なります。 また、リソースの優先順位を割り当てるのは得意ですが、場合によってはそれだけでは十分ではありません。
残念ながら、リソース ヒントは、リソースの優先順位付けに対して限定的な影響しか与えません。
幸いなことに、Web パフォーマンス ツールボックスに追加できる新しいヒント、優先ヒントがあります。
この記事では、次のことについて詳しく説明します。
- 優先ヒントとは;
- それらをいつ使用するか。
- fetchpriority を介してそれらを実装する方法;
- サイトでそれらをテストする方法。
さぁ、始めよう！
プライオリティヒントとは？
Priority Hints は、ウェブサイトの所有者と開発者が、ブラウザがリソース (画像、フォント、CSS、スクリプト、iframe など) をロードするときにそれらの優先度を示すことを可能にするシグナルです。
ブラウザーは、Web ページを作成する過程であらゆる種類のリソースをダウンロードする必要があります。 優先リソースとして、最初に HTML ドキュメントを要求してダウンロードします。
しかし、ブラウザーは次に何をロードするかをどのように判断するのでしょうか?
ブラウザには、リソースの種類ごとにあらかじめ決められた一連の優先順位があります。
通常、これらのデフォルトの優先度は非常にうまく機能し、Web パフォーマンスが向上します。
ただし、Addy Osmani が優先度のヒントに関する記事で述べたように、ブラウザーは次に何をフェッチするかについて、知識に基づいたかなり良い推測を行うことができます。
しかし、彼らはあなたほどあなたのプロジェクトを知りません。
そのため、微調整が必要になる場合があります。
「Chrome のようなブラウザには、リソースがビューポート内にあるかどうかなどの信号に基づいて、適切な優先度でリソースをフェッチしようとするヒューリスティックがあります。とはいえ、優先度のヒントがなければ、Chrome はビューポート内の画像の優先度を上げることができるのは、レイアウト後にのみです。ヒントの使用を検討するもう 1 つの理由は、ページの作成者として、ユーザーが最初に表示する最も重要なものを知っている可能性が高いためです。ユースケースに合わせて最適化できるようにブラウザに通知できます。」
以前は、プリロードまたはプリコネクトを使用することしかできませんでした。
また、プリロードはブラウザーが準拠する必要がある必須のディレクティブですが、場合によっては、プリロードされたリソースの優先度が依然として低くなる可能性があります。
たとえば、プリロードされた Largest Contentful Paint (LCP) 画像は優先度が低くなり、他の優先度の高いリソースによって押し戻される可能性があります。 このような場合、Priority Hints はプリロードを完全に補完し、リソースがロードされるまでの時間を短縮するのに役立ちます。
Pat Meenan が Chrome の Priority Hints について話し、LCP の「チート コード」と呼んでいます。
これは、プライオリティ ヒントの力を示す代表的な例です。
では、Web パフォーマンス戦略でプライオリティ ヒントをいつ実装する必要があるかを見てみましょう。
優先ヒントをいつ使用するか
Google によると、プライオリティ ヒントが役立つ主なシナリオは 5 つあります。
- スクロールせずに見える画像がいくつかありますが、すべての画像の優先度が同じである必要はありません。 たとえば、画像カルーセルでは、最初に表示される画像だけが他の画像よりも高い優先度を必要とします。
- ビューポート内のヒーロー画像は低い優先度から始まります。 レイアウトが完了すると、Chrome はそれらがビューポートにあることを検出し、優先度を上げます (残念ながら、開発ツールは最終的な優先度しか表示しません - WebPageTest は両方を表示します)。 これにより、通常、イメージのロードに大幅な遅延が追加されます。 マークアップで優先度のヒントを提供すると、画像を高い優先度で開始し、はるかに早く読み込みを開始できます。
ほぼすべての Web サイトが最初の 2 つのシナリオに該当します。 残りの作業を行う必要があるかどうかを判断するには、(HTML/JS) コードを深く掘り下げるか、Web 開発者に助けを求めてください。
優先度ヒントの実装方法: fetchpriority 属性
fetchpriority HTML 属性を使用して優先ヒントを実装できます。
この属性は次のように使用できます。
- リンク
- 画像
- 脚本
- iframe タグ
fetchpriority属性は、次の 3 つの値のいずれかを受け入れます。
- 高:リソースが重要であると考えており、ブラウザに優先させたいことを示します。
- 低:リソースの重要性が低いと見なし、ブラウザに優先順位を下げてもらいたいことを示します。
- auto:設定がなく、ブラウザに適切な優先順位を決定させる場合のデフォルト値。
または、JavaScript Fetch API を使用できます。
fetchpriority属性を使用する際の注意事項:
- fetchpriorityは、優先度の高いリソースが同じタイプの他の (優先度の低い) リソースの前に読み込まれることを保証しません。
- 読み込み順序自体を制御するためにfetchpriorityを使用しないでください。
- fetchpriorityは必須のディレクティブではなく、ブラウザーに強制的にリソースを取得させたり、取得を妨げたりすることはできません。 リソースをフェッチするかどうかはブラウザ次第です。
優先ヒントを使用してサイトをテストする方法
テストを実行する前に、優先ヒントは Chrome 101 (またはそれ以降) および Edge 101 (またはそれ以降) でのみ使用できることを知っておく必要があります。
さて、当面の質問に：
最も簡単な方法は、ツールを使用することです。コードを手動で変更する必要はありません。
幸いなことに、WebPageTest の Experiments 機能を使用すると、コードを変更せずに Priority Hints などのパフォーマンス機能をテストできます。
ただし、WebPageTest の Experiment 機能は有料サブスクリプションの一部であるため、追加費用を計画する必要があります。
逆に、技術的なスキルがあれば、サイトのコードを自分で微調整し、優先ヒントの影響をテストできます。
変更を加えるたびに必ずテストを実行してください。
要約
これまで多くのことを説明してきたので、最も重要なポイントを簡単に要約します。
- Priority Hints を使用すると、サイトのリソースの優先度を示すことができます。
- Priority Hints は、スクロールせずに見える画像、ヒーロー画像 (LCP 要素)、非同期および遅延スクリプト、CSS、およびフォント ファイルの読み込みを高速化するのに役立ちます。
- 優先度ヒントは、fetchpriority 属性を介して実装できます。
- link、img、script、および iframe タグで fetchpriority 属性を使用できます。
- fetchpriority 属性は、high、low、および auto の 3 つの値のいずれかを受け入れます。
- 注意:優先ヒントは、過度に使用すると速度の向上ではなくパフォーマンスの低下につながる可能性があるため、慎重に実装する必要があります。
- fetchpriority は必須のディレクティブではなく、ブラウザーに強制的にリソースを取得させたり、取得を妨げたりすることはできません。 リソースをフェッチするかどうかはブラウザ次第です。
- 優先ヒントは Chrome 101 以降で利用できます。
サイトに対する優先ヒントの影響を測定するには、すべての変更後にテストを実行します。
一般的なテスト ツール:
- PageSpeed インサイト
- GTMetrix
- WebPageTest
- 灯台
- ピンダム