多數人以為手機螢幕窄、廣告版位又常隨裝置調整大小，頁面跳動的毛病該是手機版更嚴重，但攤開 2025 年 HTTP Archive 網頁調查的數據，答案卻反過來，全球網站在手機版拿下「良好」CLS 評等的比例高達 81%，桌機版卻只有 72%，跳動最明顯的反而是你平常用大螢幕瀏覽的那一版。這個數字打翻了不少人對「行動裝置體驗比較差」的直覺。
CLS，全名 Cumulative Layout Shift（累積版面配置偏移），是 Google 用來衡量網頁視覺穩定性的指標，量的不是網頁跑多快，而是畫面在你眼前自己動了幾次、動了多遠。手指才剛要點下「加入購物車」，一塊廣告卡進那個位置，你點到的變成廣告；正讀著一段文字，上方圖片突然撐開，整段內容被往下擠走。這些畫面自己動的瞬間，Google 早就把它算進排名訊號裡，分數不好看，等於把訪客的信任跟搜尋能見度一起賠掉。
先把 CLS 怎麼計算拆解清楚，它其實不是把所有跳動全部加起來這麼簡單，再一一拆解圖片、廣告、字型、動畫這幾個最常見的來源怎麼修，最後看一個真實電商拿數字證明，畫面穩不穩到底值多少。
CLS 是什麼？手機版分數為什麼反而比桌機好？
CLS 是 Google 在 2020 年提出的網站體驗核心指標（Core Web Vitals）之一，和另外兩個指標各管一件事：LCP（Largest Contentful Paint，最大內容繪製）管載入速度，INP（Interaction to Next Paint，與下一次繪製的互動）管操作回應，CLS 專門管畫面穩不穩。三個指標都能在 Google 免費的 PageSpeed Insights 工具裡查到分數，附帶改善建議。
「非預期」是 CLS 判定的關鍵。你按了「展開更多」，內容跟著長出來，這不算；你什麼都沒做，畫面卻自己往下滑或往旁邊擠，才會被計分。這個界線也是手機版分數比較好看的部分原因。手機介面普遍比桌機簡化，複雜的側邊欄、多層選單、大尺寸橫幅廣告較少出現，畫面天生就少了幾個容易亂跳的地方。不過 HTTP Archive 也提醒，桌機版這幾年進步得比手機慢，2021 到 2025 年，桌機的良好比例只從 62% 爬到 72%，手機同期卻從 62% 衝到 81%，缺口是這幾年才拉開的，不是本來就存在。
CLS 分數怎麼計算？公式其實只有兩個變數
CLS 分數沒有單位，也不是秒數，它是把每一次位移的影響範圍乘上移動距離，算出一個 0 到 1 之間的數字。公式寫成：
版面位移分數 ＝ 影響面積比例 × 位移距離比例
影響面積比例（impact fraction）量的是什麼？
影響面積比例，看的是發生位移的元素加上它移動後新覆蓋到的範圍，兩者合起來占整個可視畫面（viewport）的比例。畫面上一塊文字原本占了半個螢幕，突然被往下推，這塊文字舊位置加新位置合起來的範圍，就是影響面積。
位移距離比例（distance fraction）量的是什麼？
位移距離比例，看的是這塊元素實際移動的距離，占畫面最長邊（通常是高度）的比例。同一塊文字往下移動了螢幕高度的四分之一，位移距離比例就是 0.25。
把兩個數字相乘就是這一次位移的分數。以 Google 官方文件的範例來看，一塊文字元素原本占了視窗一半的面積，接著往下移動了視窗高度四分之一的距離。位移前後的位置合併起來看，實際受影響的範圍占了視窗的 75%，也就是影響面積比例 0.75；移動的距離占視窗高度 25%，也就是位移距離比例 0.25。兩個數字相乘，0.75 乘以 0.25，這一次位移的分數是 0.1875。頁面上每發生一次這樣的位移都會產生一個分數，接下來的問題是，這些分數怎麼合成最後那一個 CLS 數字。
CLS 不是位移全部加總，答案在 Session Window 怎麼分段
很多人以為 CLS 是把整個頁面生命週期裡所有位移分數全部加起來，這個理解已經不夠精確。Google 在 2021 年修正過計算方式，改用「Session Window（會話視窗）」分段計分，原因是舊算法對無限捲動、動態載入的頁面不公平，使用者滑得越久、載入的內容越多，分數只會越滾越大，跟畫面實際穩不穩定沒有直接關係。
Session Window 的分段規則很簡單，位移跟位移之間間隔少於一秒，算同一個視窗；間隔達到一秒以上，就新開一個視窗；單一視窗最長不超過五秒。假設一個頁面剛載入時發生一波位移，累積分數是 0.095，中段使用者往下滑，又觸發一波位移，累積到 0.15，後段沒有再發生位移。這個頁面最終的 CLS，看的不是把 0.095 和 0.15 加起來，而是取分數最高的那一個視窗，也就是 0.15。理解這一點很重要，它代表你不必為了頁面上總共發生了幾次位移焦慮，真正該盯的是某一段時間內位移最密集、分數最高的那一波。
CLS 多少分才算及格？三個等級與 75% 使用者的門檻
Google 把 CLS 分成三段，只要記住兩條界線：0.1 以下是良好，畫面穩定；0.1 到 0.25 之間是需要改進，使用者開始注意到頁面在動；超過 0.25 就是較差，跳動明顯影響體驗。
這裡有個常被忽略的細節。Google 判定一個頁面是否達標，看的不是你自己測一次的數字，而是真實使用者資料，得有 75% 以上的頁面瀏覽落在「良好」這一段，才算過關。這也是為什麼 PageSpeed Insights 上會出現兩種 CLS：上面「實際使用者體驗」那塊來自 Chrome 使用者體驗報告（CrUX），是過去 28 天真實流量的彙整；下面「診斷效能問題」那塊是工具當下模擬載入測出來的實驗室數據。兩個數字常常對不上，因為實驗室工具通常只測頁面初次載入，真實資料卻涵蓋整個瀏覽過程，連你往下滑、延遲載入的內容跳一下都算進去。另外要提醒，離散的點擊、按鍵操作後 500 毫秒內發生的位移不計分，但持續性的操作，例如捲動、拖曳、縮放，並不算在這個豁免範圍內，靠捲動觸發的版面跳動一樣會被記進 CLS。
圖片沒設定尺寸，為什麼還是最大宗的版面位移來源？
圖片沒指定尺寸，是最普遍也最容易處理的一種 CLS 來源。瀏覽器解析 HTML 時，如果 img 標籤沒寫尺寸，它不知道這張圖會占多大空間，只好先給零像素，繼續往下排文字；等圖片真的下載完、量出實際大小，瀏覽器才回頭把空間撐開，底下的文字就被整個往下推。根據 2025 年 HTTP Archive 的網頁調查，桌機版有 65% 的頁面、手機版有 62% 的頁面，至少有一張圖片沒設定明確尺寸，這個比例雖然比前一年略降，依然是最常見、也最頑固的 CLS 成因。
修法是在 img 標籤裡把寬高補回去：
<img src="photo.jpg" width="640" height="360" alt="商品照片">Code language: HTML, XML (xml)width 和 height 不用加單位，瀏覽器拿到這兩個數字會算出圖片的長寬比，在圖片還沒載入前就把空間依比例預留好。現代瀏覽器只要看到這兩個屬性，就會自動換算 aspect-ratio，所以不必擔心圖片在響應式版面被拉變形，只要在 CSS 補一句 img { height: auto; }，圖片就會依容器寬度等比例縮放。如果圖片是放在容器裡、寬度會跟著螢幕變，直接用 CSS 的 aspect-ratio 也能達到同樣效果：
.img-box { aspect-ratio: 16 / 9; width: 100%; }Code language: CSS (css)容器先照比例把高度占好，圖片載入前後都是同一個高度，自然不會跳。這招對影片嵌入、地圖這類載入前不知道多大的內容一樣管用，事先把比例或高度框住，它們就沒辦法在載入時推動版面。
廣告和彈出內容怎麼預留位置，不擠壓原本的版面？
動態廣告的尺寸要等競價結果出來才知道，版位最容易因此失控，對倚賴廣告收益的網站尤其明顯。廣告聯播網為了讓競價更激烈，通常支援多種尺寸，頁面先載好了，廣告才姍姍來遲，一插進來就把下面整段內容往下擠。彈出的 Cookie 同意橫幅、還沒等資料回來就插進 DOM 的內容，本質上是同一個問題，瀏覽器渲染那一刻，並不知道之後會冒出這塊東西。
修法的核心觀念只有一個，先把位置留好，再讓內容進來：
.ad-slot { min-height: 250px; }Code language: CSS (css)即使廣告還沒載入，那 250 像素的空間已經被卡住，內容不會往上補位、之後又被擠開。如果不同裝置用不同尺寸的廣告，搭配媒體查詢，手機和電腦各設一個合理的 min-height 即可。至於 YouTube 影片、地圖這類第三方嵌入內容，除了預留尺寸，也可以先放一張縮圖或占位圖，等使用者真的點擊互動才載入完整元件，同樣能省下一次不必要的位移。
有些版位不管怎麼留都還是會跳，通常是尺寸落差太大的那種，例如頁首特別顯眼的廣告。這時與其硬撐，不如重新檢視這個版位值不值得，把影響最大的版位關掉，或在手機版隱藏，往往是壓低 CLS 最有效的一招。廣告收益是一回事，但若版位太吵，拖累整站體驗與搜尋排名，流量掉了，再多版位也換不到收入，這筆帳要一起算。
網頁字型換字為什麼會抖一下？除了 swap，還有更進階的修法
頁面打開的瞬間，文字先用備用字體撐出來，過半秒才換成正式字型，換的同時整段文字的行高、寬度微微一變，後面的內容跟著抖一下，這就是網頁字型造成的版面跳動。自訂字型要從伺服器下載，下載需要時間，在字型到位之前，瀏覽器要嘛先用備用字型把文字顯示出來（之後換字型時版面重排，稱為 FOUT，無樣式文字閃爍），要嘛先讓文字隱形、等字型載好才顯示（稱為 FOIT，隱形文字閃爍）。只要備用字型和正式字型的字寬、字高不一樣，換的那一下就會推動周圍內容。
最基本的修法，是在 @font-face 裡指定字型的顯示行為：
@font-face { font-family: 'YourFont'; font-display: swap; src: url(...); }Code language: CSS (css)swap 能避免文字隱形那段空白，但換字型那一刻的重排還是可能發生。想連那一下抖動都壓掉，可以改用 font-display: optional，瀏覽器只在字型能夠來得及在第一次繪製前下載完成時才套用它，來不及就直接沿用備用字型，不會事後再換，也就不會有換字那一下的抖動。搭配的做法，是用 size-adjust、ascent-override、descent-override 這幾個 CSS 描述子，微調備用字型的尺寸，讓它和正式字型的字寬字高盡量對齊，即使真的發生換字，落差也小到幾乎看不出來。preload 使用率目前仍偏低，多數網站的關鍵字型仍排在載入隊伍後段，這也是字型造成位移至今仍普遍的原因之一。如果某個字型是首屏關鍵，用 <link rel="preload"> 提早把它載進來，讓它趕得上第一次繪製，是最直接的加速做法。
動畫也會拖累 CLS？該用 transform，不是 top 或 left
CSS 動畫如果用 top、left、width、height 這類屬性做位移或縮放，瀏覽器每一影格都要重新計算版面，這個過程本身就會被記成一次版面位移。同一份 2025 年 HTTP Archive 調查也指出，桌機有 44%、手機有 40% 的頁面存在這種非合成動畫，比例僅次於圖片，是第二常見的 CLS 成因，卻相對少被提起。
修法是把動畫改成用 transform 和 opacity 來寫：
@keyframes slide {
from { transform: translateY(0); }
to { transform: translateY(100px); }
}Code language: CSS (css)transform 和 opacity 的變化交給 GPU 合成處理，不會觸發版面重新計算，視覺效果一樣平滑，卻不會被算進 CLS。還有一種容易被忽略的來源，是隨捲動觸發的效果，例如捲動時收合的頁首、視差滾動、逐漸縮小的導覽列。這類效果如果做法是動態調整 top 或 height，一樣會被計分，因為捲動屬於持續性操作，不在前面提到的 500 毫秒使用者互動豁免範圍內。單次載入的實驗室測試工具也常常測不到這種滑到一半才跳的位移，得實際去操作頁面才會現形，同樣改用 transform 來寫捲動觸發的動畫，就能避開這個容易被漏掉的分數來源。
改善 CLS 對生意有什麼實際幫助？Rakuten 24 的數字給了答案
CLS 不只是工程師在意的技術分數，它跟實際營收有直接關聯。Google 在 web.dev 公布過一份日本電商平台 Rakuten 24（樂天集團旗下的日用品購物網站）的研究，團隊把一個到達頁面做了完整的 Core Web Vitals 優化，包含用 CSS aspect-ratio 替圖片預留空間、用 min-height 縮小延遲載入元素造成的位移，再拿優化版跟原始版做一個月的 A/B 測試，各分到 50% 流量。結果優化版的 CLS 表現比原始版整整改善了 92.72%，同時單次造訪的平均收益成長 53.37%、轉換率提升 33.13%、平均訂單金額增加 15.20%、離開率降低 35.12%。
這組數字談的是整體 Core Web Vitals 優化的綜合成效，不是 CLS 單一指標的功勞，但它清楚說明一件事，版面穩不穩定，不是一個可以晾在旁邊不管的技術細節，它跟訪客願不願意留下來、願不願意付錢，是同一件事的兩面。
改完怎麼確認？用 PageSpeed Insights 對照真實使用者數據
修完之後別憑感覺，拿 PageSpeed Insights 跑一次最實在。輸入網址，「診斷效能問題」裡會列出「避免大量版面配置位移」這條稽核，點開能看到具體是哪幾個元素在跳、各自貢獻多少分數。順著它指的元素去補尺寸、留空間，再跑一次，分數掉到綠色的 0.1 以下就算過了。
想看得更細，Chrome 開發者工具的「效能」面板可以一邊操作頁面、一邊即時監看 CLS，特別適合抓那種捲動到一半才跳出來的位移。要提醒的是，真實使用者的 CLS 資料需要時間累積，今天修好，PageSpeed 上「實際使用者體驗」那塊的數字不會馬上變，因為它是過去 28 天真實流量的彙整，得等新資料慢慢覆蓋舊的。改完先看「診斷」那塊的即時分數確認方向對了，剩下的交給時間，數字會自己跟上來。
回到開頭那個快點到「加入購物車」、卻被廣告卡走的瞬間，你要做的，就是別讓自己的訪客也經歷那一下。版面穩不穩定，往往藏在幾個容易被忽略的技術細節裡，一項一項補齊，大部分的跳動就會消失，而 Rakuten 24 的案例已經證明，這筆投資回饋到的，不只是一個乾淨的分數。