瞭解如何避免版面配置突然變動，改善使用者體驗
發布日期：2020 年 5 月 5 日，上次更新日期：2025 年 2 月 7 日
累計版面配置位移 (CLS) 是三項 Core Web Vitals 指標之一。這個指標會結合可視內容在可視區域內的位移量，以及受影響元素移動的距離，以評估內容的不穩定程度。
版面配置位移可能會分散使用者的注意力。假設你開始閱讀一篇文章，但突然有元素在頁面上移動，導致你分心，需要重新找回閱讀進度。這種情況在網路上非常常見，包括閱讀新聞或嘗試點選「搜尋」或「加入購物車」按鈕時。這類體驗會讓人覺得視覺上不協調，令人不悅。這種情況通常是因為網頁突然新增或調整了其他元素，導致可見元素被迫移動。
為了提供良好的使用者體驗，網站應力求至少 75% 的網頁瀏覽量 CLS 為 0.1 以下。
與其他核心網站體驗指標不同，CLS 分數是根據計算結果計算出的無單位值，而計算結果是內容移動的幅度和距離。
本指南將說明如何改善造成版面配置偏移的常見原因。
造成 CLS 不佳的常見原因包括：
- 沒有尺寸的圖片。
- 廣告、嵌入內容和 iframe 沒有尺寸。
- 動態插入的內容，例如廣告、嵌入內容和 iframe，但不含尺寸。
- 網頁字型。
瞭解版面配置位移的原因
開始尋找常見 CLS 問題的解決方案前，請務必先瞭解 CLS 分數和變化來源。
實驗室工具和實地測試的 CLS
開發人員經常認為 Chrome UX 報告 (CrUX) 所測量的 CLS 不正確，因為與他們使用 Chrome 開發人員工具或其他實驗室工具所測量的 CLS 不符。Lighthouse 等網頁效能實驗室工具可能不會顯示網頁的完整 CLS，因為這些工具通常會執行網頁的基本載入作業，以便評估部分網頁效能指標並提供相關指引 (不過，Lighthouse 使用者流程可讓您評估超出預設網頁載入稽核的項目)。
CrUX 是 Web Vitals 計畫的官方資料集，因此 CLS 會在整個網頁生命週期中進行評估，而非僅在實驗室工具通常評估的初始網頁載入期間。
在網頁載入期間，版面配置轉移非常常見，因為系統會擷取所有必要資源，以便初始轉譯網頁，但版面配置轉移也可能發生在初始載入後。許多後載入移位可能會因使用者互動而發生，因此會從 CLS 分數中排除，因為這些移位是預期的移位，只要發生在互動後的 500 毫秒內即可。
不過，如果沒有符合資格的互動，系統可能會納入其他非預期的後載入轉換，例如您在網頁上捲動更多內容，而延遲載入的內容載入後導致轉換。其他常見的後載入 CLS 原因，是轉場的互動，例如單頁應用程式，其轉場時間超過 500 毫秒的寬限期。
PageSpeed Insights 會在「瞭解實際使用者體驗」部分顯示網址的使用者感知 CLS，並在「診斷效能問題」部分顯示實驗室負載 CLS。這些值之間的差異可能是後載入 CLS 的結果。