你是否遇到過這樣的情況：正要點擊一個按鈕，結果它突然“滑走”了？ 這不是錯覺，而是 CLS（Cumulative Layout Shift，累計布局偏移） 在作祟。

CLS 是影響用戶體驗和網頁排名的關鍵指標之一，下面分享我在實際項目中是如何發現并修復 CLS 的，希望對你也有幫助。

什么是 CLS？

CLS 反映的是頁面在加載過程中元素意外移動的程度。

數值越高，說明頁面越不穩定 —— 內容在加載過程中“亂跳”，用戶體驗自然會大打折扣。

CLS 常見的幾個“元兇”

圖片未設置尺寸

• 沒有指定 width 和 height，瀏覽器無法預留空間，導致圖片加載時內容被擠下去。

廣告、iframe、嵌入內容未提前占位

• 動態加載的內容會強行推開現有布局，引起嚴重偏移。

字體加載造成的 FOIT/FOUT

• 自定義字體加載慢，會導致“閃爍”或文字重排。

JavaScript 插入內容沒預留空間

• JS 動態插入元素（特別是在頂部）會影響現有布局。

不合理的動畫

• 使用 height、margin、top 等觸發回流的動畫，會導致頁面整體抖動。

修復 CLS 的實戰方法

1. 給圖片和視頻明確尺寸

給 <img> 和 <video> 添加 width 和 height 屬性，或通過 CSS 固定尺寸。

<img src="banner.jpg" width="600" height="400" />

或：

img {
  width: 600px;
  height: 400px;
}

瀏覽器能根據尺寸預留空間，避免加載時布局被“頂開”。

2. 動態內容提前預留空間

廣告、iframe 等內容必須預設高度：

<div style="min-height: 250px;">
  <!-- 廣告內容異步加載 -->
</div>

不要等內容加載后再插入，否則“跳動”難以避免。

3. 優化字體加載

避免字體加載時“閃爍”或重排，推薦使用 font-display: swap：

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
}

頁面先用系統字體顯示，等字體加載完成再無感替換。

4. 動態插入內容要有策略

不要隨便在頁面中部或頂部插入新元素，最好：

• 插在頁面底部；
• 或者提前插入空容器、留好位置。

// 插入評論區內容
const container = document.getElementById('comments');
container.innerHTML = '<div>加載中...</div>';

5. 使用 transform 替代動畫屬性

動畫推薦使用 transform 和 opacity，不要用 top、width 等影響布局的屬性。

.card {
  transition: transform 0.3s ease;
}
.card:hover {
  transform: scale(1.05);
}

transform 不會觸發重排，動畫更平滑，也更穩定。

如何監控和調試 CLS？

• PageSpeed Insights（谷歌官方）

直接查看 CLS 得分和優化建議。

• Chrome DevTools

Performance 面板可分析頁面加載過程中的布局偏移。

• WebPageTest

提供逐幀畫面，可以直觀看出哪里出現了跳動。

最后總結

CLS 是影響用戶體驗的隱性殺手，但也完全可以避免：

• 指定所有圖片、視頻的尺寸；
• 廣告和 iframe 內容提前占位；
• 字體加載使用 font-display: swap；
• 插入內容前留出空間；
• 動畫用 transform，不要動 layout。

布局穩定，不僅用戶喜歡，搜索引擎也更青睞。

下次寫組件或引入新模塊時，提前考慮“這會不會讓布局抖一下”，提前規劃，效果立竿見影。