<link rel="dns-prefetch">
dns-prefetch キーワードを <link> 要素の rel 属性に指定すると、ユーザーがターゲットリソースのオリジンにあるリソースを必要としている可能性が高く、したがってブラウザーがそのオリジンの DNS 解決を先取りして実行することでユーザーの使い勝手が向上する可能性が高いというヒントをブラウザーに与えます。
詳しくは dns-prefetch の使用を参照してください。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 46 | 79 | 127 | 5 | 46 | 26 | |
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (127)
実装メモ
- HTTPページのみがサポートされていた。
基本構文
HTML
<link rel="dns-prefetch" href="https://api.example.com">
<link rel="dns-prefetch" href="https://analytics.example.com">ライブデモ
DNS prefetch purpose
Show how DNS prefetch resolves a hostname before the full request begins.
プレビュー全画面表示
DNS prefetch vs preconnect
Contrast hostname lookup with the fuller connection warm-up of preconnect.
プレビュー全画面表示
実務での使いどころ
-
<link rel="dns-prefetch"> の活用
dns-prefetch キーワードを <link> 要素の rel 属性に指定すると、ユーザーがターゲットリソースのオリジンにあるリソースを必要としている可能性が高く、したがってブラウザーがそのオリジンの DNS 解決を先取りして実行することでユーザーの使い勝手が向上する可能性が高いというヒントをブラウザーに与えます。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。