介紹
每個外部資源（字體、腳本、映像、API 端點）都需要網路連線。 DNS 解析、TCP 握手和 TLS 協商的開銷可能會導致頁面載入時間增加數百毫秒。 資源提示如 dns-prefetch 和 preconnect 讓您告訴瀏覽器在實際需要資源之前提前執行這些步驟。
連接成本
建立 HTTPS 連線涉及多次往返：
| 步驟 | 延遲（大約） |
|---|---|
| DNS 查找 | 20-120 毫秒 |
| TCP握手 | 1 個RTT |
| TLS 協商 | 2 即時傳輸時間 |
| 總計 | 3+ RTT |
在 3G 連線（300 毫秒 RTT）上，傳輸任何資料之前需要近 1 秒的開銷。資源提示消除了大部分內容。
DNS 預取
dns-prefetch 提前解析網域：
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
這會在瀏覽器仍在解析 HTML 的同時啟動網域的 DNS 查找。當瀏覽器遇到來自該來源的資源時，IP 位址已被快取。
何時使用： 簡單地引用外部網域。它是輕量級的－只有 DNS 解析，沒有開啟連線。
預連接
preconnect 更進一步：它執行 DNS 查找 + TCP 握手 + TLS 協商：
<link rel="preconnect" href="https://api.example.com" crossorigin>
使用 CORS 模式載入的資源（字體、取得請求等）需要 crossorigin 屬性。
何時使用： 頁面盡快需要的關鍵第三方來源 - Web 字體提供者、分析端點、CDN。
預連接與預取/預載
這些提示有不同的用途：
| 提示 | 行動 | 使用案例 |
|---|---|---|
| 佔位符_0 | 僅解析 DNS | 低優先權來源 |
| 佔位符_0 | DNS + TCP + TLS | 關鍵的第三方來源 |
| 佔位符_0 | 下載+快取資源 | 未來導覽 |
| 佔位符_0 | 下載目前頁資源 | 目前頁面的關鍵資產 |
想想層次結構：dns-prefetch 最便宜，preconnect 成本更高但節省更多，preload 實際上下載資源。
實用的 HTML 範例
網頁字體（最常見的用例）
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
第三方API
<link rel="preconnect" href="https://api.example.com" crossorigin>
分析和 CDN
<link rel="dns-prefetch" href="https://www.googletagmanager.com">
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
Cloudflare 和 TTFB 注意事項
如果您使用 Cloudflare 或類似的 CDN，資源提示仍然很有價值。儘管 Cloudflare 提供了快速優勢，但新用戶的首次連接仍然需要 DNS 和 TLS。新增 preconnect 透過消除連線設定時間來減少 TTFB（第一個位元組的時間）。
衡量影響：
<!-- Before optimization -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<!-- After optimization -->
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
用 Lighthouse 衡量影響
Lighthouse 審核 「預先連線至所需來源」 下的資源提示。開啟 Chrome DevTools → Lighthouse → 執行審核。尋找：
- 機會：預先連接到所需的來源
- 預計節省：最多幾百毫秒
您也可以使用啟用「停用快取」的 網路面板 進行手動測試：
// Before vs. after — check connection timing
// Target: < 100ms connection time for preconnected origins
最佳實踐
- 將預先連線限制為 3-6 個來源 - 每個來源開啟一個真實的套接字
- 總是為字體和 CORS 資源新增
crossorigin - 不要預先連接到您自己的來源 - 瀏覽器已經這樣做了
- 針對不支援預先連線的瀏覽器，將分層 dns-prefetch 作為後備
- 站點變更後定期與 Lighthouse 進行審核
<!-- Fallback pattern: both hints for wide support -->
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
結論
dns-prefetch 和 preconnect 是省力、高影響力的最佳化，可減少外部資源的連接開銷。使用 dns-prefetch 作為許多來源的輕量級提示，並為 3-6 個最關鍵的第三方來源保留 preconnect。與 preload 和適當的快取結合，這些提示可以將頁面載入時間縮短數百毫秒。