瞭解 rel=prefetch 資源提示及其使用方式。
發布日期：2019 年 9 月 12 日，上次更新日期：2025 年 2 月 8 日
研究顯示，載入時間越短，轉換率就越高，使用者體驗也越好。如果您瞭解使用者在網站上的瀏覽路徑，以及他們接下來可能會造訪哪些網頁，就可以提前下載這些網頁的資源，進而縮短日後的瀏覽載入時間。
本指南將說明如何透過 <link rel=prefetch> 實現此目標，讓您以有效率的方式實作預先載入功能。
使用 rel=prefetch 改善網站效能
將 <link rel=prefetch> 加入網頁，可讓瀏覽器下載使用者日後可能需要的部分資源 (例如指令碼或 CSS 檔案)：
<link rel="prefetch" href="/css/styles.css">
prefetch 提示會為不立即需要的資源耗用額外位元組，因此請謹慎套用這項技巧；只有在您確信使用者需要資源時，才預先擷取資源。建議在使用者連線速度緩慢時，不要預先載入。您可以使用 Network Information API 偵測這類情況。
用途
預先擷取有許多用途，可透過預先下載資源來加快網頁速度。
預先擷取後續網頁
在可預測後續網頁的情況下預先擷取 HTML 文件，這樣一來，當使用者點選連結時，系統就能立即載入網頁。
舉例來說，在產品資訊頁面中，您可以預先擷取清單中熱銷產品的頁面。在某些情況下，預測下一個導覽路徑會更容易。在購物車頁面中，使用者造訪結帳頁面的機率通常很高，因此這是預先載入的理想候選項目。
雖然預先載入資源會使用額外的頻寬，但可以改善大多數的效能指標。由於文件要求結果會命中快取，因此首次讀取位元組時間 (TTFB) 通常會大幅降低。由於 TTFB 會降低，後續的時間指標 (包括 Largest Contentful Paint (LCP) 和 First Contentful Paint (FCP)) 也通常會降低。
預先擷取靜態素材資源
在可預測使用者可能造訪的後續部分時，預先擷取靜態資產 (例如指令碼或樣式表)。當這些素材資源在多個網頁上共用時，這項功能就特別實用。
舉例來說，Netflix 會利用使用者在登出頁面上停留的時間，預先擷取 React，以便在使用者登入後使用。因此，未來導覽的互動準備時間縮短了 30%。
預先載入靜態素材資源對成效指標的影響取決於所預先載入的資源：
- 預先載入圖片可大幅降低 LCP 圖片元素的 LCP 時間。
- 預先擷取樣式表可改善 FCP 和 LCP，因為下載樣式表所需的網路時間會消除。由於樣式表會阻斷轉譯作業，因此在預先擷取時，樣式表可以降低 LCP。如果後續網頁的 LCP 元素是使用
background-image屬性要求的 CSS 背景圖片，系統也會將圖片當做預先載入樣式表格的依附資源進行預先載入。 - 預先擷取 JavaScript 可讓系統更快處理預先擷取的指令碼，而非在瀏覽期間先由網路擷取。這可能會影響網頁的 Interaction to Next Paint (INP)。如果使用 JavaScript 在用戶端轉譯標記，則可透過減少資源載入延遲來改善 LCP，並提早執行包含網頁 LCP 元素的標記用戶端轉譯作業。
- 預先擷取目前網頁未使用的網路字型，可以消除版面配置偏移。在使用
font-display: swap;的情況下，系統會省略字型交換期間，加快文字轉譯速度，並消除版面配置位移。如果日後的網頁使用預先載入的字型，且該網頁的 LCP 元素是使用網路字型的文字區塊，則該元素的 LCP 也會變得更快。
預先擷取隨選 JavaScript 區塊
程式碼分割 JavaScript 套件可讓您一開始只載入部分應用程式，並延後載入其餘部分。如果您使用這項技術，可以將預先載入套用至不立即必要，但可能很快就會要求的路徑或元件。
舉例來說，如果網頁包含一個按鈕，而這個按鈕會開啟一個內含表情符號挑選器的對話方塊，您可以將該網頁分成三個 JavaScript 區塊：home、dialog 和 picker。您可以先載入首頁和對話方塊，再視需要載入選擇器。您可以使用 webpack 等工具，指示瀏覽器預先擷取這些隨選區塊。
如何實作 rel=prefetch
實作 prefetch 最簡單的方法，就是在文件的 <head> 中加入 <link> 標記：
<head>
...
<link rel="prefetch" href="//css/styles.css">
...
</head>
您也可以使用 Link HTTP 標頭啟動預先載入作業：
Link: </css/style.css>; rel=prefetch
在 HTTP 標頭中指定預先載入提示的好處是，瀏覽器不必剖析文件即可找到資源提示，在某些情況下可提供小幅改善。
使用 webpack 魔法註解預先擷取 JavaScript 模組
webpack 可讓您為使用者很快就會造訪或使用的路徑或函式，預先擷取相關程式碼。
以下程式碼片段會延遲載入 lodash 程式庫中的排序函式，以便排序表單提交的一組數字：
form.addEventListener("submit", e => {
e.preventDefault()
import('lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
您可以預先載入這項資源，而非等待「submit」事件發生後再載入此函式，這樣一來，當使用者提交表單時，這項資源就更有可能出現在快取中。webpack 允許您在 import() 中使用魔法註解：
form.addEventListener("submit", e => {
e.preventDefault()
import(/* webpackPrefetch: true */ 'lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
這會指示 webpack 將 <link rel="prefetch"> 標記插入 HTML 文件：
<link rel="prefetch" href="1.bundle.js">
預先載入隨選區塊的效能優勢有點微妙，但一般來說，您可以預期對依賴這些隨選區塊的互動反應會更快，因為這些區塊會立即可用。視互動性質而定，這可能會為網頁的 INP 帶來好處。
預先擷取功能通常也會影響整體資源優先順序。預先擷取資源時，系統會以盡可能低的優先順序執行。因此，任何預先擷取的資源都不會與目前網頁所需的資源爭奪頻寬。
使用 quicklink 和 Guess.js 進行智慧預先載入
您也可以使用底層使用 prefetch 的程式庫，實作更聰明的預先載入功能：
- quicklink 會使用 Intersection Observer API 偵測連結何時進入檢視區，並在閒置時間期間預先擷取已連結的資源。額外資訊：快速連結的大小不到 1 KB！
- Guess.js 會使用分析報表建立預測模型，用於智慧預先載入使用者可能需要的內容。
如果使用者使用速度緩慢的網路，或是已啟用 Save-Data，quicklink 和 Guess.js 都會使用 Network Information API 避免預先載入。
預先擷取內容
資源提示並非強制執行的操作說明，瀏覽器會自行決定是否執行，以及執行的時間。
您可以在同一頁面中多次使用預先載入功能。瀏覽器會在閒置時，將所有提示排入佇列，並要求每項資源。在 Chrome 中，如果預先載入尚未完成載入，且使用者前往預先載入資源的目的網頁，瀏覽器就會將載入中的資源視為導覽 (其他瀏覽器供應商可能會以不同的方式實作這項功能)。
預先擷取作業的優先順序為 'Lowest'，因此預先擷取的資源不會與目前網頁所需的資源爭奪頻寬。
如果資源可快取，預先擷取的檔案會儲存在 HTTP 快取中，否則會遭到捨棄，不會用於快取。
結論
使用 prefetch 可提前下載未來所需的資源，大幅提升網站的網路效能。大多數新式瀏覽器都支援 prefetch。這項技術需要載入可能不會使用的額外位元組，因此請謹慎使用；請只在必要時使用，並且最好只在快速網路上使用。