这个坑值得记一笔。数据页的首屏主体是一张 canvas 渲染的趋势图，Lighthouse 12.2 报 LCP 4.9 秒，元素直接指向 canvas。图片已经压到 80KB，preload 也加了，指标一点没动。
刚开始盯着「两个数据接口串行请求，一个等一个」，折腾了半个多小时，排掉了。
这类报错背后常见的原因有几处，逐个排除就行。canvas 要等脚本下载执行、数据接口返回后才开始绘制，这段时间全算进 LCP；图表库在首屏同步初始化，阻塞了主线程；canvas 没有固定尺寸，绘制前容器高度是 0。
动手时先确认 LCP 元素到底是不是 canvas
npx lighthouse https://www.example.com/chart --only-audits=largest-contentful-paint-element --view然后把数据请求提前，与脚本加载并行
const data = fetch('/api/trend').then(r=>r.json());给 canvas 容器预留固定高度，避免绘制时重排
<canvas width="720" height="360" style="width:100%;height:auto"></canvas>首屏先渲染静态占位图，图表就绪后再替换
改完先别撤，确认这几项。LCP 元素变成首屏的静态占位图，指标从 4.9 秒降到 2.2 秒，图表加载完成后平滑替换。
canvas 和 iframe 这类元素没法靠资源优化改善 LCP，只能改渲染顺序，先用静态内容占住首屏。报错文案容易误导，真正的原因往往在相邻那一层的日志里。