Cumulative Layout Shift（CLS，累積版面配置位移）是 Core Web Vitals 中負責衡量視覺穩定性的指標。讀者正要點擊連結，廣告或圖片卻忽然載入，把內容往下推，這種令人惱火的經驗，就是 CLS 要量度的問題。
CLS 如何計算
瀏覽器會留意每一次非預期的元素移動，並把「移動的範圍」與「移動的距離」相乘，得出一個位移分數，再把頁面生命週期內分數最高的一組位移作為 CLS。由使用者主動操作（例如點擊展開選單）引起、並在短時間內發生的移動，通常不會被計算在內。
CLS 的評分標準
- 良好：0.1 或以下
- 需要改善：0.1 至 0.25 之間
- 不佳：超過 0.25
與其他指標一樣，評估時以真實使用者資料的第 75 百分位為準。CLS 沒有時間單位，它是一個無單位的分數。
造成版面位移的常見原因
- 圖片或影片沒有指定尺寸：瀏覽器事先不知道需要預留多少空間，圖片載入後才把文字推開。
- 廣告、嵌入內容或橫幅動態插入：內容在頁面上方才出現，下方一切跟著下移。
- 網頁字型載入後替換：後備字型與正式字型的大小不同，文字行數與位置因此改變。
- 由 JavaScript 延後渲染的元件：例如評價區塊、推薦商品列表在載入完成後才撐開版面。
改善 CLS 的做法
- 為所有圖片、影片與嵌入內容設定寬度與高度，或使用 CSS 的 aspect-ratio 預留空間。
- 為廣告位與橫幅預先保留固定高度，不要把新內容插在已顯示內容的上方。
- 使用 font-display 設定並預載重要字型，縮小字型替換前後的差異。
- 動畫改用 transform，避免用會改變版面的屬性（例如 top、height）製作動態效果。
常見問題
CLS 與載入速度有什麼分別？
載入速度指標（例如 LCP）看內容多快出現，CLS 則看內容出現之後穩不穩定。一個頁面可以載入很快，但版面一直跳動，兩者需要分開檢查。
可以用什麼工具找出位移的元素？
PageSpeed Insights 與瀏覽器開發者工具的 Performance 面板都可以標示出造成位移的元素。完整的速度優化流程可參考網頁速度優化教學。