这类问题我又碰上了一次。CLS 在 375px 以上都是 0.02,只有 320px 的小屏上到 0.18。断点写的是 375px,320 宽时侧栏从两列变一列,图片高度算错把正文整体推下去。
第一反应是「侧栏在小屏被移到正文上方,高度变化没预留」,验证下来不成立。
这类报错背后常见的原因有几处,逐个排除就行。断点只覆盖 375 及以上,320 走了默认布局;图片容器用内边距撑高,窄屏比例算错;测试机型池里没有 320 宽的设备。
上来先按小屏跑一次报告
npx lighthouse https://www.example.com/ --form-factor=mobile --output=json
随后找布局断点的定义
grep -rn '375px' assets/css/
给图片容器设固定宽高比
aspect-ratio: 16 / 9;
补
同事提醒我看一下最近一次发布,时间点确实对得上。
命令输出我都留了记录,免得改完记不清原来的值。
改完先别撤,确认这几项。补上断点并固定宽高比后,320 宽的 CLS 降到 0.03,移动端体验分整体提了 8 分。
CLS 取最差那批真实设备的表现,测试机再新也代表不了 320 宽的老机型。拖得越久,排查成本越高,因为现场状态会被后续操作覆盖。
