先测量布局偏移再修 CLS

目标

CLS 0.21 是症状不是诊断。PerformanceObserver 能把它拆成逐条明细：哪些元素移动了、贡献多少、发生在第几毫秒。按贡献排序后修掉前两行几乎总能达标，而凭直觉盲改 CSS 通常既改不对也白费三个 PR。先把账单拉出来，再逐项结清。

步骤要点

1. 在 DevTools 控制台注册带 buffered 的 layout-shift 观察器，重载并交互，逐行记录偏移值、起始时间与来源节点。
2. 把日志按贡献值排序并按起始时间聚类，映射到触发类别：图片加载、字体切换或数据请求。
3. 为迟到内容精确预留空间：图片用 width/height 加 aspect-ratio，图表骨架用最终高度而非猜测值。
4. 稳定字体切换：用 ascent/descent/size-adjust 覆盖值让回退字体度量与 webfont 对齐，配 x-height 相近的回退栈。
5. 重跑观察器重算会话 CLS，逐源迭代到总分不超过 0.05，把模糊指标变成可勾选的清单。

排错提示

观察器无输出多半是注册晚于偏移发生，用 buffered:true 加全新重载，并确认页面不在把指标上报给父框架的 iframe 里；sources 为空或节点为 null 说明元素在读取前已被移除，改录 Performance trace 用 Layout Shift regions 覆盖层看移动矩形；动态内容必须增长时只在首屏下方插入或固定高度动画，视口下方的向下生长不计 CLS，挪动已有文本才计。

适用边界

DevTools 的 CLS 只反映单一设备单一会话，上线后要用 Chrome UX Report 或 RUM 字段数据验证；aspect-ratio 与度量覆盖依赖正确的内在尺寸，数字错了只是把偏移换成了黑边。

代码示例

shift 0.1140 at 820ms  sources: IMG.hero              <- no reserved space
shift 0.0620 at 190ms  sources: H1.title, P.lede      <- font swap metrics
shift 0.0310 at 2400ms sources: DIV.chart-slot        <- skeleton guessed short
shift 0.0040 at 3100ms sources: BUTTON.cta             <- ignore: negligible

after fixes:
shift 0.0031 at 190ms  sources: P.lede               <- total CLS: 0.006