針對 The Economic Times 網站進行最佳化網站體驗核心指標，可大幅改善使用者體驗，並大幅降低整個網站的跳出率。
網際網路速度日趨快速，使用者期待網站反應和運作速度比以往更快。《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%：
此外，在相同時間範圍內，「不良」範圍內的 CLS 值減少了 65%，而「良好」範圍內的 CLS 值增加了 20%：
最終的成果是《經濟時間》先前並未達到網站體驗核心指標門檻，現在整個來源都已通過網站體驗核心指標的門檻，整體跳出率也降低了 43%。
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 秒。
CLS 是什麼？我們如何改進？
你在瀏覽網站時，是否曾注意到網頁內容突然流動？其中一個原因是在尺寸不明的網頁上以非同步方式載入媒體 (圖片、影片、廣告等)。媒體資源載入完畢後，網頁的版面配置就會立即變動。
我們將探討《經濟時間》(The Economic Times) 網站，瞭解我們如何改善 CLS。
使用預留位置
我們針對已知尺寸的廣告單元和媒體元素，使用已設定樣式的預留位置，以避免在廣告程式庫載入及顯示網頁廣告時，版面配置改變。如此可確保預留廣告的空間，避免版面配置位移。
定義的容器維度
我們為所有圖片和容器指定了明確的尺寸，因此瀏覽器引擎不需在可使用的 DOM 元素時，計算元素的寬度和高度。這可避免不必要的版面配置位移和額外的繪製工作。
總結 CLS 目標和成就
在開始最佳化專案之前，他們的團隊將 CLS 分數以 0.25 為基準。結果我們可以大幅減少 90% 至 0.09。
什麼是首次輸入延遲時間 (FID)？我們如何改善這項功能？
「首次輸入延遲時間」指標可追蹤網站對使用者輸入內容的回應速度。FID 分數不佳的主因是 JavaScript 嚴重工作，導致瀏覽器的主要執行緒忙碌中，這可能會延遲使用者互動。我們透過幾種方式改善 FID。
分解較長的 JavaScript 工作
長時間工作是指 50 毫秒以上的工作，長時間的工作佔用瀏覽器的主執行緒，導致無法回應使用者輸入內容。我們將長時間執行的工作分割成數個較小的工作，只要符合使用者要求即可，這有助於減少 JavaScript 過大。
延後未使用的 JavaScript
為保持網頁的回應速度，我們將優先顯示網頁內容，而不是第三方指令碼 (例如數據分析)。不過，有些程式庫需要在 <head> 文件中載入，才能準確追蹤使用者歷程，因此有一些限制。
減少 polyfill
由於瀏覽器支援新型 API，且更少使用者使用舊版瀏覽器 (例如 Internet Explorer)，因此我們減少對特定 polyfill 和程式庫的依賴。
延遲載入廣告
延遲載入需捲動位置的廣告有助於縮短主執行緒封鎖時間，改善 FID。
總結 FID 目標和成就
從例行實驗中，我們成功將 FID 從 200 毫秒縮短至 50 毫秒以下。
防範迴歸問題
《經濟時間》(The Economics Times) 計劃在正式環境中導入自動化效能檢查，避免網頁效能迴歸問題。他們計劃評估 Lighthouse-CI 以自動執行實驗室測試，這可避免生產分支版本發生迴歸問題。