DNS Prefetch
dns-prefetch 提前解析第三方網域的 DNS，成本低但收益有限，適合搭配少數可能用到的第三方。
定義
DNS prefetch 是 `<link rel='dns-prefetch'>` 提示，讓瀏覽器預先解析指定網域的 DNS。它比 preconnect 成本更低，適合用在『可能會用到』的第三方網域，降低後續請求的 DNS 延遲。
為什麼重要
- 降低 DNS 查詢延遲 — DNS 解析可能花費 20-120ms，預先完成可加速後續請求
- 成本極低 — 只做 DNS lookup，不建立 TCP/TLS 連線，對頁面影響幾乎為零
- 支援廣泛 — 所有主流瀏覽器都支援，包括舊版 IE
- 適合不確定會用的第三方 — 比 preconnect 保守，即使最終沒用也不浪費資源
- 改善用戶體驗 — 點擊連結或載入第三方資源時感覺更快
- 對行動裝置尤其有效 — 行動網路 DNS 延遲通常更高
- 可作為 preconnect 的 fallback — 不支援 preconnect 的瀏覽器至少能獲得 DNS 優化
怎麼做（實作重點）
- 放在 <head> 最前面，讓瀏覽器盡早開始 DNS 解析
- 只對 5-10 個最可能用到的第三方網域使用
- 關鍵第三方用 preconnect，次要第三方用 dns-prefetch
- 同時加 preconnect 和 dns-prefetch 可兼顧新舊瀏覽器
- 用 Resource Timing API 或 DevTools 驗證 DNS 時間
- 定期審查：移除不再使用的第三方網域
- 避免對自己網站的域名使用（已經解析過了）
範例
html
<!-- 在 <head> 最前面加入常用第三方網域 -->
<head>
<!-- 優先：關鍵第三方用 preconnect -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- 次要：可能用到的第三方用 dns-prefetch -->
<link rel="dns-prefetch" href="//cdn.example.com" />
<link rel="dns-prefetch" href="//analytics.example.com" />
<link rel="dns-prefetch" href="//api.third-party.com" />
</head>html
<!-- 同時使用：新瀏覽器用 preconnect，舊瀏覽器 fallback 到 dns-prefetch -->
<link rel="preconnect" href="https://cdn.example.com" />
<link rel="dns-prefetch" href="https://cdn.example.com" />
<!-- 驗證 DNS 解析時間（JavaScript）-->
<script>
const entries = performance.getEntriesByType('resource');
entries.forEach(e => {
if (e.domainLookupEnd > e.domainLookupStart) {
console.log(`${e.name}: DNS=${e.domainLookupEnd - e.domainLookupStart}ms`);
}
});
</script>常見問題
關於這個詞彙的常見問答。