CLS
CLS 衡量版面跳動。常見原因是圖片/廣告未保留尺寸、字體載入造成位移或動態插入內容。
定義
CLS（Cumulative Layout Shift）是 Core Web Vitals 的視覺穩定性指標，衡量頁面載入過程中元素是否突然位移。CLS 偏高會造成誤點與體驗差，並可能影響 SEO 的體驗訊號。
為什麼重要
- 降低誤點風險——使用者正要點的按鈕突然跳走很惱人
- 是 Core Web Vitals 三大指標之一，影響體驗評分
- CLS 偏高會拖累轉換率與使用者信任
- 廣告、圖片、字體是 CLS 的三大元兇
- 行動裝置螢幕小，CLS 影響更明顯
- 動態插入內容（toast、banner）容易造成 CLS
- CLS 累積計算，整個頁面生命週期都要注意
怎麼做（實作重點）
- 為圖片設定明確的 width 與 height 屬性
- 廣告/iframe 預留固定空間（skeleton 或 min-height）
- 字體使用 font-display: swap 或 optional，避免 FOUT 造成跳動
- 避免在既有內容上方動態插入元素
- 使用 CSS aspect-ratio 保留響應式圖片空間
- 把動態內容（通知、banner）放在固定位置（如頁頂或頁底）
- 監控 CLS：用 PerformanceObserver 或 web-vitals 追蹤
範例
html
<!-- 明確設定寬高 -->
<img src="/product.webp" alt="產品" width="800" height="600" />
<!-- 或用 CSS aspect-ratio -->
<style>
.responsive-img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
</style>
<img src="/hero.webp" alt="主視覺" class="responsive-img" />html
/* 廣告容器預留最小高度 */
.ad-slot {
min-height: 250px;
background: #f0f0f0;
}
/* 或用 skeleton 佔位 */
.ad-slot:empty::before {
content: '';
display: block;
height: 250px;
background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
animation: shimmer 1.5s infinite;
}相關連結
常見問題
關於這個詞彙的常見問答。