Shopify 抓 LCP 元素时 element 为空怎么查

现象#

回调里 entry.element 是 null，只能拿到 startTime，判断不出拖慢首屏的是主图还是标题。

原因#

• element 只在 largest-contentful-paint 条目里提供，元素可能在回调执行前已被替换
• 用 getEntriesByType 取历史条目时，只有最后一条才代表最终 LCP
• 图片以 CSS 背景形式渲染时没有对应 DOM 节点，element 必然为空
• 跨域图片未带 Timing-Allow-Origin，部分子项时间信息缺失

处理步骤#

1. 用 PerformanceObserver 监听 largest-contentful-paint，回调里读 element
2. 打印 entry.element.tagName、currentSrc 与 entry.url，定位命中的资源
3. element 为空时回退到 entry.url，并检查该位置是否用了背景图
4. 在 visibilitychange 后断开 observer，避免把后续滚动内容算进来
5. 对比 entry.renderTime 与 loadTime，区分下载慢还是渲染慢

验收标准#

控制台能输出具体 LCP 元素的标签名与图片地址，与人工判断的首屏主元素一致。