提升页面性能的关键解密LCP优化实战经验分享

这LCP优化太折腾了，差点没扛住

最近在做移动端性能优化，被LCP（最大内容绘制）折磨得够呛。页面加载速度倒是还行，但Google PageSpeed Insights的分数就是上不去，一看报告，LCP时间超标严重。

这里我踩了个坑，一开始以为是服务器响应慢的问题，各种优化接口、加缓存，折腾了半天发现根本不是那回事。后来仔细看文档才发现，LCP主要跟页面中最大的图片或文本块有关，跟首屏渲染关系特别大。

三种方案我都试了一遍

为了搞定这个问题，我试了三种主流方法：

• 延迟非关键资源加载
• 图片懒加载+预加载
• CSS背景图转base64

最开始尝试延迟加载，把一些不重要的js放到页面底部，defer属性也加上去了，效果确实有，但还不够。然后试了图片懒加载，用IntersectionObserver监听，等元素快进入视口再加载，这个对长页面很有效，但对首页这种短页面帮助不大。

最后发现最关键的还是那个大banner图，放着不动的话LCP永远过不了关。这里有个小细节要注意：我之前用的是普通的img标签加载，即使加了loading=”lazy”也没啥用，因为这是首屏重要元素，浏览器会优先加载。

核心代码就这几行

最终我是这么解决的：

// 预加载关键图片
const preloadImage = (url) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = url;
    img.onload = resolve;
    img.onerror = reject;
  });
};

// 在DOMContentLoaded事件触发前就开始预加载
document.addEventListener('readystatechange', async () => {
  if (document.readyState === 'interactive') {
    await preloadImage('/assets/banner-large.webp');
  }
});

配合HTML这边做了点调整：

<!-- 使用picture标签支持多格式 -->
<picture>
  <source srcset="/assets/banner-large.avif" type="image/avif">
  <source srcset="/assets/banner-large.webp" type="image/webp">
  <img 
    src="/assets/banner-large.jpg" 
    alt="Banner" 
    width="1200" 
    height="400"
    fetchpriority="high"
  >
</picture>

几个容易忽略的细节

上面的代码看着简单，但有几个地方特别容易踩坑：

1. fetchpriority=”high”这个属性很重要，告诉浏览器这是高优先级资源
2. 要提前准备好webp和avif格式，modern浏览器用更高效的格式能显著提升加载速度
3. width和height属性必须写，不然会造成布局偏移

还有一个比较隐蔽的坑：CDN配置。最初我只想着优化前端代码，结果发现CDN那边的缓存策略有问题，导致图片有时候还是会重新加载。后来调整了Cache-Control头，设置max-age=31536000，才算彻底解决了这个问题。

性能对比数据

改完之后测了下性能，数据变化很明显：

• LCP时间从原来的3.8s降到1.6s
• PageSpeed Insights分数从65分涨到92分
• 首屏完全加载时间减少了40%

不过说实在的，改完后还是有点小问题。比如某些老版本浏览器不支持webp格式，虽然有fallback但加载时间还是会略长一些。另外极端网络条件下，图片预加载可能会占用其他资源的带宽，这个暂时还没找到特别好的解决方案。

以上是我踩坑后的总结

这次LCP优化的经历让我明白了一个道理：性能优化不能只盯着代码，要从前端到后端、从资源到网络全方位考虑。特别是像LCP这种指标，影响因素太多了，得一个个排查。

如果你有更好的优化方案或者遇到类似问题，欢迎在评论区交流。后续我还想研究下CLS（累计布局偏移）的优化技巧，到时候继续分享。