页面元素乱跳（CLS）怎么修，客人点错按钮就是它
图片和广告加载后把内容顶下去，客户刚要点就被挤走了。这既掉转化也掉评分。
先说结论
- 最常见原因：图片没写死尺寸，加载完成后撑开布局。
- 第二常见：广告位、嵌入内容没预留高度。
- 第三常见：字体加载后文字重排，用字体交换策略并预加载可缓解。
- 第四常见：顶部插入的横幅和通知条后加载，把整页顶下去。
- 修法很机械：所有图片写死宽高，所有动态插入位预留空间。
- 目标 0.1 以内，超过 0.25 算差。
照着做：7 步
- 1. 用测速工具看布局偏移的具体元素。
- 2. 所有图片补上宽高属性。
- 3. 广告位和嵌入内容预留固定高度。
- 4. 顶部横幅改为占位渲染，不要后插入。
- 5. 字体用交换策略并预加载。
- 6. 轮播和弹窗固定尺寸。
- 7. 移动端单独复测（移动端更容易超标）。
这几个坑别踩
- 图片只设宽度不设高度。
- 顶部通知条异步插入。
- 广告位高度自适应。
- 只在电脑端测，移动端早就超标了。
你可能还想问
我自己看不出来跳动啊？
在高配电脑和快速网络下确实不明显。用限速模式测，或直接看工具给出的偏移元素列表。
会影响排名吗？
它是核心网页指标之一，一项不合格整页就不合格。同时直接影响转化。
轮播图要不要紧？
轮播如果高度不固定，是常见的跳动来源。固定高度就好。