瞭解 rel=preconnect 和 rel=dns-prefetch 資源提示，以及如何使用這些提示。
瀏覽器必須先建立連線，才能向伺服器要求資源。建立安全連線的程序包含三個步驟：
查詢網域名稱並解析為 IP 位址。
設定與伺服器的連線。
加密連線以確保安全。
在每個步驟中，瀏覽器都會將一小段資料傳送至伺服器，而伺服器會傳回回應。從出發地到目的地再返回的旅程稱為「來回行程」。
視網路狀況而定，單一往返可能需要大量時間。連線設定程序最多可能需要三次往返，如果未經過最佳化，則可能需要更多次。
預先處理所有這些事項，可大幅加快應用程式的執行速度。本文說明如何使用 <link rel=preconnect> 和 <link rel=dns-prefetch> 這兩項資源提示達成目標。
及早與 rel=preconnect 建立連結
新式瀏覽器會盡量預測網頁需要的連線，但無法準確預測所有連線。好消息是，您可以提供 (資源 😉) 提示。
在 <link> 中加入 rel=preconnect，可告知瀏覽器您的網頁打算與其他網域建立連線，並希望盡快啟動程序。由於瀏覽器要求資源時，設定程序已完成，因此資源載入速度會更快。
資源提示並非必要指令，因此得名。這些 API 會提供您希望發生的動作相關資訊，但最終是否執行這些動作，取決於瀏覽器。建立及維持連線需要大量工作，因此瀏覽器可能會視情況選擇忽略資源提示或部分執行。
如要向瀏覽器傳達意圖，只要在網頁中加入 <link> 標記即可：
<link rel="preconnect" href="https://example.com">
及早連線至重要的第三方來源，可將載入時間縮短 100 到 500 毫秒。這些數字看似很小，但對使用者對網頁效能的觀感卻有顯著影響。
「rel=preconnect」的應用實例
知道從哪裡擷取，但不知道擷取什麼
由於依附元件有版本，有時您會知道要從特定 CDN 要求資源，但不知道確切路徑。
另一個常見情況是從圖片 CDN 載入圖片，這時圖片的確切路徑取決於媒體查詢，或使用者瀏覽器上的執行階段功能檢查。
在這些情況下，如果擷取的資源很重要，您會希望預先連線至伺服器，盡可能節省時間。在網頁要求檔案前，瀏覽器不會下載檔案，但至少可以預先處理連線相關作業，讓使用者不必等待多次往返。
串流媒體
另一個例子是從不同來源串流媒體時，您可能想節省連線階段的時間，但不一定會立即開始擷取內容。
視網頁處理串流內容的方式而定，您可能需要等到指令碼載入完畢，並準備好處理串流時，再執行這項操作。預先連線有助於縮短等待時間，讓您在準備好開始擷取時，只需進行一次來回行程。
如何導入 rel=preconnect
如要啟動 preconnect，其中一種方法是在文件的 <head> 中加入 <link> 標記。
<head>
<link rel="preconnect" href="https://example.com">
</head>
預先連線只對來源網域以外的網域有效，因此不應在網站上使用。
您也可以透過 Link HTTP 標頭啟動預先連線：
Link: <https://example.com/>; rel=preconnect
部分類型的資源 (例如字型) 會以匿名模式載入。您必須使用 preconnect 提示設定這些屬性的 crossorigin 屬性：
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
如果省略 crossorigin 屬性，瀏覽器只會執行 DNS 查詢。
使用 rel=dns-prefetch 提早解決網域名稱問題
您會記住網站名稱，但伺服器會記住 IP 位址。這就是網域名稱系統 (DNS) 的存在意義。瀏覽器會使用 DNS 將網站名稱轉換為 IP 位址，這個程序 (網域名稱解析) 是建立連線的第一步。
如果網頁需要連線至許多第三方網域，預先連線所有網域反而會適得其反。建議只針對最重要的連線使用 preconnect 提示。對於其餘所有項目，請使用 <link rel=dns-prefetch> 節省第一個步驟 (DNS 查詢) 的時間，這通常需要 20 到 120 毫秒。
DNS 解析的啟動方式與 preconnect 類似：在文件的 <head> 中加入 <link> 標記。
<link rel="dns-prefetch" href="http://example.com">
dns-prefetch 的瀏覽器支援與 preconnect 支援略有不同，因此 dns-prefetch 可做為不支援 preconnect 的瀏覽器後備選項。
<link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com">
<link rel="preconnect dns-prefetch" href="http://example.com">
<link> 代碼中導入 dns-prefetch 後備機制，會導致 Safari 發生錯誤，preconnect 會遭到取消。
對最大內容繪製 (LCP) 的影響
使用 dns-prefetch 和 preconnect 可讓網站縮短連線至其他來源所需的時間。最終目標是盡可能縮短從其他來源載入資源的時間。
就最大內容繪製 (LCP) 而言，資源越快可供探索越好，因為LCP 候選項目是使用者體驗的重要環節。在 LCP 資源中加入 fetchpriority 值 "high"，向瀏覽器指出這項資產的重要性，讓瀏覽器提早擷取，進一步提升 LCP。
如果無法立即顯示 LCP 資源，preload 連結 (同樣具有 fetchpriority 值 "high") 仍可讓瀏覽器盡快載入資源。
如果這兩種選項都不適用 (因為確切的資源要到載入網頁後期才會得知)，您可以使用跨來源資源的 preconnect，盡可能減少資源延遲探索的影響。
此外，就頻寬用量而言，preconnect 比 preload 便宜，但仍有風險。與過多的 preload 提示一樣，過多的 preconnect 提示仍會耗用 TLS 憑證的頻寬。請注意，不要預先連線至太多來源，否則可能會導致頻寬爭用。
結論
如果您知道自己很快就會從第三方網域下載內容，但不知道資源的確切網址，這兩項資源提示就很有用，可提升 Page Speed。例如，散布 JavaScript 程式庫、圖片或字型的 CDN。請留意限制，只對最重要的資源使用 preconnect，其餘則依賴 dns-prefetch，並隨時評估實際影響。