rel=prefetch

prefetch キーワードを <link> 要素の rel 属性に設定すると、ユーザーが将来の操作でターゲットリソースを必要とする可能性が高く、したがってブラウザーはリソースを先読みしてキャッシュすることでユーザーの使い勝手を向上させることができる可能性があることをブラウザーに示唆するものです。 <link rel="prefetch"> は同じサイトのナビゲーションリソース、または同じサイトのページで使用するサブリソースに使用されます。

結果はディスク上の HTTP キャッシュに保存されます。このため、現在のページで使用していないサブリソースを先読みするのに有益です。また、ユーザーがサイト内で次に訪れるであろう文書を先読みするために使用することもできます。ただし、その結果、ヘッダーに注意する必要があります。例えば、 Cache-Control ヘッダーは先読みをブロックする可能性があります（no-cache や no-store など）。

<link rel="prefetch"> は、機能的には fetch() を priority: "low" オプション付きで呼び出すのと同等ですが、前者は一般的に優先度がさらに低く、リクエストに Sec-Purpose: prefetch (en-US) ヘッダーが設定されます。一般的にブラウザーは、先読みするリソースには事前読み込みリソース（<link rel="preload"> でリクエストされたものなど）よりも低い優先度を与えることに注意してください。現在のページは次のページよりも重要です。

prefetch 操作の取得リクエストは HTTP ヘッダー Sec-Purpose: prefetch (en-US) を含む HTTP リクエストになります。サーバーはリソースのキャッシュタイムアウトを変更したり、他にも特別な処理を行うためにこのヘッダーを使用するかもしれません。 リクエストは、 Sec-Fetch-Dest (en-US) ヘッダーの値を empty に設定したものも含みます。

リクエストの Accept ヘッダーは通常のナビゲーションリクエストで使用する値と一致します。これにより、ブラウザーは以降のナビゲーションで一致するキャッシュリソースを探すことができます。

<link rel="prefetch" href="main.js" />

<link rel="prefetch" href="/app/style.css" />
<link rel="prefetch" href="/landing-page" />

<link rel="prefetch" href="https://news.example/article" />