[!info] related notes

• 所属 MOC: DevTools Performance MOC
• 指标: CLS
• 可视化: Rendering 面板
• 指标排障: Web Vitals 调试

DevTools Layout Shift 调试

症状

• 页面加载时内容突然下跳；
• 广告/图片出现后正文位移；
• 字体加载后文本重新排版；
• 异步组件插入导致已有内容被顶走。

第一步：复现并录制

Performance recording 时保留 Screenshots，复现真实页面加载或交互。

不要只盯最终 CLS 数字；需要找到具体哪次 shift、什么元素、发生在什么时候。

第二步：定位 Layout Shift 事件

从 Performance 中找到 shift event / cluster，并结合截图确认：

• shift 前后页面发生了什么；
• 哪些节点被移动；
• 是否是用户预期交互导致。

用户主动触发的合理布局变化，与无预期的视觉跳动需要分开判断。

第三步：追触发源

常见根因：

• image/video/iframe 未预留尺寸；
• async content 在已有内容上方插入；
• late banner/consent/ad；
• web font 导致度量变化；
• 动画使用会触发布局的属性；
• DOM/style 逻辑在错误时机改变几何结构。

Layout Shift 是症状，不是根因。

第四步：修复结构

典型修复：

• width/height 或 aspect-ratio 预留空间；
• skeleton/placeholder 保持稳定尺寸；
• 动态内容避免插入视口已有内容上方；
• font fallback metrics / preload 策略；
• 动画优先 transform/opacity。

第五步：重新录制

比较：

• 原 shift 是否消失；
• 新 shift 是否出现；
• CLS / shift cluster 是否改善；
• 用户视觉路径是否更稳定。

迁移检查

场景：商品页加载 1 秒后价格区上方出现活动 banner，整页下移。

不看正文回答：

1. 在 Performance/Screenshots 中如何证明 shift 时机？
2. 为什么“CLS 高”不能直接说明是哪段 CSS 错？
3. 这个场景最优先的结构修复是什么？
4. 如果偏移发生在用户点击展开后，为什么评价方式不同？