改善 Telegraph Media Group 的累計版面配置位移

在幾個月內，這家英國知名新聞網站成功將第 75 百分位數的 CLS 從 0.25 提高至 0.1，提升了 250%。

Chris Boakes

視覺化內容的穩定性挑戰

版面配置位移可能會造成嚴重干擾。在 Telegraph Media Group (TMG) 中，視覺穩定性特別重要，因為讀者主要透過應用程式閱讀新聞。如果在閱讀文章時版面配置發生變動，讀者可能會找不到閱讀位置。這可能會造成困擾和分心。

從工程角度來看，確保網頁不會轉換並中斷讀者可能相當困難，尤其是當應用程式區域以非同步方式載入並動態新增至網頁時。

在 TMG，我們有許多團隊提供用戶端程式碼：

  • 核心工程。在內容推薦和留言等功能中導入第三方解決方案。
  • 行銷。執行 A/B 版本測試，評估讀者如何與新功能或變更互動。
  • 廣告。管理廣告請求和廣告預先出價。
  • 編輯相關規定。在推文或影片等文章中嵌入程式碼，以及自訂小工具 (例如新型冠狀病毒病例追蹤器)。

確保每個團隊都不會導致頁面版面配置出現震動，可能相當困難。團隊使用「累積版面配置位移」指標來評估讀者發生這種情況的頻率，進而進一步瞭解實際使用者體驗，並設立明確的目標。這使得第 75 百分位數的 CLS 從 0.25 改善至 0.1，通過的桶數也從 57% 提升至 72%。

250%

CLS 改善幅度 (第 75 個百分位數)

15%

更多獲得良好 CLS 分數的使用者

我們的起點

我們使用 CrUX 資訊主頁，確認網頁的轉換率比預期高。

CrUX 資訊主頁顯示約 55-60% 的良好分數、15% 的需要改善分數，以及 25% 的低分。
2020 年 6 月至 2021 年 2 月期間的累計版面配置位移分數。

我們希望至少有 75% 的讀者能享有「良好」的體驗，因此開始找出版面配置不穩定的原因。

我們如何評估版面配置偏移

我們結合使用 Chrome 開發人員工具和 WebPageTest，找出導致版面配置改變的原因。在 DevTools 中，我們使用「Performance」分頁的「Experience」部分，突顯版面配置變更的個別例項，以及這些例項對整體分數的影響。

顯示 Telegraph 首頁，標題上方有藍色重疊廣告。
使用 Chrome 開發人員工具的「體驗」部分，找出廣告在客戶端頂端載入而導致版面配置偏移的情形。

選取「Highlight Layout Shifts」時，WebPageTest 會在時間軸檢視畫面中醒目顯示版面配置變更的位置。

WebPageTest 的膠卷檢視畫面，顯示 Telegraph 網站的內容，其中以紅色覆蓋顯示醒目顯示的版面配置變動。
WebPageTest 會醒目顯示版面配置位移的位置。

在查看最常造訪範本的每個轉換後，我們列出了一些改善方式。

減少版面配置位移

我們著重於四個可減少版面配置位移的領域： - 廣告 - 圖片 - 標題 - 嵌入內容

廣告

廣告會在透過 JavaScript 進行初始繪製後載入。載入的部分容器並未預留高度。

動畫：The Telegraph 網站。廣告載入在故事清單上方時，系統會將故事清單往下推。
廣告載入後，廣告下方的「更多報導」區塊會向下移動。

雖然我們不知道確切高度，但可以使用廣告版位中載入的常見廣告尺寸保留空間。

動畫：The Telegraph 網站。廣告的預留位置矩形會置於動態消息清單上方。廣告會載入預留位置，且不會造成版面配置變動。
由於預留了廣告空間，因此在廣告載入前後，「更多報導」區塊會保持靜態。

在某些情況下，我們誤判了廣告的平均高度。對於平板電腦讀者，則會折疊該版面。

動畫：平板電腦檢視畫面的 Telegraph 網站。預留位置廣告版位比廣告大，因此廣告載入後，內容會向上移動。
在平板電腦大小的裝置上，廣告版位在讀者載入後就會收合。

我們重新檢查了這個版位，並調整高度，以便使用最常見的尺寸。

動畫：平板電腦檢視畫面的 Telegraph 網站。由於預留位置與廣告大小相符，廣告載入時就不會發生版面配置變更。
確保我們為廣告版位保留的空間，與廣告最常放送的高度相符。

圖片

網站上的許多圖片都是延遲載入，並保留圖片的空間。

載入文章預覽資訊卡的動畫。
延遲載入圖片，且不會中斷版面配置。

不過，文章頂端的內嵌圖片並未在容器中保留任何空間，也沒有與標記相關聯的寬度和高度屬性。這會導致版面配置在載入時移位。

動畫：載入文章頁面。當主要圖片載入頁面頂端時，文字會向下移動。
文章主要圖片造成的版面配置變動。

只要在圖片中加入寬度和高度屬性，即可確保版面配置不會轉移。

動畫：載入文章頁面，並保留主要圖片的預留位置。當主要圖片在頁面頂端載入時，版面配置不會改變。
主要文章圖片載入時不會導致版面配置移位。

標頭位於標記中內容下方，並使用 CSS 置於頂端。原本的想法是在導覽前優先載入內容，但這會導致網頁暫時轉移。

ALT_TEXT_HERE
網頁的頁首載入不順暢。

將標頭移至標記的上方，即可讓頁面在轉換時不受影響。

ALT_TEXT_HERE
頁面載入的標頭不會再中斷版面配置。

嵌入內容

部分常用的嵌入項目具有固定的顯示比例。例如 YouTube 影片。在播放器載入期間，我們會從 YouTube 提取縮圖，並在影片載入期間將其用作預留位置。

影片播放器插槽在載入影片播放器時，載入低解析度縮圖。
影片播放器版位在載入影片播放器時，會載入低解析度縮圖。

評估成效

我們可以使用本文開頭提到的工具，輕鬆評估功能層級的影響。不過，我們想在範本層級和網站層級評估 CLS。我們使用 SpeedCurve 進行綜合測試，驗證試產和正式版中的變更。

SpeedCurve 圖表顯示 CLS 分數大幅下降。
使用 SpeedCurve 以合成方式追蹤 CLS 進度。

程式碼進入正式環境後，我們就能驗證 RUM 資料 (由 mPulse 提供) 中的結果。

mPulse 圖表顯示 CLS 分數下降。
在變更前後，使用 mPulse RUM 資料驗證全網站的 CLS 改善情形。

檢查 RUM 資料可讓我們確信所做的變更對讀者有正面影響。

我們查看的最終數字是 Google 收集的 RUM 資料。這項功能很快就會影響網頁排名，因此現在特別重要。首先，我們使用了 Chrome UX 報表，包括透過 CrUX 資訊主頁提供的每月來源層級資料，以及查詢 BigQuery 來擷取歷來 p75 資料。這樣一來，我們就能輕鬆瞭解，在 CrUX 評估的所有流量中，75 百分位數 CLS 從 0.25 提升至 0.1，並且通過的桶數從 57% 提升至 72%。

CrUX 資訊主頁顯示 telegraph.co.uk 的 p75 CLS 為 0.1。
Crux 資訊主頁的結果。
BigQuery 顯示 p75 值逐月改善，從 0.25 降至 0.1。
BigQuery 執行作業，顯示 2021 年至今的 p75 值。

此外，我們還能使用 Chrome UX Report API，並建立一些內部資訊主頁，並將其分割為範本。

內部資訊主頁顯示平均良好分數為 76.2，需要改善分數為 9.3，不佳分數為 14.6。
使用 Chrome UX Report API 的內部資訊主頁，可顯示平均分數和使用該範本的效能最差網頁。

避免 CLS 回歸

避免回歸是提升效能的重要一環。我們已為重點指標設定了一些基本成效預算，並在其中納入 CLS。

成效預算資訊主頁：顯示模擬檢查，評估部分高流量範本的 CLS。目前的預算為 0.025。

如果測試超出預算，系統會傳送訊息至 Slack 頻道，以便我們調查原因。我們也設定了每週報表，因此即使範本仍在預算範圍內，我們也能掌握任何造成負面影響的變更。

我們也打算擴大預算，使用 RUM 資料和模擬資料，並使用 mPulse 設定靜態快訊和異常偵測，以便掌握任何異常變化。

我們在開發新功能時，務必將 CLS 納入考量。我提到的許多變更，都是在發布給讀者後才修正的。日後任何新功能的解決方案設計都會考量版面配置穩定性，以免從一開始就出現任何意外的版面配置位移。

結論

我們目前所做的改善措施相當容易實作，且成效顯著。我在本文中提到的許多變更並未花費太多時間，而且已套用至所有最常用的範本，這表示這些變更對讀者有廣泛的正面影響。

但仍有部分網站需要改善。我們正在研究如何在伺服器端執行更多用戶端邏輯，進一步提升 CLS。我們會持續追蹤及監控指標，以便持續改善指標，並為讀者提供最佳使用者體驗。