事情本身不复杂，线索都在日志里。文章页 FCP 1.2 秒，LCP 却要 3.8 秒，首屏文字早就画出来了，主图一直空着。Chrome 性能面板里图片下载只花 400ms，剩下的时间都在解码，移动端更明显。
第一反应是「用了 CSS 滤镜和大面积模糊，合成阶段被拖长」，验证下来不成立。
原因不止一个，得分开看。首图是 4000px 宽的 JPEG，解码耗时超过下载。少数情况下是图片没有给 width 和 height，布局稳定后才开始解码。
还有一种情况，同一张图同时用于缩略图和首屏，没有按尺寸切图。
先确认 LCP 元素到底是哪个
new PerformanceObserver(l => console.log(l.getEntries().at(-1))).observe({type:'largest-contentful-paint', buffered:true})随后按展示尺寸重新导出
cwebp -q 78 -resize 1200 0 hero.jpg -o hero.webp补齐宽高属性
<img src="/img/hero.webp" width="1200" height="675" fetchpriority="high">复测解码耗时
https://pagespeed.web.dev/这次没动代码，只在配置和运行环境上找原因。
改完先别撤，确认这几项。首图文件从 1.8MB 降到 220KB，解码时间缩短到 120ms，LCP 落到 2.4 秒以内。
FCP 和 LCP 之间的空档多半不是网络，而是解码与渲染，先看图片像素尺寸再看带宽。线上能稳定复现的问题都不算难，难的是只在大流量下才出现的那种。