使用跨網站預先擷取功能,加快最大內容繪製 (LCP) 作業。
從 Android 版 Chrome 103 開始,Chrome 將逐步推出私人的預先擷取 Proxy 功能,讓經由 Google 搜尋和其他參與網站順暢瀏覽的速度加快 30%。這項私人的預先擷取 Proxy 功能可預先擷取跨來源內容,而不會在使用者瀏覽前向他們顯示使用者資訊。
歡迎繼續閱讀相關資訊,瞭解這項功能的運作方式、這項功能如何協助您大幅改善網站的最大內容繪製 (LCP),或是參照網址網站如何協助使用者加快跨網站瀏覽速度,進而達成目標。
私人預先擷取 Proxy 的運作方式
安全的通訊管道
這項功能會使用 CONNECT
Proxy,在 Chrome 和代管要預先擷取內容的伺服器之間建立安全的通訊管道。這個安全通訊管道可防止 Proxy 檢查任何資料移轉。值得一提的是,雖然私人預先擷取 Proxy 必須查看主機名稱,才能建立安全的通訊管道,但卻看不到完整網址或資源本身。
此外,由於安全通訊管道採用端對端加密方式,因此中介者無法觀察主機名稱或預先擷取網站的內容。最後,Proxy 本身也會禁止目的地伺服器查看使用者的 IP 位址,
防止使用者身分識別
除了前述的網路層面之外,我們也必須防止伺服器在預先擷取時間,透過先前儲存在使用者裝置上的資訊來識別使用者。因此,Chrome 目前針對使用者沒有 Cookie 或其他本機狀態的網站,限制使用私人預先擷取 Proxy。以下是透過私人預先擷取 Proxy 發出的預先擷取要求所適用的限制:
- Cookie:預先擷取要求不得攜帶 Cookie。
- 數位指紋採集:其他可用於指紋識別的表面也會有所調整。舉例來說,由預先擷取 Proxy 傳送的
User-Agent
標頭只會承載部分資訊。
我們日後希望能擴大私人預先擷取 Proxy,改為使用 Cookie 或本機狀態的連結,同時保有相同的隱私權特性。詳情請參閱後續步驟一節。
快取
即使資源已在快取中,Chrome 也會預先擷取資源,但不會附加任何條件標頭,例如 ETag
或 If-Modified-Since
(這些包含伺服器設定值,即使沒有 Cookie 也能用於追蹤)。系統會執行這項預先擷取作業,以免用戶端的快取狀態外洩至預先擷取的網站。此外,如果使用者決定前往預先擷取的網站,Chrome 只會將預先擷取的資源提交至快取。
開始使用私人預先擷取 Proxy
網站擁有者專用
網站擁有者不必採取任何行動,即可從使用者沒有 Cookie 或本機狀態的連結中,透過私人預先擷取 Proxy 賺取收益。從我們的實驗功能來看,這對大多數網站而言都是大好機會。此外,透過提供超快速載入體驗,吸引新訪客或鮮少訪客曝光也是個好方法。從過往實驗中,我們發現在預先擷取導覽畫面中,最大內容繪製速度加快了 20% 到 30%。
未來我們希望能將這項功能擴展到包含 Cookie 或本機狀態的連結,同時保有隱私權特性。Cookie 的難處在於,它們可能會用來以難以預測的方式改變使用者體驗。因此,網站擁有者多半可能會選擇啟用或調整網站,才能運用私密預先擷取 Proxy 提供含 Cookie 的連結。
確切來說,預先擷取要求不會經過憑證,但當使用者瀏覽 Cookie 時,網頁仍可存取 Cookie 和其他本機狀態。開發人員可以運用這項功能,將個人化設定重新加回個人化設定,並根據 Cookie 或本機狀態進行變更。或者,開發人員也可能有興趣直接宣告特定資源,方便預先擷取與使用,而不使用 Cookie (也就是不依賴任何 Cookie 的資源)。請參閱後續步驟一節,進一步瞭解相關資訊及製定計畫。
取決於地理位置的內容或服務
如果您的網站會根據使用者的 IP 位址,在各個市場的運作方式不同 (例如內容不同或選擇性存取),您可能會想知道如何處理私人預先擷取 Proxy 的預先擷取要求。請務必瞭解,非公開預先擷取 Proxy 是由遍布全球的數個伺服器提供支援,且 Proxy 的 IP 會以地理位置標示至使用者啟動預先擷取的國家/地區。
有鑑於此,我們建議採取以下做法:
- 透過具備
Sec-Purpose: Prefetch; anonymous-client-ip
HTTP 標頭,找出私人預先擷取 Proxy 發出的預先擷取要求。 - 查詢透過 IP 位址發出要求的不公開預先擷取 Proxy 的地理位置。如需推出地區的最新清單和對應 IP 位址,請參閱這項資源。
- 根據與這個特定地理位置相關聯的市場提供資源。
車流控管
從過往的實驗中,我們得知,這項功能通常不到 2% 的主資源 (例如 HTML 文件) 要求。即便如此,如果您擔心自身的問題,可以使用流量建議的分數欄位來控制 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 要等待多久才能重試預先擷取要求。
參照網址網站擁有者
如果您經營的網站包含許多連至其他網站的連結,您可能會有興趣使用私人預先擷取 Proxy 功能,加快跨來源瀏覽速度。您必須在網頁中加入推測規則,讓 Chrome 知道您認為應該透過私人預先擷取 Proxy 預先擷取的網頁。以下提供一個簡單的範例:
<script type="speculationrules">
{
"prefetch": [
"source": "list",
"urls": ["https://example.com/index.html"],
"requires": ["anonymous-client-ip-when-cross-origin"]
]
}
</script>
後續步驟
這項功能只是第一步。我們會根據社群的意願和意見回饋,擴大和改善這項功能。舉例來說,我們很樂意提供意見,說明如何擴展至含有 Cookie 和本機狀態的連結,盡可能減少開發人員的困擾,或是如何讓這項功能在參照網址網站上更實用。