瞭解 rel=preconnect 和 rel=dns-prefetch 資源提示和使用方式。
瀏覽器必須先建立連線，才能向伺服器要求資源。建立安全連線包含三個步驟：
查詢網域名稱，並解析為 IP 位址。
設定連至伺服器的連線。
為安全連線加密。
瀏覽器會在每個步驟中將一段資料傳送至伺服器，而伺服器會傳回回應。從起點到目的地之間的旅程，稱為「來回行程」。
視網路狀況而定，一趟來回行程可能會耗費大量時間。連線設定程序最多可能涉及三次來回行程，如果遇到未最佳化的情況，則會增加更多。
預先瞭解所有事情，可提高應用程式運作速度。這篇文章說明如何使用 <link rel=preconnect> 和 <link rel=dns-prefetch> 這兩個資源提示來達成上述目標。
與 rel=preconnect 及早建立關係
新式瀏覽器會盡可能預測網頁所需的連線，但無法準確預測所有連線。好消息是您可以給予他們 (資源 😉?) 提示。
在 <link> 中加入 rel=preconnect 可告知瀏覽器網頁打算與其他網域建立連線，並希望盡快啟動程序。由於瀏覽器在要求資源時就已經完成設定程序，資源可以更快載入。
資源提示並非強制規定，因此會取得名稱。這些參數可讓您獲得相關資訊，但最終是由瀏覽器決定是否執行。設定並讓連線保持開啟是相當繁複的工作，因此瀏覽器可能會視情況選擇忽略資源提示或部分執行這類提示。
只要在網頁中加入 <link> 標記，就能告知瀏覽器您的意圖：
<link rel="preconnect" href="https://example.com">
提早連線至重要的第三方來源，就能將載入時間縮短 100 到 500 毫秒。這些數據看似不多，但卻會影響使用者感知網頁效能的方式。
rel=preconnect 的用途
知道「資料來源」，但不知道要擷取的「內容」
因版本依附關係，有時可能會遇到您會向特定 CDN 要求資源，但並非確切路徑。
另一種常見的情況是從 圖片 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 資產，preload 連結 (且 fetchpriority 的值為 "high") 仍會讓瀏覽器盡快載入資源。
如果這兩個選項都無法使用 (因為要等到網頁載入後段才會知道確切的資源)，您可以對跨來源資源使用 preconnect，盡可能減少延遲發現資源的影響。
此外，preconnect 的費用比 preload 低，但還是沒有相關風險。如同 preload 提示過多的情況，過多的 preconnect 提示仍會耗用頻寬，因為 TLS 憑證有問題。請勿預先連線至過多來源，否則可能會導致頻寬爭用。
結論
如果您知道即將從第三方網域下載內容，但不知道資源的確切網址，上述兩種資源提示有助於加快網頁速度。例如發布 JavaScript 程式庫、圖片或字型的 CDN。請留意限制，只將 preconnect 用於最重要的資源、其餘的部分仰賴 dns-prefetch，並一律在實際環境中測量影響。