移动端实验室数据里 /product/ 列表页 LCP 4.2 秒，详情页只有 1.9 秒。列表页首屏是一张大 banner 加十二个商品卡，接口 /api/list 单独请求要 1.1 秒。
一开始怀疑是「字体文件阻塞首屏文字绘制，font-display 设置成了 block」，查了一圈，方向不对。
原因不止一个，得分开看。banner 用的是 2400px 原图，没有 srcset，移动端要下 480KB。另一种情况是列表数据由 JS 请求后再渲染，LCP 元素要等接口回来才出现。
另外，图片服务没开 webp，CDN 也没做尺寸裁剪。
定位 LCP 元素和它的请求体积
curl -s https://www.example.com/product/ | grep -o 'src="[^"]*\.\(jpg\|png\)"' | head量一下首屏图的真实大小
curl -sI https://cdn.example.com/banner.jpg | grep -i content-length给 banner 补 srcset 和 fetchpriority
grep -n 'banner' templates/list.html等前面都确认过，再看首屏接口的首字节时间
curl -s -o /dev/null -w '%{time_starttransfer}\n' https://www.example.com/api/list这类改动我都写进变更记录，过两周再出问题时能对上号。
别只看报错消失，验证要多做一步。移动端 LCP 降到 2.1 秒，首屏图从 480KB 降到 96KB，接口不再落在关键渲染路径上。
容易忽略的是，列表页的 LCP 往往不是图片本身，而是等接口才渲染的卡片容器，先确认元素再谈压缩。这类问题最好一次改到位，反复小改反而容易把原因搅混。