CLS 是什麼？CLS 評分標準、優化 4 方法一次看

CLS 是什麼？CLS 定義、評分標準一次看

（一）CLS 定義

CLS（Cumulative Layout Shift）中文稱為**「累積版面位移」，是 Google 用來衡量網頁「視覺穩定性」的技術指標。簡單來說，它記錄了網頁在載入或瀏覽過程中，內文、圖片、按鈕等物件是否會發生「非預期跳動」**的頻率與幅度。

當使用者瀏覽網頁時，如果內容突然發生位移（例如突然插入廣告），很容易導致閱讀中斷甚至「誤點」錯誤的按鈕。這種情況會大幅降低使用者體驗，進而影響網頁的 SEO 排名。

（AI 繪製：CLS 視覺位移示意圖）

（二） CLS 是 Google 網站速度核心指標之一

因為這種突如其來的畫面跳動非常破壞使用者體驗，Google 官方為了解決這個技術痛點，將 CLS 納入了 「網站速度核心指標」（Core Web Vitals） 中。

網站速度核心指標是 Google 用來衡量網站使用者體驗的標準，也是目前 SEO 的技術評分重點項目，其中包含以下 3 個面向：

1. CLS（累積版面位移）：衡量視覺穩定性。

2. LCP（Largest Contentful Paint，最大內容繪製）：衡量載入速度。指初始畫面中最大區塊的渲染完成時間。

3. INP（Interaction to Next Paint，與下一個顯示的內容互動）：衡量互動回應性。評估使用者點擊或輸入後，網頁畫面的更新延遲時間。

針對這 3 個評分項目， Google 已向大眾提供免費網頁速度測試工具 PageSpeed Insights，以幫助大家了解自己網站的速度表現，並提供 3 面向的改善建議。

理解了概念後，我們接著來看看，Google 究竟是怎麼幫 CLS 打分數的？

（三）CLS 計算公式

CLS 計算公式包括「影響面積比例」和「位移比例」兩個主要因素：

📍 影響面積比例（Impact Fraction）：指不穩定元素在視窗中所佔的面積比例。

📍 位移比例（Distance Fraction）：指主要元素在視窗中移動的最大距離比例。

而 CLS 的計算方式如下：

CLS 分數 = 影響面積比例 * 位移比例

假設一個佔半個視窗的廣告突然出現。它將主要內容向下推移四分之一的視窗高度。那麼 CLS 分數就是 0.5 * 0.25 = 0.125。

（AI 繪製：CLS 計算示意圖）

（四）CLS 評分標準

Google 針對 CLS 分數，將網站分為以下 3 個等級：

• 良好（Good）：CLS 分數 ≤ 0.1

• 需要改進（Needs Improvement）：CLS 分數 0.1 - 0.25

• 差（Poor）：CLS 分數 > 0.25

CLS 分數越低，代表畫面越穩定，Google 會給予較高的排名優勢！

常見 4 大 CLS 問題＋優化方法

（一）圖片尺寸未定

未指定圖片尺寸是造成 CLS 的主要原因！當瀏覽器無法預知圖片大小時，頁面載入會發生突然變動，這樣會大幅影響用戶的閱讀體驗。

優化方法：

• 為圖片設定固定尺寸（ width & height），確保瀏覽器能夠提前保留適當的顯示空間。

• 使用 CSS aspect-ratio 屬性，讓圖片在不同裝置上保持適當比例，避免突發變動。

（二）動態內容插入

動態內容能提供即時資訊，但是不當使用會推移現有內容位置。這種版面變動會干擾用戶閱讀。因此，需要謹慎處理動態內容的插入方式。

優化方法：請確保懸浮視窗、動態按鈕、即時通知等元素，不會突然推動主要內容移位。

（三）自定義字體問題

自定義字體可增加網頁設計獨特性，但載入時間過長會導致文字顯示延遲，而延遲可能引起版面重排，影響 CLS 分數。

優化方法：使用 font-display: swap;，讓網頁在字體載入前，先顯示備用字體，減少版面重排問題。

（四）廣告位置變動

廣告是許多網站的重要收入來源，但位置不固定會造成內容位移。突然出現的廣告會推擠其他元素，干擾用戶閱讀。

優化方法：預先保留廣告區塊空間，確保廣告載入時不會影響其他內容的布局。

CLS 對網站 SEO 的影響

CLS 直接影響網站的使用者體驗（UX），而 Google 的排名演算法已將 Core Web Vitals（網站速度核心指標）納入 SEO 評分標準。

高 CLS 分數會導致使用者在瀏覽時感到困擾，提高跳出率，進而影響網站排名。因此，網站管理者應持續優化圖片、廣告、動態內容與字體載入，確保頁面穩定性，提供流暢的瀏覽體驗，以提升 SEO 表現並增加轉換率。

以上就是 CLS 的介紹，如果您想要了解更多 SEO 資訊，或者想要獲取免費的 SEO 健檢報告，都可以透過下方黃色按鈕與 Welly 團隊最專業的 SEO 公司聯繫！