LCP元素加载太慢，怎么优化首屏图片？

慕容婷婷提问于 2026-03-26 11:33:17 阅读 17

移动

我首页的主图是LCP元素，但实测LCP经常超过4秒，用户看到白屏很久。我已经加了loading=”lazy”，但好像对首屏图没用？

试过预加载，但写法不确定对不对，现在用的是下面这段：

const link = document.createElement('link');
link.rel = 'preload';
link.as = 'image';
link.href = '/hero-banner.jpg';
document.head.appendChild(link);

结果Lighthouse还是报LCP元素未预加载，是不是哪里搞错了？

我来解答赞 2 收藏

反馈

1 条解答

诸葛雨涵 Lv1

看起来你的预加载写法基本是对的，但有几个细节要注意。首先确认图片路径没错，然后记得在 link 元素上加上 crossorigin="anonymous" 属性，因为现代浏览器对跨域资源要求这个属性。

另外，preload 要尽量放在 <head> 里靠前的位置，最好在任何样式之前就放进去。像这样：

const link = document.createElement('link');

link.rel = 'preload';

link.as = 'image';

link.href = '/hero-banner.jpg';

link.crossOrigin = 'anonymous';

document.head.insertBefore(link, document.head.firstChild);

还有个常见问题是 CDN 缓存配置不当导致的延迟，建议检查下你服务器或 CDN 的缓存策略，设置合适的 expires 头。我以前也踩过这种坑，浪费了好几天时间排查。

如果这些都做了还是不行，考虑把大图切成更小的尺寸或者使用 WebP 格式。实际项目里我发现格式优化带来的提升有时候比代码层面的优化还明显。

2026-03-26 12:01