用户刚准备点击按钮，页面突然下移；文章读到一半，字体加载后整段重排。这些变化不仅影响观感，也可能造成误操作。
CLS应在页面生命周期内观察，既包括初始加载，也包括滚动、延迟组件和交互后的非预期位移。
01 图片、视频和嵌入先确定比例
为媒体提供明确宽高或aspect-ratio，让浏览器在资源到达前预留位置。响应式缩放也要保持比例。
第三方视频、地图和社交嵌入同样需要容器占位。
02 广告与动态模块预留稳定区域
广告尺寸未知、推荐内容晚到和横幅突然插入，都会推动已有内容。预留合理最小高度，或在不影响当前视口的位置加载。
没有内容时也要设计空态。
03 字体加载避免大幅度度量变化
选择接近的回退字体、合理预加载关键字体，并减少不必要字重。检查中文、英文、数字在替换前后的行高和宽度。
不要为了隐藏字体切换让文字长期不可见。
04 新内容不要无提示插到用户上方
提示条、Cookie、通知和错误信息若在页面顶部出现，应预留区域、覆盖显示或由用户操作触发。
加载更多内容应追加在预期位置。
05 动画使用不会改变布局的方式
优先使用transform和opacity进行位移与淡入，避免持续改变top、height或margin造成重排。
动画结束后的布局也要稳定。
06 用会话和具体元素定位问题
实验室工具帮助找到位移节点，真实用户数据能发现滚动后或特定设备问题。记录每次位移的来源与时间。
修复后检查是否只是把位移转移到其他组件。
CLS常见来源
来源 | 症状 | 修复重点 |
|---|---|---|
无尺寸图片 | 图片出现后正文下移 | width/height或比例 |
Web字体 | 文字换行和高度变化 | 回退字体与加载策略 |
广告/嵌入 | 中间内容突然插入 | 预留稳定容器 |
通知横幅 | 整页向下移动 | 固定区域或覆盖 |
动态列表 | 旧内容被推走 | 追加位置与占位 |
布局动画 | 持续抖动 | transform/opacity |
常见问题
CLS多少算好？
常用目标是在真实用户75百分位下不超过0.1，并持续观察不同模板。
图片使用懒加载会导致CLS吗？
懒加载本身不会，只要在加载前预留正确尺寸。
Cookie横幅怎么避免位移？
可使用固定覆盖、预留区域或在首帧即确定高度，并保证用户可操作。
字体一定要预加载吗？
只预加载真正关键且早期使用的字体，过多会竞争其他资源。
动画导致的移动都计入CLS吗？
由用户输入窗口内的部分变化可能处理不同，但设计上仍应避免误触和干扰。
链接复制成功
