优化前端应用的 Cumulative Layout Shift (CLS) 策略

1. 问题描述

Cumulative Layout Shift (CLS) 是 Core Web Vitals 的核心指标之一，用于衡量页面视觉稳定性。它量化了用户可见的页面内容在加载过程中发生意外布局偏移的频率和程度。例如：图片延迟加载后突然占据空间、动态插入的广告导致内容下移等。CLS 分数越低，用户体验越稳定。

2. CLS 的计算原理

CLS 通过以下公式计算每次布局偏移的“影响分数”：
CLS = 影响比例（Impact Fraction） × 距离比例（Distance Fraction）

• 影响比例：偏移元素在视口中占据的面积比例（0~1）。
• 距离比例：偏移元素在视口内移动的最大距离（垂直或水平方向）占视口尺寸的比例（0~1）。

例如：一个占视口高度 30% 的图片向下移动了视口高度的 10%，则本次偏移的 CLS = 0.3 × 0.1 = 0.03。页面生命周期内所有偏移的累计值即为最终 CLS 分数。

3. 导致 CLS 的常见场景

1. 未设置尺寸的图片或视频：加载后突然占据空间，挤压下方内容。
2. 动态插入的内容：广告、弹窗等非用户触发的元素插入。
3. 字体加载导致的布局变化：Fallback 字体与目标字体尺寸差异。
4. 异步加载的组件：例如评论框、推荐列表等。

4. 优化策略与实现步骤

步骤 1：为媒体元素预设尺寸

• 原理：浏览器在加载图片/视频前预留正确空间，避免布局跳跃。
• 方法：
  • 为 <img> 和 <video> 显式设置 width 和 height 属性（或 CSS 中的宽高）。
  • 使用 CSS 宽高比盒（Aspect Ratio Boxes）实现响应式适配：

    .img-container {
      width: 100%;
      height: 0;
      padding-top: 56.25%; /* 16:9 比例 */
      position: relative;
    }
    .img-container img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    

步骤 2：避免动态内容插入导致的偏移

• 原理：确保动态添加的内容不会挤压现有元素。
• 方法：
  • 为动态内容容器提前预留空间（例如通过 min-height）。
  • 使用 transform 动画替代影响布局的属性（如 top/left）。
  • 广告位采用固定尺寸容器，避免加载后拉伸页面。

步骤 3：优化字体加载导致的布局偏移

• 原理：减少 Fallback 字体与目标字体的渲染差异。
• 方法：
  • 使用 font-display: optional 或 swap 并结合 font-size-adjust 调整字体比例。
  • 通过 <link rel="preload"> 提前加载关键字体：

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

  • 使用 FOIT（Flash of Invisible Text）策略隐藏文本直到字体加载完成。

步骤 4：使用 CSS 属性强制稳定布局

• 原理：通过 CSS 限制元素偏移的可能性。
• 方法：
  • 为可能偏移的元素添加 transform: translateZ(0)，将其提升至单独图层。
  • 对动态内容使用 content-visibility: auto 延迟渲染不可见区域。

步骤 5：监控与调试 CLS

• 工具：
  • Chrome DevTools 的 Performance 面板记录布局偏移（显示为 Layout Shift 条目）。
  • 使用 PerformanceObserver 主动监听 CLS：

    new PerformanceObserver((entryList) => {
      for (const entry of entryList.getEntries()) {
        console.log('CLS 偏移:', entry);
      }
    }).observe({type: 'layout-shift', buffered: true});
    

  • Lighthouse 或 Web Vitals 库（web-vitals）直接获取 CLS 分数。

5. 总结

优化 CLS 的核心是预见性布局：通过预设尺寸、预留空间和异步加载控制，确保页面元素在渲染过程中保持稳定。结合工具监控实际偏移情况，针对性调整关键元素，可显著提升视觉稳定性，最终达到 Core Web Vitals 的 CLS 优良标准（低于 0.1）。