本文目錄導讀：

1. 引言
2. 1. 什么是CLS？
3. 2. 導致CLS的常見原因
4. 3. 如何減少CLS？
5. 4. 進階優化技巧
6. 5. 結論

在網頁性能優化中，CLS（Cumulative Layout Shift，累積布局偏移）是一個關鍵指標，直接影響用戶體驗和搜索引擎排名，CLS衡量的是頁面在加載過程中元素的意外移動程度，比如突然跳動的廣告、延遲加載的圖片或動態插入的內容，高CLS會導致用戶誤點擊、閱讀中斷，甚至影響轉化率,優化CLS是提升網站質量的重要任務。

本文將深入探討CLS的定義、影響因素，并提供一系列實用的優化策略，幫助開發者減少布局偏移,提升頁面穩定性。

---

什么是CLS？

CLS（累積布局偏移）是Google Core Web Vitals（核心網頁指標）之一，用于衡量頁面的視覺穩定性,它的計算方式基于兩個關鍵因素：

• 偏移分數（Shift Fraction）：元素移動的距離占視口高度的比例。
• 影響分數（Impact Fraction）：受影響的視口面積比例。

最終CLS值是所有布局偏移事件的累計分數，Google建議CLS應低于 1,以確保良好的用戶體驗。

---

導致CLS的常見原因

在優化CLS之前,我們需要了解哪些因素會導致布局偏移：

1 未指定尺寸的圖片或視頻

如果圖片或視頻未設置 width 和 height，瀏覽器無法預留空間,加載完成后可能導致頁面內容突然下移。

2 動態插入的內容

例如廣告、彈窗、延遲加載的組件，如果未預留空間,插入時可能推擠其他元素。

3 字體加載導致的文本重排

如果網頁字體未提前加載，瀏覽器可能先顯示后備字體，待自定義字體加載后重新渲染,導致文本區域大小變化。

4 異步加載的腳本或樣式

某些腳本可能動態修改DOM結構,導致布局變化。

5 響應式設計未適配不同屏幕尺寸

在移動端和桌面端切換時，元素排列方式可能不同,導致布局偏移。

---

如何減少CLS？

1 為圖片和視頻預留空間

• 設置明確的 width 和 height：

  <img src="example.jpg" width="600" height="400" alt="Example">

• 使用 aspect-ratio CSS屬性（現代瀏覽器支持）：

  img {
    aspect-ratio: 16 / 9;
    width: 100%;
  }

• 使用 loading="lazy" 時確保占位符：

  <img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" width="600" height="400">

2 避免動態內容導致布局偏移

• 預留廣告位空間：

  <div class="ad-container" style="min-height: 250px;">
    <!-- 廣告加載后填充 -->
  </div>

• 使用CSS transform 替代 top/left 調整位置：

  .popup {
    position: fixed;
    transform: translate(-50%, -50%);
    /* 而非 top: 50%; left: 50%; */
  }

3 優化字體加載

• 使用 font-display: swap 并設置后備字體：

  @font-face {
    font-family: 'CustomFont';
    src: url('font.woff2') format('woff2');
    font-display: swap;
  }
  body {
    font-family: 'CustomFont', Arial, sans-serif;
  }

• 預加載關鍵字體：

  <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

4 優化JavaScript執行

• 避免同步布局變動：

  // 錯誤示例：直接修改DOM導致重排
  element.style.width = '100px';
  // 正確示例：使用 requestAnimationFrame
  requestAnimationFrame(() => {
    element.style.width = '100px';
  });

• 使用 IntersectionObserver 延遲加載非關鍵內容：

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.src = entry.target.dataset.src;
        observer.unobserve(entry.target);
      }
    });
  });
  document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

5 優化CSS布局

• 使用 flex 或 grid 替代浮動布局：

  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

• 避免 margin 或 padding 突然變化：

  .card {
    margin-bottom: 20px; /* 避免動態修改 */
  }

6 測試和監控CLS

• 使用Lighthouse或PageSpeed Insights：
  • 在Chrome DevTools運行Lighthouse測試。
  • 使用Google PageSpeed Insights檢測CLS。
• 使用Web Vitals API實時監控：

  import { getCLS } from 'web-vitals';
  getCLS(console.log);

---

進階優化技巧

1 使用 content-visibility: auto

.lazy-section {
  content-visibility: auto;
  contain-intrinsic-size: 500px; /* 預估高度 */
}

2 預渲染關鍵內容

• 服務端渲染（SSR）或靜態生成（SSG）可以減少客戶端渲染導致的布局偏移。

3 使用骨架屏（Skeleton Screens）

<div class="skeleton" style="width: 100%; height: 300px; background: #eee;"></div>

---

減少CLS不僅能提升用戶體驗，還能改善SEO排名，通過預留空間、優化資源加載、合理使用CSS和JavaScript，開發者可以大幅降低布局偏移，建議定期使用性能檢測工具監控CLS,并持續優化關鍵頁面。

最終優化目標：CLS ≤ 0.1，確保頁面穩定流暢,提升用戶留存率和轉化率。

---

附錄：CLS優化檢查清單

? 所有圖片和視頻設置 width 和 height
? 使用 aspect-ratio 保持比例 預留空間
? 優化字體加載策略
? 避免同步DOM操作
? 使用 IntersectionObserver 延遲加載
? 測試CLS并持續監控

通過以上方法，你可以有效減少CLS，打造更穩定的網頁體驗！ ??