CLS（Cumulative Layout Shift，累積版面移動分數）是 Google Core Web Vitals 的三大指標之一，對網站的 SEO 排名與用戶體驗有著舉足輕重的影響。本文將帶你從認識 CLS 的概念、如何測量與分析，到實際優化方法與案例，逐步建立完整的CLS知識體系。無論你是網站開發者、SEO 內容負責人，還是企業主，讀完後都能掌握提升 CLS 分數的關鍵技巧，有效優化網站表現，提升用戶滿意度與轉換率。
CLS 基礎知識與重要性
什麼是 CLS
CLS（累積版面移動分數）是指網頁在載入和互動過程中，因元素位置改變而產生的視覺穩定性問題。簡單來說，就是使用者在瀏覽網頁時，內容突然跳動、按鈕移動，導致誤點或閱讀困難。Google 於 2020 年將 CLS 納為 Core Web Vitals，成為網站排名的重要依據之一。
- 主關鍵字：CLS、累積版面移動分數
- LSI：Core Web Vitals、SEO、網站最佳化、頁面體驗
CLS 如何影響網站 SEO 與用戶體驗
CLS 分數過高意味著網站存在明顯的版面移動現象，這會嚴重損害用戶體驗。例如，使用者想點擊某個按鈕時，畫面突然移動，造成誤觸，這不僅降低了網站的專業形象，更可能導致轉換率下滑。根據 Google 官方說明，CLS 是 SEO 排名的直接因素之一，低分的網站會在搜尋結果中被降權。
- SEO 效益：分數過高影響排名，降低曝光與點擊。
- 用戶體驗：頻繁跳動導致使用者流失。
CLS 計算原理與分數標準
CLS 如何計算
CLS 的計算方式是將頁面生命週期內所有「非預期的版面移動」分數加總。每次元素移動，會根據其影響的畫面比例和移動距離計算出一個分數，CLS 分數則為這些分數的總和。
- 布局偏移分數 = 受影響區域比例 × 移動距離比例
- CLS 分數 = 所有布局偏移分數的加總（排除互動後的變動）
CLS 標準與分數區間
| CLS 分數 | 評等 | 建議 |
|---|---|---|
| 0～0.1 | 良好（Good） | 無需優化 |
| 0.1～0.25 | 需改進（Needs Improvement） | 建議檢查與調整版面 |
| >0.25 | 差（Poor） | 應立即調整，避免跳動 |
根據 Google 的建議，CLS 分數需小於 0.1 才屬理想。超過 0.25 則表示嚴重影響體驗，需立即改善。
常見導致 CLS 問題的原因
圖片與影片未設定尺寸
若圖片、影片等媒體元素未明確設定寬高，瀏覽器在資源載入完成前無法預留正確空間，導致內容突然移動。這是造成 CLS 最常見的原因之一。
動態內容與廣告插入
動態載入（如廣告、推薦商品、懸浮元件）在網頁渲染後才插入，容易造成內容跳動。尤其是外部廣告服務，若沒預留空間，CLS 分數往往偏高。
字型與 Web Fonts 延遲載入
自訂字型（Web Fonts）載入時，瀏覽器先顯示備用字型，之後再切換至主字型，可能導致整段文字位置改變，產生布局偏移。
JavaScript 動態渲染與 SPA 框架問題
現代網站大量採用 JavaScript 動態渲染（如 React、Vue、Angular 等 SPA 框架），若元素渲染順序或資料載入時機處理不當，也會導致版面不穩定。
其他常見情境
- 第三方元件如社群分享按鈕、地圖載入等
- 未預留表單、彈跳視窗空間
- 圖片懶加載（lazy load）未預設 placeholder
實際測量與工具應用
常用 CLS 測量工具
- Google PageSpeed Insights：輸入網址即可獲得 CLS 分析與改進建議。
- Lighthouse：Chrome 內建工具，能細分各項 CLS 問題源頭。
- WebPageTest：提供不同裝置、地區下的 CLS 測試報告。
- Chrome DevTools Performance 面板：可視化每個版面移動事件。
- Google Search Console（網站管理員工具）：核心網頁指標報表，長期追蹤 CLS 表現。
如何閱讀與解讀 CLS 報告
一般 CLS 報告會標示頁面分數，並指出問題元素。建議定期檢查高流量頁面，針對分數異常的部分優先優化。透過「Layout Shift Events」追蹤每次偏移的詳細資訊，可針對問題源頭做出精確調整。
- 找出高 CLS 的頁面（以首頁、商品頁、登錄頁為優先）。
- 分析問題元素（圖片、廣告、動態內容等）。
- 依據建議調整程式碼與樣式。
CLS 實作優化技巧大全
圖片與影片尺寸預先定義
- 所有圖片、影片標籤皆應加上
width與height屬性。 - 如為響應式設計，建議使用
aspect-ratioCSS 屬性。 - 懶加載時應設置 placeholder（佔位圖），預留空間。
<img src="example.jpg" width="600" height="400" alt="示例圖片">
預留廣告、動態內容、第三方元件空間
- 預估最大尺寸，使用
min-height或固定高度預留空間。 - 對於動態內容，盡量避免在首屏內容載入後再插入元素。
<div class="ad-slot" style="min-height: 250px;"></div>
優化字型載入與 FOUT/FOIT 問題
- 使用
font-display: swap或optional屬性，避免延遲顯示。 - 盡可能本地託管字型資源。
- 選用與系統字型相近的預設字型，減少切換時的位移。
避免延後插入新元素或懸浮層
- 動態彈跳視窗、表單、橫幅建議以
position: fixed或absolute疊加，不影響主體內容。
JavaScript 動態渲染內容的最佳實踐
- 初始載入時即預留所有動態內容空間。
- 資料加載完成前顯示 skeleton screen（骨架屏）或 placeholder。
- 減少 SPA 框架下的異步渲染跳動。
實戰經驗案例分享
以某知名電商網站為例，2023 年因首頁廣告動態插入導致 CLS 分數高達 0.35，經過以下優化手法，三週內降至 0.06：
- 所有廣告區塊預留最大空間，避免內容跳動。
- 圖片與影片皆加上明確寬高。
- 字型改為
font-display: swap並優化載入流程。
優化後不僅CLS分數改善，轉換率提升了 8%，用戶投訴大幅減少。
CLS 最佳實踐與進階建議
響應式設計下的 CLS 防範
- 針對不同螢幕尺寸預留正確內容空間。
- 使用
srcset與sizes屬性，確保圖片在各裝置表現一致。
第三方服務與外掛管理
- 嚴格審查第三方外掛、廣告程式碼。
- 使用 async/defer 屬性載入 JS，減少阻塞並避免延遲插入版面。
持續監控與自動化測試
- 定期透過 Google Search Console、Lighthouse 自動化工具監控 CLS。
- 將 CLS 檢查納入 CI/CD 流程，防止新版本釋出時產生新的版面移動。
SEO 與內容團隊的協作重點
- 建立 CLS 檢查清單，內容、設計、前端開發共同審核。
- 教育團隊理解 CLS 對 SEO 與用戶體驗的長遠影響。
CLS 優化常見誤區與解惑
單一頁面優化就夠了嗎
許多網站僅針對首頁進行 CLS 優化，但實際上所有高流量頁面（如商品頁、分類頁、說明頁等）都需監控與調整，否則會因部分頁面分數過高而影響整體評價。
CLS 分數為何測試結果不同
CLS 測試結果會因裝置、網速、瀏覽器甚至地區而異。建議結合實驗室數據（Lab Data）與實際用戶（Field Data）進行綜合判斷。
CLS 與 LCP、FID 的關聯
CLS 屬於 Core Web Vitals 三大指標之一，與 LCP（最大內容繪製）、FID（首次輸入延遲）一同影響頁面品質。三者分開計算，但同時優化可大幅提升 SEO 表現。
總結與行動建議
CLS（累積版面移動分數）對網站 SEO、用戶體驗與轉換率都有直接影響。做好 CLS 優化不僅提升網站品質，更可強化品牌形象與競爭力。建議每位網站經營者、開發者將 CLS 優化納入日常維運流程，定期檢查與追蹤，並持續學習最新技術與策略，讓網站在競爭激烈的數位市場中脫穎而出。
- 定期監控各頁面 CLS 分數
- 針對圖片、廣告、動態內容等重點改善
- 與設計、內容、開發團隊密切合作
- 善用自動化工具監測與預警
FAQ 常見問題解答
- CLS 分數多少才算合格？
- 根據 Google 建議，CLS 分數應低於 0.1 才屬於良好。超過 0.25 則需立即進行優化。
- 只要首頁分數低就沒問題嗎？
- 不正確，所有高流量頁面都需關注 CLS，避免部分頁面拉低全站評價。
- CLS 是否影響手機與桌機排名？
- 是的，CLS 屬於 Core Web Vitals，會影響所有裝置的 SEO 排名與用戶體驗。
- 使用第三方統計或廣告工具會影響 CLS 嗎？
- 若未預留空間或動態插入內容，第三方工具很可能會拉高 CLS 分數，需要特別注意。
- 如何追蹤 CLS 優化成效？
- 可利用 Google Search Console、PageSpeed Insights、Lighthouse 等工具定期追蹤優化前後的 CLS 變化。
