《The Economic Times》(經濟時間) 如何通過網站體驗核心指標的要求,同時達到整體跳出率提高 43% 的水準

針對 The Economic Times 網站進行最佳化網站體驗核心指標,可大幅改善使用者體驗,並大幅降低整個網站的跳出率。

Anshu Sharma
Anshu Sharma
Prashant Mishra
Prashant Mishra
Sumit Gugnani
Sumit Gugnani

網際網路速度日趨快速,使用者期待網站反應和運作速度比以往更快。《The Economic Times》的每月活躍使用人數超過 4,500 萬。藉由針對整個網域 (AMP 和非 AMP 網頁) 網站的網站體驗核心指標進行最佳化,我們得以大幅降低跳出率並改善閱讀體驗。

我們著重於最大內容繪製 (LCP)累計版面配置位移 (CLS),因為這兩者是為使用者提供良好閱讀體驗的關鍵。按照下述多項效能修正後,我們在幾個月內大幅改善了 Chrome 使用者實驗 (CrUX) 報告指標的經濟時間。

整體而言,CLS 改善率從 0.25 提高至 0.09 了 250%。 整體而言,LCP 改善了 80%,從 4.5 秒提高到 2.5 秒。

此外,從 2020 年 10 月到 2021 年 7 月,「不良」範圍內的 LCP 值也降低了 33%:

LCP 分佈情形,按月份分類,從 2020 年 10 月開始,到 2021 年 7 月結束。歸類為「不良」的 LCP 值數量已從 15.03% 降至 10.08%。

此外,在相同時間範圍內,「不良」範圍內的 CLS 值減少了 65%,而「良好」範圍內的 CLS 值增加了 20%:

CLS 分佈情形,按月份分類,是從 2020 年 10 月開始,到 2021 年 7 月結束。歸類為「不良」的 CLS 值數量從 25.92% 降至 9%,歸類為「良好」的 CLS 值數量則從 62.62% 增加為 76.5%。

最終的成果是《經濟時間》先前並未達到網站體驗核心指標門檻,現在整個來源都已通過網站體驗核心指標的門檻,整體跳出率也降低了 43%

The Economic Times 的「Article」(經濟時間) 文章頁面的動畫前後對照。

LCP 是什麼?我們如何改進?

如果想要改善使用者體驗和提高載入速度,最大元素就是最相關的元素。首次顯示內容所需時間 (FCP) 等成效指標只會擷取網頁載入初期體驗。另一方面,LCP 會回報向使用者顯示最大圖片、文字或影片區段的轉譯時間。

除了改用更快速的 DNS 供應商並將圖片最佳化之外,我們還運用了幾項技術來改善 LCP。

優先處理關鍵要求

由於所有新式瀏覽器都會限制並行要求的數量,因此開發人員需要優先載入關鍵內容。如要載入複雜的網頁,我們必須下載標題元素、CSS、JavaScript 資源、主頁橫幅、文章內文、留言、其他相關新聞、頁尾和廣告等素材資源。我們評估了 LCP 需要的元素,並決定優先載入這些項目,以改善 LCP。我們也會延後不在初始頁面轉譯程序的呼叫。

文字外觀

我們實驗了 font-display 資源,因為這會影響 LCP 和 CLS。我們試用過 font-display: auto;,但後來改用 font-display: swap;。這樣一來,系統一開始會以最合適且可用的字型顯示文字,下載後就會切換至該字型。因此,我們的文字可以快速顯示,不受網路速度影響。

壓縮效果佳

Brotli 是 Gzip 和 Deflate 的替代壓縮演算法。我們更換了字型和資產,並將伺服器壓縮從 Gzip 改為 Brotli,以縮減檔案大小:

  • JavaScript 檔案比 Gzip 小 15%。
  • HTML 檔案在 Gzip 中比 Gzip 小 18%。
  • CSS 和字型檔案比 Gzip 小 17%。

預先連線至第三方網域

preconnect 可能會佔用寶貴的 CPU 作業時間,並延遲其他重要資源,特別是在安全連線時,請謹慎使用。

不過,如果知道會擷取第三方網域資源的情況,preconnect 就是很好的選擇。如果只是偶爾發生在高流量網站上,preconnect 可能會觸發不必要的 TCP 和 TLS 工作。因此,dns-prefetch 較適合預先執行 DNS 查詢的第三方資源 (例如社群媒體、數據分析等)。

將程式碼分段

在網站的頭部中,我們只載入含有商業邏輯基本要素的資源,或對不需捲動位置轉譯網頁具有「至關重要」的資源。再者,我們透過程式碼分割功能將程式碼分成幾個區塊。這種做法有助於進一步改善網頁 LCP。

改善快取

我們針對所有前端路徑新增 Redis 層,可從快取提供範本。這樣可以縮短伺服器的運算時間,並為每個要求建構整個使用者介面,進而降低後續要求中的 LCP。

概述 LCP 目標和成就

在展開最佳化專案之前,該團隊以 4.5 秒的基準測試其 LCP 分數 (基準為第 75 個百分位數,根據 CrUX 報告欄位資料),最佳化專案完成後會縮減為 2.5 秒

LCP 分佈情形在 2020 年 9 月至 2021 年 6 月。整體而言,在 Chrome 使用者體驗報告中,觀察到的 LCP 值中第 75 個百分位數,「不良」的 LCP 值降低了 8.97%。第 75 個百分位數時的 LCP 時間整體減少了 200 毫秒,其中 77.63% 的 LCP 值落在「良好」範圍內。
資料來源:《The Economic Times’s 整體 LCP》的 CrUX 報告

CLS 是什麼?我們如何改進?

你在瀏覽網站時,是否曾注意到網頁內容突然流動?其中一個原因是在尺寸不明的網頁上以非同步方式載入媒體 (圖片、影片、廣告等)。媒體資源載入完畢後,網頁的版面配置就會立即變動。

我們將探討《經濟時間》(The Economic Times) 網站,瞭解我們如何改善 CLS。

使用預留位置

我們針對已知尺寸的廣告單元和媒體元素,使用已設定樣式的預留位置,以避免在廣告程式庫載入及顯示網頁廣告時,版面配置改變。如此可確保預留廣告的空間,避免版面配置位移。

《The Economic Times》網站並列比較在手機上顯示的畫面。左側的灰色預留位置會保留給文章主頁橫幅。右側的預留位置會替換成載入的圖片。

定義的容器維度

我們為所有圖片和容器指定了明確的尺寸,因此瀏覽器引擎不需在可使用的 DOM 元素時,計算元素的寬度和高度。這可避免不必要的版面配置位移和額外的繪製工作。

總結 CLS 目標和成就

在開始最佳化專案之前,他們的團隊將 CLS 分數以 0.25 為基準。結果我們可以大幅減少 90%0.09

Chrome 使用者體驗報告中顯示的 CLS 分佈情形。CLS 值中有 76% 屬於「良好」,15% 為「一般」,9% 為「不佳」。整體來說,The Economic Times 網站的使用者體驗第 75 個百分位數的 CLS 為 0.09。

什麼是首次輸入延遲時間 (FID)?我們如何改善這項功能?

「首次輸入延遲時間」指標可追蹤網站對使用者輸入內容的回應速度。FID 分數不佳的主因是 JavaScript 嚴重工作,導致瀏覽器的主要執行緒忙碌中,這可能會延遲使用者互動。我們透過幾種方式改善 FID。

分解較長的 JavaScript 工作

長時間工作是指 50 毫秒以上的工作,長時間的工作佔用瀏覽器的主執行緒,導致無法回應使用者輸入內容。我們將長時間執行的工作分割成數個較小的工作,只要符合使用者要求即可,這有助於減少 JavaScript 過大。

在 Chrome 開發人員工具的效能面板中,按照活動類型細分的 CPU 作業時間。這表示系統花費 143 毫秒來安排載入資源的時間。有人在 JavaScript 上花費 4553 毫秒。961 毫秒在轉譯工作上花費了 961 毫秒。191 毫秒的時間花在繪製作業上。系統工作需要 1488 毫秒,閒置時間則為 3877 毫秒。總時間範圍為 11212 毫秒。

延後未使用的 JavaScript

為保持網頁的回應速度,我們將優先顯示網頁內容,而不是第三方指令碼 (例如數據分析)。不過,有些程式庫需要在 <head> 文件中載入,才能準確追蹤使用者歷程,因此有一些限制。

減少 polyfill

由於瀏覽器支援新型 API,且更少使用者使用舊版瀏覽器 (例如 Internet Explorer),因此我們減少對特定 polyfill 和程式庫的依賴。

延遲載入廣告

延遲載入需捲動位置的廣告有助於縮短主執行緒封鎖時間,改善 FID。

總結 FID 目標和成就

從例行實驗中,我們成功將 FID 從 200 毫秒縮短至 50 毫秒以下。

Chrome 使用者體驗報告中顯示的 FID 分佈情形。CLS 值中有 86% 屬於「良好」,10% 為「一般」,4% 為「不佳」。根據《The Economic Times》網站的使用者體驗,第 75 個百分位數的整體 FID 為 44 毫秒。

防範迴歸問題

《經濟時間》(The Economics Times) 計劃在正式環境中導入自動化效能檢查,避免網頁效能迴歸問題。他們計劃評估 Lighthouse-CI 以自動執行實驗室測試,這可避免生產分支版本發生迴歸問題。