Lighthouse 12 跑出来 CLS 只有 0.01,CrUX 的字段数据却是 0.26,移动端 75 分位直接判不合格。本地反复测都复现不了,客户投诉页面浏览几分钟后会突然跳一下。

一开始怀疑是「图片懒加载完成后没有预留高度」,查了一圈,方向不对。

真正麻烦的地方在于,几个原因的现象几乎一样。实验室只加载首屏,长会话里的异步模块没被触发。少数情况下是列表滚动到底部才插入推荐位,把已读内容顶下去。

少数情况下是A/B 实验脚本在用户停留十秒后替换首屏模块。

上来先看字段数据的分布

https://pagespeed.web.dev/

给异步插入的模块预留占位

.recommend-slot { min-height: 420px; }

然后在长会话里手动触发插入并观察

document.querySelector('.list').scrollTo(0, 99999)

等前面都确认过,再用布局偏移观察器抓来源

new PerformanceObserver(l => console.log(l.getEntries())).observe({type:'layout-shift', buffered:true})

恢复的判定其实很直接。字段数据四周后回落到 0.1 以下,长会话里不再出现内容整体下移。

实验室数据和字段数据测的不是同一段时间,差距大时优先怀疑用户停留期间才发生的插入。这类问题最好一次改到位,反复小改反而容易把原因搅混。

作者 9823189