Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
110
110
115
110
HTML 属性
DOM API
deliveryType (navigational-prefetch)
実験的 非標準

`deliveryType="ナビゲーションプリフェッチ"`

117
117
117
その他
prefetch

<リンク rel="prefetch">` プリフェッチのための`Sec-Purpose`。

115
1+対応 (バージョン) 未対応 注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • 安全なコンテキストが必要
注釈 1件
実装メモ
  • 安全なコンテキストが必要
注釈 1件
実装メモ
  • 安全なコンテキストが必要
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実装メモ
  • 安全なコンテキストが必要
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実装メモ
  • <link rel="prefetch">` の `Sec-Purpose` をサポートしていません。Chrome では、`link` リクエストがプリフェッチであることを示すために、従来の `Purpose: prefetch` ヘッダが使用されます。バグ 40236973 を参照してください。
注釈 1件
実装メモ
  • <link rel="prefetch">` の `Sec-Purpose` をサポートしていません。Edge では、`link` リクエストがプリフェッチであることを示すために、従来の `Purpose: prefetch` ヘッダが使用されます。バグ 40236973 を参照してください。
注釈 2件
実装メモ
  • Sec-Purpose: prefetch` は、以前のバージョンで `link` プリフェッチリクエストを示すために使用されていた非標準の `X-moz: prefetch` ヘッダーに取って代わるものです。
  • プリフェッチリクエストはナビゲーションのための `Accept` ヘッダー文字列も含むべきですが、代わりに `Accept: */*代わりに `*` が送られます。
注釈 1件
実装メモ
  • <link rel="prefetch">` の `Sec-Purpose` をサポートしていません。Chrome Android では、`link` リクエストがプリフェッチであることを示すために、従来の `Purpose: prefetch` ヘッダが使用されます。バグ 40236973 を参照してください。

基本構文

HTML
<link rel="prefetch" href="/next-page.html">
<link rel="prefetch" href="/js/page2.js" as="script">

ライブデモ

Prefetch idea

The sequence from idle time to a prefetched resource, and when the guess pays off.

プレビュー全画面表示

Good candidates

Prefetch is best for likely future work rather than the current critical path.

プレビュー全画面表示

Prefetch vs preload

Compare speculative future loading with urgent current-page fetching.

プレビュー全画面表示

実務での使いどころ

  • <link rel="prefetch"> の活用

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

注意点

  • 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。