首页跑 A/B 实验,A 版首屏是大图,B 版是视频封面,CrUX 里 LCP 在 2.1 到 3.9 秒之间来回跳,图片压到 80KB 也压不住。
把日志和配置对完,能解释这个现象的基本就这几处。两个版本的首屏元素不同,LCP 候选元素不稳定;实验脚本在首屏渲染后才注入变体,引发二次布局;视频封面没有 preload,发现时间偏晚;分流按 cookie 判断,蜘蛛和真实用户看到不同版本。
先确认两个版本各自的 LCP 元素
npx lighthouse https://www.example.com/ --only-audits=largest-contentful-paint --chrome-flags="--headless"
给两个版本都加首图 preload
echo '<link rel="preload" as="image" href="/hero.jpg" fetchpriority="high">';
然后把实验脚本改成延迟但不阻塞
echo '<script src="/ab.js" defer></script>';
末了按字段数据看两个版本的分位
curl -s "https://www.example.com/crux?url=https://www.example.com/" | Select-String p75
我习惯把每一步的执行时间和结果记在一边,后面复盘省事。
改之前我把相关日志按时间截了一段存着,事后对时间线用得上。
恢复的判定其实很直接。两个版本的 LCP 都稳定在 2.5 秒以内,CrUX 的 75 分位不再剧烈波动。
容易忽略的是,跑实验期间 CWV 数据会混在一起,评估改版效果要按版本分开看。报错文案容易误导,真正的原因往往在相邻那一层的日志里。
