Cumulative Layout Shift（CLS）：布局偏移的计算与阈值

CLS 是 Cumulative Layout Shift 的缩写。web.dev 把它定义为页面整个生命周期内，所有意外布局偏移的分数中最大的一段突发值。它衡量的是页面在加载与使用中，可见内容有没有意外移位，例如读到一半，上方突然插入一条横幅，正文被推下去。

怎样计算

单次布局偏移的分数由两部分相乘：

布局偏移分数 = 影响比例 × 距离比例

影响比例是两帧之间不稳定元素占视口面积的比例；距离比例是不稳定元素移动的最大水平或垂直距离，除以视口的最大尺寸。多次偏移按会话窗口归并：相邻偏移间隔少于 1 秒、窗口总长最多 5 秒，构成一次突发，CLS 取所有突发中分数最大的一个，而不是累加整个页面生命周期。

用户输入后 500 毫秒内发生的偏移带有 hadRecentInput 标记，可以从计算中排除。也就是说只有意外偏移计入，紧随用户输入（500 毫秒内）发生的位移可以排除。

阈值

web.dev 的目标值：CLS 不超过 0.1 为 good，介于 0.1 与 0.25 之间需要改进，超过 0.25 为 poor；衡量标准是页面加载的第 75 百分位，并分别按移动与桌面设备统计。取第 75 百分位，意味着至少 75% 的页面加载达到该目标，个别偏高的访问不会单独决定结论，但也需要对照具体访问分布。

与相邻概念的边界

LCP 衡量主要内容何时出现，CLS 衡量出现后是否稳定；两者是不同维度，一个页面可以加载很快却不断移位。CLS 也不衡量动画是否流畅，只关注元素起始位置是否在两帧之间发生意外变化。

常见成因与展现形式的关系

web.dev 的 Optimize CLS 页列出的主要成因与做法：

• 没有尺寸的图片：写明 width 与 height 或用 CSS aspect-ratio 预留空间；
• 广告、嵌入与晚到内容：用 min-height 或 aspect-ratio 预留空间，避免在没有用户交互时插入新内容；
• 动态注入内容：使用固定尺寸容器，或由用户点击（如“加载更多”）后再加载；
• 网页字体切换：font-display: optional、合适的回退字体与预加载；
• 动画：用 transform（translate()、scale()）而非改变 top、left、width、height。

这与本库的两类展现形式直接相关。Scroll Reveal 的位移应使用 transform，不能改变布局属性；Sticky Bar 若在页面加载后才插入并推开正文，就属于晚到内容，预留高度可以避免；Banner 与 Carousel 的高度不固定时同理。固定定位叠层是否计入偏移，本文未核验。

怎样解释变化

CLS 上升要先定位是哪一次偏移：用性能工具查看偏移的元素与时间点，再判断是否发生在用户输入之后。晚加载的第三方内容、字体切换、cookie 提示条和促销条都可能是来源，需逐一实测确认。改进后应以第 75 百分位的真实用户数据复查，而不是只看一次本机测试。

参考资料

• web.dev：Cumulative Layout Shift (CLS)
• web.dev：Optimize Cumulative Layout Shift