问题出现得很突然,日志倒是留得挺全。Lighthouse 12.0 报的 LCP 元素是首屏 banner,字段数据里 80% 的用户 LCP 是标题文字。按 banner 优化图片后,CrUX 的 LCP 几乎没动。
刚开始盯着「首屏有懒加载的轮播,字段数据里轮播图常常后到」,折腾了半个多小时,排掉了。
把日志和配置对完,能解释这个现象的基本就这几处。实验室环境带宽稳定,真实用户的弱网下元素渲染顺序不同。还有一种是Lighthouse 默认桌面 UA 与移动端 UA 的排版差异大。
少数情况下是字段数据取的是整站聚合,与单页的实验室结果不是一回事。
上来先用移动端配置重新跑一次
lighthouse https://www.example.com/ --preset=desktop --form-factor=mobile --throttling-method=simulate
然后抓一份真实用户的 LCP 元素分布
curl -s https://www.example.com/rum/lcp | jq '.elements'
给轮播图加 fetchpriority 并去掉懒加载
<img src="/banner.webp" fetchpriority="high" alt="">
剩下的就是按页面维度对齐两边数据
python lcp_align.py --lh report.json --rum rum.json
改完先别撤,确认这几项。移动端实验室结果与字段数据都指向标题文字,优化字体与容器后 CrUX 的 LCP 下降了 0.6 秒。
实验室指标只能说明某一次加载,判断用户体验要看字段数据的元素分布,两边对不上时以真实用户为准。线上能稳定复现的问题都不算难,难的是只在大流量下才出现的那种。
