リソースの読み込みの最適化に関する前回のモジュールでは、CSS や JavaScript などのさまざまなページリソースがページ読み込み速度に与える影響と、リソースとその配信を最適化してページのレンダリングを高速化する方法を学習しました。これは、リソース読み込みのより高度な側面に移行するのに最適なタイミングであり、ブラウザがリソースヒントを使用してリソースの読み込みを高速化するのに役立ちます。
リソースヒントを使用すると、リソースの読み込み方法と優先順位付け方法をブラウザに伝えることで、デベロッパーはページの読み込み時間をさらに最適化できます。preconnect や dns-prefetch などのリソースヒントの初期セットが最初に導入されました。しかし、時間の経過とともに、preload と Fetch Priority API が徐々に追加され、機能が追加されています。
リソースヒントは、読み込みパフォーマンスを向上させる可能性のある特定のアクションを前もって実行するようブラウザに指示します。リソースヒントは、初期の DNS ルックアップの実行、事前のサーバーに接続する、ブラウザが通常検出する前にリソースを取得するなどのアクションを実行できます。
リソースヒントは、HTML で指定することも（ほとんどの場合は <head> 要素の初期で）指定することも、HTTP ヘッダーとして設定することもできます。このモジュールの範囲では、preconnect、dns-prefetch、preload と、prefetch が提供する投機的取得動作について説明します。
preconnect
preconnect ヒントは、重要なリソースを取得する場所から別のオリジンへの接続を確立するために使用されます。たとえば、CDN やその他のクロスオリジンで画像やアセットをホストしている可能性があります。
<link rel="preconnect" href="https://example.com">
preconnect を使用すると、ブラウザはごく近い将来に特定のクロスオリジン サーバーに接続する予定であり、ブラウザはできるだけ早く（理想的には HTML パーサーまたはプリロード スキャナによる接続を待つ前に）その接続を開くことが想定されます。
ページに大量のクロスオリジン リソースがある場合は、現在のページにとって最も重要なリソースに preconnect を使用します。
preconnect では、クロスオリジン リソースの検出時点ではなく、より早く接続を確立することで緩和できます。
preconnect の一般的なユースケースは Google Fonts です。Google Fonts では、@font-face 宣言を提供する https://fonts.googleapis.com ドメインと、フォント ファイルを提供する https://fonts.gstatic.com ドメインに preconnect することをおすすめします。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
crossorigin 属性は、クロスオリジン リソース シェアリング（CORS）を使用してリソースを取得する必要があるかどうかを示すために使用します。preconnect ヒントを使用する場合、送信元からダウンロードされるリソースが CORS（フォント ファイルなど）を使用している場合は、preconnect ヒントに crossorigin 属性を追加する必要があります。
dns-prefetch
クロスオリジン サーバーへの接続を早期に開始することで、初期ページの読み込み時間を大幅に短縮できますが、多数のクロスオリジン サーバーへの接続を一度に確立することは妥当でない、または実現できない可能性があります。preconnect を過剰に使用することが懸念される場合は、dns-prefetch ヒントを使用してコストを大幅に削減できます。
dns-prefetch はその名前から、クロスオリジン サーバーへの接続を確立するのではなく、事前に DNS ルックアップを実行するだけです。DNS ルックアップは、ドメイン名が基盤となる IP アドレスに解決されたときに行われます。デバイスレベルとネットワーク レベルで DNS キャッシュのレイヤを作成することで、通常はこのプロセスを高速化できますが、それでもある程度の時間がかかります。
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
DNS ルックアップはかなり安価です。また、コストが比較的小さいため、preconnect よりも適切なツールである場合があります。特に、ユーザーがたどる可能性が高い他のウェブサイトに移動するリンクでは、リソースヒントの使用が望ましい場合があります。こうしたツールの 1 つが dnstradamus で、JavaScript を使用してこの処理を自動的に行います。他のウェブサイトへのリンクがスクロールされたときに、Intersection Observer API を使用して現在のページの HTML に dns-prefetch ヒントを挿入します。
preload
preload ディレクティブは、ページのレンダリングに必要なリソースの早期リクエストを開始するために使用されます。
<link rel="preload" href="/lcp-image.jpg" as="image">
preload ディレクティブは、後で検出される重要なリソースに限定する必要があります。最も一般的なユースケースは、フォント ファイル、@import 宣言によって取得される CSS ファイル、Largest Contentful Paint（LCP）の候補となる CSS background-image リソースです。この場合、リソースは外部リソースで参照されているため、これらのファイルはプリロード スキャナで検出されません。
preconnect と同様に、フォントなどの CORS リソースをプリロードする場合、preload ディレクティブで crossorigin 属性が必要になります。crossorigin 属性を追加しない場合、または非 CORS リクエスト用に追加しない場合、リソースはブラウザによって 2 回ダウンロードされ、他のリソースに費やした可能性のある帯域幅が無駄になります。
<link rel="preload" href="/font.woff2" as="font" crossorigin>
上記の HTML スニペットでは、/font.woff2 が同じドメイン上にある場合でも、CORS リクエストを使用して /font.woff2 をプリロードするようにブラウザに指示されています。
prefetch
prefetch ディレクティブは、今後のナビゲーションに使用される可能性が高いリソースに対して優先度の低いリクエストを開始するために使用されます。
<link rel="prefetch" href="/next-page.css" as="style">
このディレクティブの形式は preload ディレクティブとほぼ同じですが、"prefetch" という値を使用するのは <link> 要素の rel 属性のみです。ただし、preload ディレクティブとは異なり、prefetch は、将来のナビゲーションのためにリソースの取得を開始する（または発生しない可能性あり）という点で、基本的には投機的です。
prefetch が有益な場合もあります。たとえば、ほとんどのユーザーが完了するまでたどるユーザーフローがウェブサイト上で特定されている場合、そのページのレンダリングに不可欠なリソースの prefetch は、読み込み時間の短縮に役立ちます。
Fetch Priority API
fetchpriority 属性で Fetch Priority API を使用すると、リソースの優先度を上げることができます。この属性は、<link> 要素、<img> 要素、<script> 要素とともに使用できます。
<div class="gallery">
<div class="poster">
<img src="img/poster-1.jpg" fetchpriority="high">
</div>
<div class="thumbnails">
<img src="img/thumbnail-2.jpg" fetchpriority="low">
<img src="img/thumbnail-3.jpg" fetchpriority="low">
<img src="img/thumbnail-4.jpg" fetchpriority="low">
</div>
</div>
デフォルトでは、画像は低い優先度で取得されます。レイアウト後、画像が最初のビューポート内にあることが判明した場合は、優先度が高に引き上げられます。上記の HTML スニペットで、fetchpriority は即座に大きい LCP 画像を優先度「高」でダウンロードし、重要度の低いサムネイル画像は低い優先度でダウンロードするようブラウザに指示します。
最新のブラウザは、2 つのフェーズでリソースを読み込みます。最初のフェーズは重要なリソース用に予約されており、すべてのブロッキング スクリプトがダウンロードされて実行されると終了します。このフェーズでは、優先度が低のリソースのダウンロードが遅れる可能性があります。fetchpriority="high" を使用すると、リソースの優先度が上がり、最初のフェーズでブラウザがリソースをダウンロードできるようになります。
リソースヒントのデモ
知識を試す
preconnect リソースヒントの機能
Fetch Priority API でできることは何ですか。
<link> 要素、<img> 要素、<script> 要素の相対的な優先度を指定します。
prefetch ヒントを使用するのは、どのような場合ですか。
次のトピック: 画像のパフォーマンス
ページの HTML、<head> 要素、リソースヒントに関する、一般的なパフォーマンスに関する考慮事項についてすでにご理解いただけたと思います。ただし、ページでよく読み込まれるさまざまなリソースタイプに固有の最適化があります。次のモジュールでは、画像のパフォーマンスについて説明します。このモジュールでは、ユーザーのデバイスに関係なく、ウェブサイトの画像を可能な限り速く読み込む方法を紹介します。