20
章节20
累积布局偏移 (CLS)

累积布局偏移 (CLS) 指标衡量您网站整体布局的稳定性。在页面加载时意外发生布局偏移的网站可能会导致用户意外错误和分心。
当元素在最初由 DOM 渲染后发生位移时,就会发生累积布局偏移 (CLS)。在此示例中,按钮在文本块之后渲染到屏幕上,导致文本块向下位移。计算 CLS 时会考虑影响和距离的组合。

只有在发生意外移动时,每个元素的单独布局偏移分数才会计入 CLS。如果向 DOM 添加了新元素或现有元素更改了大小,但如果加载的元素保持其位置,则不会计入布局偏移。
延伸阅读
- Google: 累积布局偏移文档
- Vercel: 博客:Core Web Vitals - 累积布局偏移
这有帮助吗?