Chrome 的私密預先擷取 Proxy

Katie Hempenius
Katie Hempenius
X
Kenji Baheux
Kenji Baheux
Michael Buettner
Michael Buettner

使用跨網站預先擷取功能，加快大型內容繪製 (LCP) 速度。

從 Android 版 Chrome 103 開始，Chrome 會逐步推出私人預先擷取 Proxy 功能，以加快 30% 的速度，加快來自 Google 搜尋和其他參與網站的導覽速度。這項私人預先擷取 Proxy 功能可預先擷取跨來源內容，不需在使用者瀏覽之前將資訊揭露至目的地網站。

請繼續閱讀，瞭解這項功能的運作方式、這項功能如何大幅改善您的網站最大內容繪製 (LCP) 或參照網址網站如何協助使用者加快跨網站瀏覽速度，以達成目標。

私人預先擷取 Proxy 的運作方式

安全的通訊管道

這項功能會使用 CONNECT Proxy，在 Chrome 與代管預先擷取內容的代管伺服器之間建立安全的通訊管道。這個安全的通訊管道可防止 Proxy 檢查任何資料移轉。值得注意的是，雖然 Private Prefetch Proxy 會辨識主機名稱，藉此建立安全的通訊管道，但不會看到完整網址，資源本身。

動畫：顯示透過 Proxy 的資料流。
透過 CONNECT 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 會位於使用者啟動預先擷取時所在的國家/地區。

因此，我們建議採取以下做法：

  1. 運用 Sec-Purpose: Prefetch; anonymous-client-ip HTTP 標頭，找出來自私人預先擷取 Proxy 的預先擷取要求。
  2. 針對發出要求的私人預先擷取 Proxy，查詢其 IP 位址的地理位置。如需最新的推出地理位置清單和對應的 IP 位址，請參閱這項資源。
  3. 根據這個地理位置的附加市場提供資源。

車流控管

根據過去的實驗結果，我們知道這項功能造成主要資源 (例如 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 和本機狀態的連結，以盡可能減少開發人員的不便，或是提高這項功能對參照網址網站實用性的方法。

閱讀完整內容