本文目录导读：

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，打造更稳定的网页体验！ 🚀