优化 CLS - 累计布局偏移，提升用户体验 - 优化 CLS - 累计布局偏移，提升用户体验

优化 CLS - 累计布局偏移，提升用户体验

在当今互联网时代，网页性能指标不仅仅是技术层面的考量，更是用户体验的直接体现。Google提出的累计布局偏移（Cumulative Layout Shift，简称CLS）正是这样一个以用户为中心的内容视觉稳定性指标。它量化了用户在浏览网页时遇到意外布局移位的频率，较低的CLS分数有助于确保页面的视觉和交互体验更加稳定，从而提升用户的整体满意度。

CLS的定义与重要性

累计布局偏移（CLS）是指网页在加载过程中，可视区域内元素的意外移动。想象一下，当用户正在浏览一个页面，准备点击一个按钮或进行其他交互时，页面的布局突然发生抖动，这可能会导致用户的点击行为产生意外的结果，甚至引发用户的挫败感。

这种页面内容的意外移动通常发生在资源异步加载或DOM元素被动态添加到现有内容之上的情况下。常见的罪魁祸首包括尺寸未知的图像或视频、显示大小与回退字体不一致的文本、以及动态调整自身大小的第三方广告或小部件。

开发环境与生产环境的差异

值得注意的是，开发环境中的功能表现往往与用户实际体验存在较大差异。个性化或第三方内容在开发时的表现通常与生产环境不一致。例如，测试图像可能已经存在于开发人员的浏览器缓存中，本地运行的API调用通常非常快，因此延迟并不明显。

以常见的页面banner图为例，当图片资源加载缓慢时，并不影响浏览器解析DOM、CSSOM合成Layout Tree等操作。然而，当页面整体渲染完成之后，图片突然加载完成并渲染到页面上，便会造成严重的CLS。

CLS分数解读

CLS分数是衡量页面布局稳定性的关键指标，分数越低，代表页面的布局越稳定。

Good（良好）：CLS评分低于0.1分，代表页面非常稳定，用户体验良好。
Needs Improvement（需要改进）：CLS评分在0.1-0.25之间，代表页面稳定性有所欠缺，需要对页面进行优化。
Poor（较差）：CLS评分超过0.25，代表页面的稳定性较差，优化工作已迫在眉睫。

影响CLS的主要因素

未设置尺寸的图片：图片加载完成后，若未预先设置尺寸，会导致页面布局发生变动。
未设置尺寸的广告位、iframes等：这些元素在加载完成后，若未预先定义尺寸，也会引发布局偏移。
动态注入的渲染内容：动态添加到页面的内容可能会导致已有元素的位移。
网页字体导致的FOIT/TOUT：字体加载过程中的闪烁（FOIT）或文本替换（TOUT）会影响布局稳定性。
异步操作前的DOM操作：在一些异步操作（如网络请求）之前对DOM进行操作，可能导致布局变化。

解决方案

针对上述影响CLS的因素，我们可以采取以下优化措施：

为图片和视频资源设置尺寸：

在HTML标签中明确指定图片和视频的宽度和高度，例如：
```
<img src="example.jpg" width="300" height="200" alt="示例图片">
```

使用CSS为图片和视频设置固定的宽高比，例如：

.image-container {
  width: 300px;
  height: 200px;
  background-image: url('example.jpg');
  background-size: cover;
}

优化flex布局和margin设置：
- 避免在异步加载内容时使用flex布局和margin: auto，因为这可能导致布局不稳定。
- 使用固定的布局方式，或者确保异步加载的内容有明确的尺寸。
优化iframe和第三方广告资源：
- 为iframe和广告位设置固定的宽度和高度，避免其加载完成后引发布局变化。
- 考虑在用户交互时才加载这些资源，以减少初始加载时的布局偏移。
优化网页字体加载：
- 使用font-display: swap属性，确保在字体加载过程中，文本内容仍然可见，避免FOIT/TOUT现象。
- 预加载常用字体，减少字体加载时间。
合理安排异步操作：
- 在进行异步操作（如网络请求）之前，尽量避免对DOM进行大规模操作。
- 使用占位符或加载指示器，确保用户在等待异步内容加载时，页面布局保持稳定。

结语

累计布局偏移（CLS）作为衡量网页性能的重要指标，直接关系到用户的视觉和交互体验。通过合理设置资源尺寸、优化布局方式、合理安排异步操作等措施，可以有效降低CLS分数，提升页面的稳定性和用户体验。作为前端开发者，我们应当将用户体验放在首位，持续优化页面性能，为用户提供更加流畅、稳定的网页浏览体验。

导航