Nuxt 3 个人站首屏图片拖慢 LCP：我重做了响应式图片和懒加载

前阵子 PageSpeed 一直提示首页 LCP 偏高，移动端经常超过 3 秒。更直观的是搜索来的用户停留很短，我翻了内容才发现：首屏封面图太大，还被我统一加了懒加载，结果浏览器要等 JS 和交叉观察器接管后才加载关键图。

先把首屏关键图从懒加载里拿出来

我先划边界：首屏主视觉、文章第一张封面、影响阅读决策的图，不懒加载；列表下方、相关推荐、评论区头像继续懒加载。Nuxt 3 里我会根据位置判断，只给首屏最大图加 preload 和 fetchpriority，其他图才挂 loading='lazy'。preload 也只给一张，避免所有图一起抢带宽。具体字段和模块能力以官方文档为准。

<img :src="cover" :srcset="`${cover480} 480w, ${cover768} 768w, ${cover1200} 1200w`" sizes="(min-width: 768px) 720px, 100vw" :alt="title" fetchpriority="high" />

srcset 不是档位越多越好

一开始我想把每个尺寸都生成一遍，后来发现个人站没必要，反而让 CDN 缓存碎片化。现在我固定三档：480、768、1200，配合 sizes 告诉浏览器按视口选择。图片 URL 参数也尽量稳定，避免每次构建都变，否则 CDN 命中率会掉。如果用了图片处理服务，我会让同一原图派生出固定尺寸，而不是每次请求都拼新参数。

• 只保留常用三档宽度，避免生成十几份图
• 封面优先 WebP/AVIF，但保留兜底格式
• CDN 缓存键少变，别把尺寸、质量、时间戳混得太碎
• 文章正文图仍走懒加载，避免抢首屏带宽

懒加载别伤害广告和转化

站点里有广告位后，我更注意懒加载边界。广告图如果太晚加载，曝光会少；但如果首屏广告图太大，也会拖慢 LCP。我的做法是：首屏广告容器固定高度，图片提前 200px 预加载；正文内广告跟随内容懒加载，并在埋点里区分真实曝光和进入视口。这样既保住体验，也方便核对收益。

“性能优化不是把所有图片都懒加载，而是把关键资源提前，把非关键资源让路。”

改完后移动端 LCP 明显下降，搜索流量进首页后不再被大图卡住。跑分只是参考，最终还是要看真实访问、广告曝光和转化。个人站资源有限，先做收益最大的那几刀。