透過跨網站預先擷取功能加快 LCP 的速度

介紹現成技術。

Kenji Baheux
Kenji Baheux
Michael Buettner
Michael Buettner
Devin Mullins
Devin Mullins

網頁載入速度的重要性為何?

大多數使用者常認為網頁載入速度緩慢是造成困擾的主要原因 (Google 進行的使用者研究中有 54%)。因此,這應該不是很令人意外,因為載入網頁越快可以帶來更好的業務成果。事實上,如果訪客在與網站互動之前就有挫折感,他們就不太可能停留了很長一段時間來重視價值。事實上,Google 再次針對 254 個電子商務、金融和旅遊網站進行研究,結果顯示,在 2 秒內載入的網站,轉換率提高 15%。

加快最大內容繪製 (LCP)

一如既往,您無法改善未衡量的指標。針對網站上的使用者體驗,我們認為網站體驗核心指標是一組以使用者為中心的指標,能夠擷取使用者體驗的基本要素。具體來說,最大內容繪製 (LCP) 會回報顯示使用者看到最大文字或圖片區塊所需的時間,藉此評估網頁的載入效能。為提供良好的使用者體驗,LCP 應在網頁初次開始載入後的 2.5 秒內導入 (也就是良好的 LCP 門檻)。

我們來看看一般網頁的 LCP。

網頁載入瀑布。
載入網頁所需的一般刊登序列

當使用者造訪網頁時,瀏覽器會向伺服器要求 HTML。伺服器會回應 HTML,讓瀏覽器更瞭解接下來要擷取什麼,包括 CSS、JavaScript、字型和圖片。隨著這些回應傳回,瀏覽器也必須進行評估,最後再於網頁上安排及繪製元件。不過,大多數時間都是花在等待這些封包從裝置傳輸到伺服器,然後再回到裝置時,我們的資料 (Android 版 Google Chrome 版;中位數) 顯示,約有 40% 的使用者可見延遲時間,通常是由瀏覽器在等待伺服器傳回第一個位元組的時間。

預先擷取的威力

如果其中一部程式可以預先擷取所有檔案 (也就是在使用者造訪網頁前擷取),便能大幅提升速度,在顯示網頁前僅須完成幾項工作:評估、計算版面配置和繪圖。

簡約的瀑布。
在預先載入所有資源後,刊登序列就能完美運作。

鑒於先前共用的資料,其他解決方案也可以預先擷取主要資源,但仍能大幅加快網頁載入速度。在相同網站案例中,這種技術可與原始物件 (例如 rel=prefetch) 搭配使用。然而,如果是跨網站情境,就沒那麼簡單了。

跨網站瀏覽

雖然預先擷取功能已經一段時間,但在使用者離開某網站的情況下預先擷取網頁時,必須額外考量這點。

假設參照網址網站指示瀏覽器預先擷取其他網站的網頁。使用者很顯然,按一下此預先擷取網頁的連結後,可以大幅加快網頁載入速度,為他們帶來更好的使用者體驗。不過,如果使用者從未點選這個連結,該怎麼辦?在參照連結網站上瀏覽某個主題時,這類使用者不會預期自己對某個主題感興趣。但這卻是一項重大風險,因為預先擷取要求會像任何其他一般要求一樣,一併傳送使用者的 IP 位址和 Cookie (如果有的話)。

解決方案

為了提供能保護隱私權的跨網站預先擷取功能,我們在過去 3 年裡開發了兩種解決方案:私人預先擷取 ProxySigned Exchange (SXG)。此外,我們也進行了大規模的實驗,確保跨來源預先擷取能大幅提升速度。具體來說,當我們研究可能且安全預先擷取主要 HTML 以供使用者下次瀏覽時使用時,我們發現網頁載入「良好」LCP 時,網頁載入速度增加了 14 個百分點。

重要考量事項

雖然 Private Prefetch Proxy 和 Signed Exchange 就能解決相同的使用情境,但每種技術各有優缺點。因此,最好的選擇還是取決於網站的特定需求。為協助您瞭解權衡利弊,以下各節將說明啟用跨網站預先擷取功能,以及選擇兩項可用技術時的兩大考量。您也可以在每種技術的深入報導文章中找到更多詳細資訊。

回訪客

使用者首次造訪網站時,可輕鬆啟用「跨網站預先擷取」功能。回訪者的個人化程度取決於網站上的個人化程度。事實上,基於隱私權考量,跨網站預先擷取要求無法納入 Cookie。

  • 對於初次造訪的訪客,這項限制並不會造成任何挑戰,因為這些使用者沒有可使用的 Cookie。因此,您不必修改網站,就能為這些使用者啟用跨網站預先擷取功能。
  • 如果您想為回訪者啟用跨網站預先擷取功能,並讓您的網站根據 Cookie 經過個人化設定,則必須在使用者瀏覽後延遲載入這些個人化元素。這項功能的運作原理是使用者在瀏覽網站時,因為使用者明確選擇造訪您的網站,不再需要對 Cookie 設下限制。因此,網站可在瀏覽時照常存取 Cookie。如需具體指引,請參閱這些延遲載入最佳做法
    • 如果您已經將個人化編碼直接編入 HTML 中,您仍然可以在有 Cookie 的情況下繼續進行,而延遲載入則作為預先擷取網頁的備用策略。
    • 如果您的網站不是根據 Cookie 提供個人化內容,或者不是重要的個人化設定,則您可以選擇向新訪客提供與新訪客相同的內容。

目前,私人預先擷取 Proxy 僅對首次訪客 (不含 Cookie 的連結) 啟用,持續開發,將涵蓋範圍擴大至回訪者 (含有 Cookie 的連結)。另一方面,Signed Exchange 已支援初次和回訪客的跨網站預先擷取功能 (適用上述做法)。

透過預先擷取的額外資料提供

啟用跨網站預先擷取功能可能會導致額外的資料提供。事實上,如果參照網址預先擷取了您的網頁,但使用者並未按下連結,這些流量應該也會獲得額外的流量。

  • 為了降低這項風險,使用者可以要求參照網址對預先擷取要求降低侵擾。同樣地,參照網址或瀏覽器只要著重於相對輕量但重要的資源 (例如主要資源、重要 CSS 或 JavaScript 子資源),就能減輕這個問題的發生。因此,這麼做應在速度優勢與額外流量之間取捨。
  • 或者,您也可以選擇採用額外快取,藉此抵銷這類流量 (詳情請參閱 Signed Exchange 的這個部分)。缺點是,快取內容時間過長可能會導致使用者看到較舊的資訊。基本上,這種做法可以在額外資料提供與內容更新間隔之間取得平衡。

為做出最佳決定,請想想網站目前的上傳頻率應從最大更新到極少,再多提出一些要求。這個問題的答案終究會因業務和使用者的需求而異。

開始使用

這些技術已與 Google 搜尋整合,因此網站可以立即改善其 LCP。我們希望這麼做也能鼓勵其他熱門的推薦人追蹤您的舞步,同時加快他們瀏覽網站的速度!

雖然這兩種技術都能解決相同的用途,但對於先前說明的幾個關鍵考量因素,都有不同的優缺點。您甚至可以考慮從一項技術著手,根據自身需求或對福利的重視程度不斷演進,改用另一項技術。請深入瞭解下列技術,以找出針對您情況的最佳發展路徑: