CLS Cumulative Layout Shift
别名：累积布局偏移
本词条约 156 字 阅读约 1 分钟 更新于
CLS（累积布局偏移）衡量页面在加载过程中元素位置意外跳动的程度。图片无尺寸、动态插入的横幅、字体加载导致的文字位移都会引起跳动，破坏阅读与点击体验，CLS 越低越稳定。
怎么降低
给图片和嵌入内容预留宽高、避免在已有内容上方插入突发元素、为字体加载使用合理策略。让版面在加载过程中保持稳定，是改善 CLS 的核心。
参考资料
- [1] web.dev CLS
别名：累积布局偏移
本词条约 156 字 阅读约 1 分钟 更新于
CLS（累积布局偏移）衡量页面在加载过程中元素位置意外跳动的程度。图片无尺寸、动态插入的横幅、字体加载导致的文字位移都会引起跳动，破坏阅读与点击体验，CLS 越低越稳定。
给图片和嵌入内容预留宽高、避免在已有内容上方插入突发元素、为字体加载使用合理策略。让版面在加载过程中保持稳定，是改善 CLS 的核心。