CLS（累積版面位移）是核心網頁指標之一，用來衡量「使用者在瀏覽你的網頁時，畫面上的內容有多容易突然亂跳、位移」。簡單說，它量的就是一個網頁「視覺上穩不穩」。
這篇文章會用新手角度說明：CLS 是什麼、0.1 的良好門檻怎麼來、版面為什麼會自己亂跳、分數是怎麼算出來的，以及實際上要怎麼一步步檢查與改善。
重點速覽
- CLS 是核心網頁指標之一，量的是版面位移的嚴重程度，是沒有單位的分數，良好門檻是 0.1 以內。
- 分數只取「最嚴重的一段連續爆發」，不是把整頁所有位移無腦加總。
- 沒設尺寸的圖片、廣告、動態插入內容、晚到的網頁字型，是版面亂跳最常見的元凶。
CLS 是什麼？
依 web.dev（Google 的開發者資源）的定義，CLS 衡量的是「頁面在整個生命週期中，所有非預期版面位移裡，最嚴重的那一連串爆發」。
和量「載入速度」的 LCP 不同，CLS 量的是「視覺穩定度」——內容會不會在你正要點按鈕時，突然往下擠一格。
要特別記住一件事：CLS 不是「秒數」，而是一個沒有單位的分數。分數越低，代表版面越穩；分數越高，代表畫面跳得越兇。
官方建議的門檻整理如下表：
| 評級 | CLS 分數 | 代表意義 |
|---|---|---|
| 良好 | ≤ 0.1 | 版面穩定，幾乎不亂跳 |
| 待改善 | 0.1 – 0.25 | 偶爾有感的位移 |
| 不佳 | > 0.25 | 內容常常亂跳，體驗很差 |
和其他核心網頁指標一樣，Google 是用「真實使用者數據」的第 75 百分位數（p75）來判定，並把行動裝置與桌機分開看。
白話說，就是要有 75% 的造訪 CLS 都在 0.1 以內，這一頁才算「良好」。
用白話文怎麼說？
你可以把瀏覽網頁，想成在讀一份還在排版的報紙。
你正盯著某一行字，結果上面突然插進一張大圖，整段文字被往下推，你的視線也跟著被甩開——那種「我剛剛看到哪了？」的惱怒，就是版面位移。
更氣的情況是：你正要按「取消」，結果一個廣告突然載入、把按鈕往下擠，你的手指剛好點到了「確認購買」。
CLS 量的，就是這種「畫面在你眼前自己亂動」的程度。
你可以這樣記：LCP 顧的是「主畫面快不快出現」，CLS 顧的是「出現之後穩不穩、會不會亂跳」。一個快、一個穩，合起來才是好體驗。
CLS 實際上要做什麼？
第一步，先搞懂「分數是怎麼算的」，你才知道哪種位移最傷。web.dev 給的公式很單純：
版面位移分數 ＝ 影響範圍比例 × 移動距離比例- 影響範圍比例（impact fraction）：會亂跳的元素，前後兩格畫面加起來佔了可視範圍多少面積。
- 移動距離比例（distance fraction）：這些元素移動的最大距離，佔畫面長或寬（取較大者）的多少。
舉個例子：如果一個元素佔了畫面 75% 的面積，又往下移動了畫面高度的 25%，這次位移分數就是 0.75 × 0.25 = 0.1875，已經超過 0.1 的良好門檻。
當初加入「距離比例」，就是為了不要過度處罰「大元素只移動了一點點」的情況。
第二步，理解 CLS 只算「最嚴重的一段爆發」。
Google 不會把整頁所有位移無腦加總，而是把「連續發生、彼此間隔不到 1 秒」的位移歸成同一段爆發（稱為 session window，單一爆發最長算 5 秒），再取「分數最高的那一段」當作這頁的 CLS。
這個算法在 2021 年導入，是為了對長頁面與單頁應用（SPA）更公平。
第三步，認識哪些東西最常害版面亂跳。依 web.dev 整理，最常見的元凶有：
- 沒設尺寸的圖片或影片：瀏覽器不知道要留多少空間，圖一載入就把下面內容擠開。
- 廣告、
iframe、嵌入式內容：非同步載入，一出現就佔位、推擠周圍。 - 動態插入的內容：例如同意 Cookie 橫幅、促銷通知，硬擠進已經顯示的內容上方。
- 網頁字型晚到：備用字型和正式字型大小不同，文字重排（reflow）就會跳動。
第四步，照這個流程檢查與改善：
- STEP 1 看真實數據：到 Google Search Console 的「核心網頁指標」報表，或 PageSpeed Insights 的田野數據。
- STEP 2 找出元凶：用 Chrome 開發者工具的 Performance 面板，或
web-vitals套件，看是哪個元素在跳。 - STEP 3 對症下藥：依下面方向處理。
- STEP 4 過幾週再回頭看：田野數據以 28 天滾動更新，別期待隔天就變綠。
常見且有效的改善方向包括：
- 圖片、影片一律標尺寸：在
<img>加上width與height屬性，或用 CSS 的aspect-ratio，讓瀏覽器先把空間留好。 - 廣告、嵌入元件先留位：給廣告容器固定高度或長寬比，別讓它載入後才把版面撐開。
- 動態內容別插在現有內容上方：通知、橫幅盡量用不推擠版面的方式呈現，例如覆蓋層。
- 動畫改用 transform：用
transform做動畫不會觸發版面重排，比改top、width安全。 - 字型提早處理：預載關鍵字型，並用
size-adjust等方式讓備用字型與正式字型尺寸接近。
關於 CLS 的常見迷思
迷思一：CLS 的單位是秒
不是。CLS 是一個沒有單位的分數，0.1 不是 0.1 秒。
它衡量的是「位移的嚴重程度」（面積 × 距離），和時間長短是兩回事。會跟秒搞混，多半是因為它和量秒數的 LCP 排在一起。
迷思二：把整頁所有位移加起來就是 CLS
不對。2021 年起，Google 改成只取「最嚴重的一段連續爆發」當分數，不是整頁無腦累加。
所以一個內容很長的頁面，不會單純因為「長」就被罰到爆，這對部落格與單頁應用比較公平。
迷思三：使用者自己點擊造成的位移也會被算
不會。使用者操作（例如點開選單）後 500 毫秒內發生的位移，會被視為「預期中的」而排除。
CLS 只算「非預期、使用者沒料到」的跳動，因為那才會真正干擾體驗。
迷思四：CLS 只跟好不好看有關，跟 SEO 無關
不完全對。CLS 是核心網頁指標，也是頁面體驗的一環，會影響使用者願不願意留下來。
它不是排名的萬靈丹，但版面老是亂跳，跳出率與誤觸都會上升，間接傷到你的表現。
總結
如果只記一句話：CLS 量的是「網頁內容會不會在使用者眼前突然亂跳」，是個沒有單位的分數，良好門檻是 0.1 以內。
新手可以記住三件事。
- 第一，先到 Google Search Console 看自己的 CLS 落在哪一級，找出是哪張圖、哪個廣告或哪段字在跳。
- 第二，幫容易變動的元素先把空間留好——圖片影片標尺寸、廣告嵌入元件定好長寬比、處理好網頁字型。
- 第三，它算的是「最嚴重的一段爆發」不是整頁累加，且不是排名萬靈丹，但版面亂跳會拉高跳出率與誤觸，別輕忽。
