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

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

移动

我首页的主图是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元素未预加载，是不是哪里搞错了？

我来解答赞 12 收藏

反馈

2 条解答

上官佼佼 Lv1

你说得对，loading="lazy"确实不适合首屏图片，因为懒加载需要等元素进入视口才开始加载。对于LCP元素，我们需要提前加载。

你预加载的写法基本正确，但有几个地方需要注意：

首先，确保你的preload链接在DOM解析阶段就存在。最简单的方法是在HTML头部直接写：

<link rel="preload" href="/hero-banner.jpg" as="image">

这样浏览器在解析HTML时就能立即开始预加载图片了。

其次，如果你要用JavaScript动态添加，要注意时机问题。最好放在内立即执行，而不是等到DOMContentLoaded事件：

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

link.rel = 'preload';

link.as = 'image';

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

// 注意这里要尽早插入

document.head.appendChild(link);

另外，别忘了设置合适的宽高属性，告诉浏览器预留空间，避免布局偏移：

<img src="/hero-banner.jpg" width="1200" height="630" alt="Hero Banner">

这里有个小技巧：可以考虑用srcset和sizes属性提供不同分辨率的图片，让浏览器根据设备选择最优资源。

最后提醒下，如果图片很大，建议启用图像压缩和WebP格式转换，这对提升加载速度帮助很大。我之前做过一个项目，光是换成WebP格式就把LCP时间缩短了近一倍，真是累死个人但也值得。

总的来说就是：早加载、占好位、减体积，这几个方向一起优化才能见效。

2026-03-30 10:03

诸葛雨涵 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