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

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

（一）CLS 定義

CLS（Cumulative Layout Shift）中文是累積版面位移，是 Google 核心網頁指標（Core Web Vitals） 之一，用來衡量 網頁載入過程中，不預期的版面變動。

當使用者瀏覽網頁時，如果圖片、廣告、按鈕或文字區塊突然位移，可能會導致誤點，降低使用者體驗，進而影響 SEO 排名。

（二）CLS 計算公式

CLS 計算公式評估網頁視覺穩定性，包括「影響面積比例和位移比例」兩個主要因素。影響面積比例是不穩定元素在視窗中的面積。位移比例則是元素移動的距離。

CLS 的計算方式如下：

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

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

（三）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 公司聯繫！