累計版面配置位移 (CLS)

Milica Mihajlija

Philip Walton

未預期的版面配置變更可能會以多種方式影響使用者體驗，例如當文字突然移動時，使用者可能會在閱讀時迷失方向，或是誤點連結或按鈕。在某些情況下，這可能會造成嚴重損壞。

資源非同步載入或 DOM 元素在現有內容之前動態新增至網頁時，通常會發生網頁內容非預期移動的情形。造成版面配置偏移的原因可能是圖片或影片的尺寸不明、字型顯示的大小比初始備用字型大或小，或是第三方廣告或小工具會動態調整大小。

網站開發人員和使用者體驗的差異，會讓這個問題更加嚴重。例如：

• 個人化或第三方內容在開發和正式環境中的運作方式通常有所不同。
• 測試圖片通常已存在開發人員的瀏覽器快取中，但對使用者來說，載入時間會更長。
• 在本機執行的 API 呼叫通常速度非常快，因此在開發階段不易察覺的延遲，在實際工作環境中可能會變得相當明顯。

累積版面配置偏移 (CLS) 指標可評估實際使用者發生這類問題的頻率，協助您解決這個問題。

什麼是 CLS？

CLS 是一種評估指標，可針對網頁整個生命週期發生的每一次非預期版面配置位移，評估最快速密集的版面配置位移分數。

當可見元素從一個已算繪影格變更至下一個影格時，就會發生版面配置轉移。(詳情請參閱本指南後續章節，瞭解如何計算個別版面配置位移分數)。

一連串的版面配置轉換 (稱為工作階段時間區間) 是指一或多個個別版面配置轉換快速接續發生，且每個轉換之間的間隔時間少於 1 秒，且總時間區間長度上限為 5 秒。

最嚴重的爆發事件，是工作階段視窗中，所有版面配置位移的累計分數最高的視窗。

什麼是良好的 CLS 分數？

為了提供良好的使用者體驗，網站應力求 CLS 分數為 0.1 以下。為確保多數使用者都能享有此等級的體驗，建議您以第 75 個百分位數做為門檻，評估網頁載入情形，並區分行動裝置和電腦。

如要進一步瞭解這項最佳化建議背後的研究和方法，請參閱「定義 Core Web Vitals 指標門檻」。

版面配置位移詳細資訊

版面配置偏移是由 Layout Instability API 定義，當可視區域內的可見元素在兩個影格之間變更其起始位置 (例如預設 writing mode 中的頂端和左側位置) 時，就會回報 layout-shift 項目。這類元素會視為不穩定元素。

請注意，只有在現有元素變更起始位置時，才會發生版面配置變更。如果 DOM 中新增元素或現有元素變更大小，只要變更不會導致其他可見元素變更起始位置，就不會視為版面配置變動。

版面配置位移分數

為了計算版面配置位移分數，瀏覽器會查看可視區域大小，以及兩個轉譯影格之間可視區域中不穩定元素的移動情形。版面配置移動分數是移動的兩個測量值的乘積：影響因子和距離因子 (兩者皆在下方定義)。

layout shift score = impact fraction * distance fraction

影響因子

「影響因子」會評估不穩定元素對兩個影格之間可視區域的影響程度。

特定影格影響因子的計算方式，是將該影格和前一個影格中所有不穩定元素的可見區域相加，再除以檢視區的總面積。