大家好！今天我们来聊聊Web Vitals中的一个重要指标——CLS (Cumulative Layout Shift)，也就是累计布局偏移。相信大家都有过这样的体验：浏览网页时，突然页面内容跳动，本来想点击的按钮或者链接，结果点到了别的地方，让人非常恼火。而CLS，就是用来衡量这种页面跳动程度的指标，它直接影响着用户体验。
一、CLS 是什么？
CLS 用来衡量页面加载过程中视觉稳定性的一个指标。它量化了页面上不可预期的内容位移，反映了页面元素在加载过程中位置的变化。CLS 的值越小，说明页面布局变化越少，用户体验越好。反之，CLS 值越大，页面跳动越明显，用户体验越差。
二、CLS 的计算原理
CLS 的计算涉及两个关键因素：
- 布局偏移的 impact fraction (影响分数)： 发生布局偏移的区域的面积。它描述了偏移元素占整个视口（viewport）的比例。
- 布局偏移的 distance fraction (距离分数)： 偏移的距离。它描述了元素在垂直或水平方向上移动的距离，占视口的最大尺寸（高度或宽度）的比例。
CLS的计算公式很简单：
CLS = impact fraction * distance fraction
举个例子，假设一个元素占用了视口的50%的面积，然后它向下移动了 25% 的视口高度。那么：
- Impact fraction = 0.5
- Distance fraction = 0.25
所以，这个布局偏移的 CLS 值 = 0.5 * 0.25 = 0.125
需要注意的是，CLS 并不是简单地将单个布局偏移的值加总。在实际计算中，CLS 是在页面整个生命周期内的所有布局偏移值的总和。为了避免异常峰值对整体体验的干扰，CLS 会考虑一个 session window（会话窗口）的概念。当布局偏移的时间间隔小于1秒，且累计的偏移面积小于0.1，这些偏移会被视为同一个session window中的偏移，CLS会计算该session window内的最大CLS值。
三、CLS 值的评估标准
Google 建议的 CLS 指标评估标准如下：
- 良好 (Good): CLS <= 0.1
- 需要改进 (Needs improvement): 0.1 < CLS <= 0.25
- 差 (Poor): CLS > 0.25
如果你的网站CLS值超过0.25，就说明页面跳动问题比较严重了，需要尽快优化。
四、常见的导致 CLS 偏高的原因
了解了 CLS 的计算原理和评估标准，我们来看看哪些因素会导致 CLS 偏高，导致页面跳动：
- 未指定图片、视频等媒体元素的尺寸： 当浏览器加载图片或视频时，如果未指定 width 和 height 属性，或者使用了 CSS 设置尺寸但加载速度慢，浏览器就无法预留足够的空间。当图片或视频加载完成后，会撑开页面，导致页面内容下移。
- 解决方案： 为图片、视频等媒体元素指定 width 和 height 属性，或者使用 CSS aspect-ratio 属性。使用
<img>标签时，务必加上width和height属性，或者使用CSS的aspect-ratio属性，让浏览器预留好空间。例如：<img src="image.jpg" width="640" height="480" alt="描述">。如果使用CSS，可以这样：img { aspect-ratio: 16 / 9; }。
- 解决方案： 为图片、视频等媒体元素指定 width 和 height 属性，或者使用 CSS aspect-ratio 属性。使用
- 动态插入内容到页面顶部： 很多网站会在页面顶部展示广告、通知栏等。如果这些内容是在页面加载过程中动态插入的，就会导致页面内容下移。
- 解决方案： 尽量避免在页面顶部动态插入内容。如果必须这样做，可以预留足够的空间，或者使用占位符。可以预先在HTML中声明广告位，设置好高度和宽度，确保广告内容加载完成之前页面布局不会改变。
- 字体加载导致页面跳动： 当网站使用自定义字体时，如果自定义字体加载速度慢，浏览器会先使用默认字体渲染页面。当自定义字体加载完成后，会替换默认字体，导致页面内容跳动。
- 解决方案： 使用 preload 加载关键字体文件，减少字体加载时间。同时，使用
font-display属性控制字体加载行为，比如使用font-display: swap;，先使用系统字体，字体加载完成后再替换，减少页面跳动，但可能会导致短暂的 FOUT (Flash of Unstyled Text)。
- 解决方案： 使用 preload 加载关键字体文件，减少字体加载时间。同时，使用
- 动画效果不当： 某些动画效果，比如使用 JavaScript 改变元素的位置，也可能导致布局偏移。
- 解决方案： 尽量使用 CSS 动画或 transform 属性来实现动画效果，因为它们通常不会触发布局变化，而是使用合成层来优化性能。
- 异步加载的资源导致： 某些异步加载的 JavaScript 或 CSS 文件，在页面加载过程中插入新的元素或者改变元素的样式，也会导致布局偏移。
- 解决方案： 优化异步加载的资源，尽量减少对页面布局的影响。
五、CLS 优化实践
根据上述原因，可以采取以下优化措施来降低 CLS：
- 优先优化图片和视频： 这是最常见的导致 CLS 偏高的原因，确保指定了尺寸。
- 预留空间： 对于动态插入的内容，预留足够的空间或使用占位符。
- 控制字体加载： 优化字体加载策略，减少字体加载对页面布局的影响。
- 使用 CSS 动画和 transform： 尽量避免使用 JavaScript 改变元素位置，使用 CSS 动画和 transform 来实现动画效果。
- 优化异步加载： 优化异步加载的 JavaScript 和 CSS 文件，减少对页面布局的影响。
- 使用 Chrome DevTools 检测和调试： Chrome DevTools 提供了强大的工具来检测和调试 CLS 问题。可以在 Performance 面板中找到布局偏移的详细信息，帮助你定位问题所在。
六、总结
CLS 是衡量页面视觉稳定性的一个重要指标，它直接影响着用户体验。通过了解 CLS 的计算原理、常见的导致 CLS 偏高的原因以及优化方法，我们可以更好地优化网站性能，提升用户体验。希望这篇文章对你有所帮助！
记住，优化 CLS 是一个持续的过程，需要不断地监测和调整。让我们一起努力，打造更流畅、更友好的 Web 体验吧！
