<link rel="prefetch">
prefetch キーワードを <link> 要素の rel 属性に設定すると、ユーザーが将来の操作でターゲットリソースを必要とする可能性が高く、したがってブラウザーはリソースを先読みしてキャッシュすることでユーザーの使い勝手を向上させることができる可能性があることをブラウザーに示唆するものです。 <link rel="prefetch"> は同じサイトのナビゲーションリソース、または同じサイトのページで使用するサブリソースに使用されます。
結果はディスク上の HTTP キャッシュに保存されます。このため、現在のページで使用していないサブリソースを先読みするのに有益です。また、ユーザーがサイト内で次に訪れるであろう文書を先読みするために使用することもできます。ただし、その結果、ヘッダーに注意する必要があります。例えば、 Cache-Control ヘッダーは先読みをブロックする可能性があります(no-cache や no-store など)。
メモ: このような制限があるため、対応している場合には、代わりに投機ルール API を文書の先読みに使用することをお勧めします。
<link rel="prefetch"> は、機能的には fetch() を priority: "low" オプション付きで呼び出すのと同等ですが、前者は一般的に優先度がさらに低く、リクエストに Sec-Purpose: prefetch ヘッダーが設定されます。一般的にブラウザーは、先読みするリソースには事前読み込みリソース(<link rel="preload"> でリクエストされたものなど)よりも低い優先度を与えることに注意してください。現在のページは次のページよりも重要です。
prefetch 操作の取得リクエストは HTTP ヘッダー Sec-Purpose: prefetch を含む HTTP リクエストになります。サーバーはリソースのキャッシュタイムアウトを変更したり、他にも特別な処理を行うためにこのヘッダーを使用するかもしれません。 リクエストは、 Sec-Fetch-Dest ヘッダーの値を empty に設定したものも含みます。
リクエストの Accept ヘッダーは通常のナビゲーションリクエストで使用する値と一致します。これにより、ブラウザーは以降のナビゲーションで一致するキャッシュリソースを探すことができます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 110 | 110 | 115 | | 110 | | |
| DOM API | ||||||
deliveryType (navigational-prefetch) 実験的 非標準 `deliveryType="ナビゲーションプリフェッチ"` | 117 | 117 | | | 117 | |
| その他 | ||||||
| prefetch キーワードを link 要素の rel 属性に設定すると、ユーザーが将来の操作でターゲットリソースを必要とする可能性が高く、したがってブラウザーはリソースを先読みしてキャッシュすることでユーザーの使い勝手を向上させることができる可能性があることをブラウザーに示唆するものです。 は同じサイトのナビゲーションリソース、または同じサイトのページで使用するサブリソースに使用されます。 | 8 | 12 | 2 | 13.1 | 18 | 13.4 |
http.headers.Sec-Purpose.prefetch <リンク rel="prefetch">` プリフェッチのための`Sec-Purpose`。 | | | 115 | | | |
- 安全なコンテキストが必要
- 安全なコンテキストが必要
- 安全なコンテキストが必要
- ブラウザの実験的フラグを有効にする必要があります
- 安全なコンテキストが必要
- ブラウザの実験的フラグを有効にする必要があります
- <link rel="prefetch">` の `Sec-Purpose` をサポートしていません。Chrome では、`link` リクエストがプリフェッチであることを示すために、従来の `Purpose: prefetch` ヘッダが使用されます。バグ 40236973 を参照してください。
- <link rel="prefetch">` の `Sec-Purpose` をサポートしていません。Edge では、`link` リクエストがプリフェッチであることを示すために、従来の `Purpose: prefetch` ヘッダが使用されます。バグ 40236973 を参照してください。
- Sec-Purpose: prefetch` は、以前のバージョンで `link` プリフェッチリクエストを示すために使用されていた非標準の `X-moz: prefetch` ヘッダーに取って代わるものです。
- プリフェッチリクエストはナビゲーションのための `Accept` ヘッダー文字列も含むべきですが、代わりに `Accept: */*代わりに `*` が送られます。
- <link rel="prefetch">` の `Sec-Purpose` をサポートしていません。Chrome Android では、`link` リクエストがプリフェッチであることを示すために、従来の `Purpose: prefetch` ヘッダが使用されます。バグ 40236973 を参照してください。
基本構文
<link rel="prefetch" href="/next-page.html">
<link rel="prefetch" href="/js/page2.js" as="script"> ライブデモ
Prefetch idea
Explain how prefetch prepares likely future navigations or assets at a lower priority.
Good candidates
Prefetch is best for likely future work rather than the current critical path.
実務での使いどころ
-
<link rel="prefetch"> の活用
prefetch キーワードを <link> 要素の rel 属性に設定すると、ユーザーが将来の操作でターゲットリソースを必要とする可能性が高く、したがってブラウザーはリソースを先読みしてキャッシュすることでユーザーの使い勝手を向上させることができる可能性があることをブラウザーに示唆するものです。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。