导读
CLS (Cumulative Layout Shift) 是 Google 的 Core Web Vitals 指标之一，用于衡量页面可见内容在加载过程中的意外布局偏移。CLS 反映了页面的视觉稳定性，如果页面在加载过程中出现了不可预期的内容移动，用户体验会受到很大影响。优化 CLS 有助于提高用户体验，减少用户因点击错误位置而导致的误操作，尤其是在使用移动设备时。
在这篇文章中，我们将探讨如何优化 CLS 以提升页面的视觉稳定性。
什么是 CLS？
CLS 是 Core Web Vitals 的三个关键指标之一，CLS 指标通过计算网页布局变化的频率和幅度来量化页面的视觉稳定性。布局变化是指元素在页面加载后或用户交互期间，因未预期的内容插入或尺寸改变而导致的页面布局变化。CLS 分数越高，表示页面布局越不稳定，用户体验越差。
一个良好的 CLS 分数应该小于 0.1，分数在 0.1 到 0.25 之间表示需要改进，而超过 0.25 则被认为是较差的体验。
如何计算 CLS？
CLS 是通过以下公式计算的：
CLS = Layout Shift Score
布局偏移得分是通过乘积计算得出的：
Layout Shift Score = Impact Fraction × Distance Fraction
- Impact Fraction（影响因子） ：发生布局偏移的元素在视口中占据的可见面积与整个视口面积的比例。
- Distance Fraction（距离因子） ：元素偏移的距离与视口高度的比例。
CLS 的重要性
优化 CLS 对于提升用户体验和网站整体表现具有重要意义。以下是 CLS 重要性的几个关键方面：
1. 提升用户体验
视觉稳定性是用户体验的关键部分。如果用户在浏览页面时，内容突然移动，会导致误点、错按按钮或其他交互错误，这种情况会让用户感到困惑和沮丧。良好的 CLS 分数可以确保页面在加载和用户交互过程中稳定，从而提升用户体验。
2. 减少用户误操作
高 CLS 分数通常意味着页面内容加载期间出现意外移动，例如图片加载后导致文本下移，或广告突然出现推开其他内容。这些意外的布局变化会导致用户点击错误的链接或按钮，造成误操作。通过优化 CLS，可以减少这种不良体验，提升用户在页面上的操作准确性。
3. 增强用户信任
一个视觉稳定性良好的网站可以增强用户信任。如果页面在加载过程中频繁发生内容位移，用户可能会觉得页面不可靠或有问题，尤其是在涉及支付和敏感数据的场景中。确保页面布局稳定，有助于提升用户对网站的信任感。
4. 改善 SEO 排名
Google 将 CLS 作为其排名算法中的一个因素，从而反映页面的视觉稳定性和用户体验。优化 CLS 有助于提高网站在 Google 搜索结果中的排名，这可以带来更多的有机流量。搜索引擎更倾向于推荐那些能够提供良好用户体验的网站，因此良好的 CLS 分数可以直接影响网站的搜索可见性。
5. 提高转换率和业务绩效
研究表明，用户体验不佳的网站往往会导致较高的跳出率和较低的转换率。尤其是对电子商务网站来说，页面布局的不稳定性会严重影响购物体验，可能导致用户放弃购买。通过优化 CLS，可以减少用户流失，增加用户的停留时间和互动，从而提高转换率和整体业务绩效。
6. 提供跨设备的一致体验
在各种设备（如桌面电脑、平板和手机）上，页面布局变化可能会有不同的表现形式。优化 CLS 可以确保网站在不同设备和视口尺寸上都能提供一致的用户体验，这对于提升品牌形象和用户满意度至关重要。
如何优化 CLS？
优化 CLS 的目标是减少页面加载过程中意外的布局变化。以下是一些有效的优化策略：
1. 为图片和视频元素预留空间
未定义尺寸的图片和视频元素是引发布局偏移的常见原因。当这些元素加载时，页面可能会重新调整布局。为图片和视频元素预留空间，可以防止加载时出现意外的布局变化。
优化方法
-
在 HTML 中为所有图片和视频元素设置明确的
width和height属性。这些属性帮助浏览器在加载资源之前就预留好空间。html 复制代码 <img src="image.jpg" width="600" height="400" alt="example image"> -
使用 CSS 为媒体元素设置
aspect-ratio属性，它可以根据图片的宽高比动态调整容器的大小，从而预留合适的空间。css 复制代码 .responsive-img { width: 100%; aspect-ratio: 3 / 2; }
2. 为广告和嵌入内容预留空间
广告和嵌入内容（如第三方小部件、嵌入的视频等）是引发布局变化的另一常见原因。广告加载时间和大小的不可预测性，常常导致页面布局在加载时发生意外的变化。
优化方法
- 为广告位和嵌入内容预留固定的容器大小。如果广告加载失败或加载的广告内容大小不一，可以使用占位符填充。
- 使用自适应广告容器。确保在布局变化时能自动调整大小，避免影响周围元素。
3. 避免在页面加载后插入新内容
动态插入内容（如加载更多内容、通知条、聊天弹窗等）在页面加载后会导致布局偏移。尽量减少或避免在页面加载后插入新内容，尤其是在用户正在与页面交互时。
优化方法
- 在页面的顶部或底部插入新内容，而不是中间。这样做可以避免影响用户已经看到的内容区域。
- 使用固定大小的占位符。加载新内容时，提前预留足够的空间，避免布局偏移。
4. 使用 CSS 动画而非 JavaScript 动画
使用 JavaScript 动画或动画库可能会导致布局偏移，特别是在动画改变元素尺寸时。相较于 JavaScript 动画，CSS 动画具有更好的性能，因为它们可以由浏览器在合成线程中优化处理。
优化方法
-
使用
transform和opacity来执行动画效果。这些属性在合成层上运行，不会触发布局变化。css 复制代码 .fade-in { transition: opacity 0.3s ease-in-out; }
如何监控和测量 CLS？
优化 CLS 的前提是识别和理解布局变化的来源。使用浏览器开发者工具和性能监测工具，可以帮助识别和分析页面布局变化的原因。
- 使用 Chrome DevTools 的 Performance 面板记录和分析布局偏移事件。查找和修复触发布局变化的代码。
- 使用 Google Lighthouse 或 Web Vitals 扩展来测量页面的 CLS 分数和其他性能指标。
- 使用 Google Search Console 的 Core Web Vitals 报告来跟踪网站的 CLS 及其他 Web Vitals 指标。
总结
优化 CLS 对于提供良好的用户体验至关重要，尤其是在移动设备上。通过为媒体和嵌入内容预留空间、避免动态插入新内容、使用 CSS 动画，以及持续监控和测量 CLS 分数，可以有效减少页面加载过程中的布局变化，提升页面的视觉稳定性。
优化 CLS 不仅有助于提升用户满意度，还能提升网站在搜索引擎中的排名。因此，前端开发者和网站运营者应该重视并积极优化 CLS，以提供更加流畅和稳定的用户体验。
