Search Console 里 LCP 报 4.2 秒 归类在需要改进 可首屏那张大图压到 120KB 服务器响应也只有两百毫秒 换几个 CDN 节点都一样 指标就是降不下来。乍看像缓存或者权限的锅,追下去往往不是。

npx lighthouse https://example.com --preset=desktop --view
curl -sI https://example.com/a.jpg | grep -i content-length

追下去是这么回事:LCP 的四个分段时间是 TTFB 加载延迟 加载耗时 渲染延迟 多数人只盯下载 真正拖住的是后面那一段 图早到了主线程还在跑脚本 没机会绘制。

「LCP 元素定位」相关的日志我一般连着看前后五分钟,单看一条报错经常判断不出是哪一步失败。测试环境和线上的差别,往往就在版本号和那几行被忽略的配置上。

线上出问题先对时间点,跟发布、备份、任务执行的时刻排一排,能省掉一半功夫。

具体做法是,在 Performance 里录一次首屏加载 展开 LCP 竖线看四个分段各占多少时间;Network 面板勾上 Disable cache 再看首屏图真正下载完成的那个时刻;把首屏图以外的脚本全部改成 defer 再复测一次 LCP 有没有下降。

验收就看一点,LCP 在 Lighthouse 和 Search Console 里都进到 2.5 秒以内 渲染延迟这一段的耗时也明显缩短了。

作者 9823189