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 以下,长会话里不再出现内容整体下移。
实验室数据和字段数据测的不是同一段时间,差距大时优先怀疑用户停留期间才发生的插入。这类问题最好一次改到位,反复小改反而容易把原因搅混。
