瞭解 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 要求資源，而非確切的路徑。
另一個常見的情況是從 image 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，且一律會在實際環境中測量影響。