您是否曾遇過這樣的情況：正準備點擊網頁上的某個按鈕，突然整個頁面內容向下跳了一下，結果您點到了完全不相關的廣告或連結？這種令人抓狂的體驗，正是 CLS（Cumulative Layout Shift，累計佈局偏移） 要解決的核心問題。
CLS 是 Google 在 2020 年推出的網頁使用者體驗核心指標之一，專門用來衡量 頁面視覺穩定性。簡單說，它量化了頁面載入過程中，內容發生意外移動的程度。分數越低越好——理想情況下應該低於 0.1，超過 0.25 就屬於使用者體驗較差的範圍。
頁面佈局偏移的根本原因，在於 內容載入的非同步性及資源尺寸的不確定性。當瀏覽器開始渲染頁面時，如果某些元素（例如圖片、廣告、嵌入式影片）的尺寸沒有預先定義，瀏覽器就會先按預設值或零高度渲染，等資源真正載入完成後再重新計算佈局——這個「重新計算」的過程，就會導致已經顯示的內容突然移位。
最典型的場景包括：
這些看似微小的移動，累積起來就會嚴重破壞使用者的瀏覽連貫性，尤其在行動裝置上更為明顯。
CLS 的計算公式是：影響分數 × 距離分數。
影響分數 指的是不穩定元素在兩次渲染幀之間，佔據可視區域的比例。例如一個元素原本佔螢幕 50% 的面積，移動後又佔了另外 25% 的新區域，那麼總影響面積就是 75%，影響分數為 0.75。
距離分數 則是元素移動的最大距離與視口高度的比值。如果一個元素在 800px 高的螢幕上向下移動了 200px，距離分數就是 0.25。
兩者相乘得出單次偏移的分數，而 CLS 是在整個頁面生命週期內，所有意外佈局偏移分數的累積值。這裡的「意外」很關鍵——使用者主動觸發的互動（例如點擊按鈕展開內容）產生的佈局變化不計入 CLS，只有那些在使用者毫無準備時發生的移動才會被懲罰。
如果您的網站屬於以下類型，CLS 應該成為重點優化對象：
電子商務和交易平台：使用者在瀏覽商品或填寫支付資訊時，頁面突然跳動可能導致誤操作，例如點錯商品、輸錯金額，直接影響轉換率和信任度。
新聞與內容媒體：讀者正沉浸在文章中，突然插入的廣告把段落擠開，閱讀體驗被打斷，跳出率會明顯上升。
行動裝置優先的應用：手機螢幕小，任何佈局偏移都會被放大，尤其在網路較慢的環境下，資源載入延遲更容易引發大幅度跳動。
依賴 SEO 流量的網站：CLS 是 Google 核心網頁指標（Core Web Vitals）的三大支柱之一，直接影響搜尋排名。如果競爭對手的 CLS 更優，您的自然流量可能會被分流。
想像一個線上訂餐網站：使用者打開菜單頁面，看到一道菜品的圖片和價格，準備點擊「加入購物車」按鈕。就在手指即將觸碰螢幕的瞬間，頁面頂部突然載入出了一條促銷橫幅廣告，整個內容向下偏移了 150 像素——使用者最終點到的是下一道菜的按鈕，不得不返回重新操作。這種體驗不僅讓人惱火，還可能導致訂單放棄。
再例如一個技術部落格：讀者正在閱讀一段程式碼範例，突然頁面頂部的網頁字體從系統預設字體切換為自訂字體，行高變化導致程式碼區塊整體下移，讀者需要重新定位閱讀位置。類似的干擾累積多次，使用者很可能直接關閉頁面。
解決 CLS 的關鍵在於 提前為內容預留空間，避免資源載入完成後引發佈局重排。
為圖片和影片設定明確的寬高屬性：即使使用響應式設計，也可以透過 aspect-ratio CSS 屬性或 width 和 height HTML 屬性，讓瀏覽器提前計算佔位空間。
為廣告位和嵌入式內容保留固定容器：不要等到廣告腳本載入完才撐開空間，而是預先用空白佔位符或骨架屏標記區域。
優化字體載入策略：使用 font-display: swap 時要注意備用字體和目標字體的尺寸差異，或者透過 size-adjust 屬性讓備用字體盡量貼近最終字體的度量值。
避免在已渲染內容上方動態插入元素：如果必須插入（例如通知橫幅），應該用動畫平滑過渡，或者讓新內容覆蓋而非推擠原有內容。
延遲載入非關鍵資源：對首屏外的圖片和廣告使用懶載入，減少初始渲染時的不確定性。
CLS 的意義遠不止於通過 Google 的審核或提升 SEO 排名。它真正反映的是 您對使用者時間和注意力的尊重程度。當使用者無需反覆調整視線、重新定位內容、擔心誤點廣告時，他們會更願意停留、更願意信任您的網站、更願意完成轉換行為。
從商業角度看，降低 CLS 能夠直接提升關鍵指標：電商網站的加購物車率、內容網站的停留時間、表單頁面的完成率。而從技術演進的角度看，CLS 的出現推動了整個行業對 效能與體驗平衡 的重新思考——快速載入內容固然重要，但如果載入過程破壞了使用者的心流狀態，速度優勢反而會變成負擔。
CLS 並不是一個需要追求絕對零值的指標，而是一個持續優化的方向。透過工具（例如 Chrome DevTools、Lighthouse、PageSpeed Insights）監測實際數據，結合真實使用者回饋，您可以逐步找到效能、功能與體驗的最佳平衡點。
