使用跨網站預先擷取功能,加快大型內容繪製 (LCP) 速度。
從 Android 版 Chrome 103 開始,Chrome 會逐步推出私人預先擷取 Proxy 功能,以加快 30% 的速度,加快來自 Google 搜尋和其他參與網站的導覽速度。這項私人預先擷取 Proxy 功能可預先擷取跨來源內容,不需在使用者瀏覽之前將資訊揭露至目的地網站。
請繼續閱讀,瞭解這項功能的運作方式、這項功能如何大幅改善您的網站最大內容繪製 (LCP) 或參照網址網站如何協助使用者加快跨網站瀏覽速度,以達成目標。
私人預先擷取 Proxy 的運作方式
安全的通訊管道
這項功能會使用 CONNECT
Proxy,在 Chrome 與代管預先擷取內容的代管伺服器之間建立安全的通訊管道。這個安全的通訊管道可防止 Proxy 檢查任何資料移轉。值得注意的是,雖然 Private Prefetch Proxy 會辨識主機名稱,藉此建立安全的通訊管道,但不會看到完整網址,資源本身。
此外,由於安全通訊管道是端對端加密處理,中介商無法觀測主機名稱,也無法取得預先擷取網站的內容。最後,Proxy 本身會阻止目標伺服器查看使用者的 IP 位址。
防止識別使用者身分
除了先前介紹的網路層面外,我們也必須防止伺服器在預先擷取時間,透過裝置上先前儲存的資訊來識別使用者。有鑑於此,Chrome 目前限制使用者只能使用私人預先擷取 Proxy 到沒有 Cookie 或其他本機狀態的網站。透過私人預先擷取 Proxy 提出的預先擷取要求會有以下限制:
- Cookie:預先擷取要求不得傳送 Cookie。
- 如果資源設有 Cookie,Chrome 會進行未經認證的擷取,但不會使用回應 (請參閱後續快取一節)。
- 雖然預先擷取要求的回應可能包含 Cookie,但使用者瀏覽預先擷取的網頁時,系統才會儲存這些 Cookie。
- 數位指紋採集:其他可能用於數位指紋採集的表面也會經過調整。舉例來說,預先擷取 Proxy 傳送的
User-Agent
標頭只會涵蓋有限的資訊。
我們期望未來能將 Private Prefetch Proxy 擴展至含有 Cookie 或本機狀態的連結,同時維持相同的隱私權特性。詳情請參閱後續步驟一節。
快取
即使資源已在快取中,Chrome 仍會預先擷取資源,但不會包含 ETag
或 If-Modified-Since
等任何條件式標頭 (這些包含伺服器設定的值,就算沒有 Cookie 也能用來追蹤)。系統會執行這項預先擷取作業,避免用戶端的快取狀態洩漏到預先擷取的網站。此外,只有在使用者決定前往預先擷取的網站時,Chrome 才會將預先擷取的資源提交到快取。
開始使用私人預先擷取 Proxy
網站擁有者
如果使用者沒有 Cookie 或本機狀態,網站擁有者就能運用私密預先擷取 Proxy 來提升成效,不必採取任何行動。根據實驗結果,這是大多數網站的絕佳商機。此外,我們建議讓使用者在載入速度極快的情況下,為首次造訪或不常的訪客留下好印象。根據過往實驗結果,我們看到預先擷取瀏覽方式的 Largest Contentful Paint 速度提升了 20% 到 30% 之間。
我們希望未來能將這項功能擴展到含有 Cookie 或本機狀態的連結,同時維持其隱私權特性。Cookie 所面臨的挑戰,就是可能以難以預測的方式改變使用者體驗。因此,網站擁有者很可能必須選擇啟用或調整網站,才能利用 Private 預先擷取 Proxy 來擷取含 Cookie 的連結。
也就是說,雖然預先擷取要求將保持未經憑證認證,但當使用者瀏覽該網頁時,網頁將可存取 Cookie 和其他本機狀態。開發人員可以善用這項功能,再次啟用個人化功能,以及根據 Cookie 或本機狀態做出的變更。或者,開發人員可能也會想宣告某些資源,最好能在不使用 Cookie 的情況下,依原樣預先擷取及使用資源,也就是不必仰賴 Cookie 的資源。請參閱後續步驟一節,進一步瞭解我們的計畫及擬定計畫。
受限於地理區域的內容或服務
如果網站因使用者的 IP 位址在各市場有不同行為 (例如不同內容或選擇性存取),您可能會想知道如何處理 Private Prefetch Proxy 的預先擷取要求。請務必瞭解,Private Prefetch Proxy 的技術是由遍布全球的數個伺服器提供技術,且該 Proxy 的 IP 會位於使用者啟動預先擷取時所在的國家/地區。
因此,我們建議採取以下做法:
- 運用
Sec-Purpose: Prefetch; anonymous-client-ip
HTTP 標頭,找出來自私人預先擷取 Proxy 的預先擷取要求。 - 針對發出要求的私人預先擷取 Proxy,查詢其 IP 位址的地理位置。如需最新的推出地理位置清單和對應的 IP 位址,請參閱這項資源。
- 根據這個地理位置的附加市場提供資源。
車流控管
根據過去的實驗結果,我們知道這項功能造成主要資源 (例如 HTML 文件) 額外請求的次數通常不到 2%。不過,如果您具有謹慎考量,可以使用流量建議的分數欄位,來控制 Private Prefetch Proxy 可以傳遞的流量。如果要先從 0.3 等小分數 (也就是 30%) 開始,然後將下列 JSON 加到 /.well-known/traffic-advice
檔案 (需要以 application/trafficadvice+json
MIME 類型提供),接著逐步提高為 1.0 (也就是 100%):
[{
"user_agent": "prefetch-proxy",
"fraction": 0.3
}]
fraction
欄位是介於 0.0 (完全不預先擷取) 和 1.0 (100% 的預先擷取要求) 之間的浮動值。
您也可以使用以下設定完全停用此功能:
[{
"user_agent": "prefetch-proxy",
"disallow": true
}]
/.well-known/traffic-advice
檔案是由 Proxy (而非用戶端) 擷取,然後根據一般 HTTP 快取語意,在 Proxy 進行快取。如要獲得更多彈性,例如資料存取量突然激增,建議您暫時拒絕含有 503 狀態碼的預先擷取要求 (Sec-Purpose: prefetch;anonymous-client-ip
),並在回應中設定 Cache-Control: no-store
標頭。您也可以新增 Retry-After
標頭,指示 Chrome 要等待多久才會重試預先擷取要求。
推薦人網站擁有者
如果您的網站擁有大量連至其他網站的連結,不妨使用 Private Prefetch Proxy 功能,加快這類跨來源瀏覽的速度。你必須為網頁新增推測規則,Chrome 才會知道你認為應透過私密預先擷取 Proxy 預先擷取哪個網頁。以下為簡單的範例:
<script type="speculationrules">
{
"prefetch": [
"source": "list",
"urls": ["https://example.com/index.html"],
"requires": ["anonymous-client-ip-when-cross-origin"]
]
}
</script>
後續步驟
這項功能只是第一步。我們希望根據社群的意願和意見回饋,拓展及改善這項功能。舉例來說,歡迎提供意見回饋,瞭解如何擴充包含 Cookie 和本機狀態的連結,以盡可能減少開發人員的不便,或是提高這項功能對參照網址網站實用性的方法。
閱讀完整內容
- 為網路管理員預先擷取 Proxy。
- 交通建議說明
- 交通建議有趣
- WICG GitHub 存放區,用於提供導航推測相關作業。
- 最初導入私人預先擷取 Proxy 概念的 Chromium 網誌。