Next.js 图片懒加载：LCP 优化指南

2026-08-29

Next.js 的 <Image> 组件默认启用懒加载——viewport 外的图片不会提前下载。这是好事，但有一个重要例外：LCP（Largest Contentful Paint）图片不应该被懒加载。LCP 是用户最先看到的内容，延迟加载它会直接损害性能评分和用户体验。

什么时候应该懒加载，什么时候不应该

• LCP 图片（首屏主图、hero 图）：必须立即加载，用 fetchpriority='high'
• 首屏内其他图片：应该立即加载，不需要懒加载
• 首屏外的图片：懒加载完全没问题，用 loading='lazy'（Next.js Image 默认就是）
• 极低优先级图片（页脚缩略图）：用 placeholder='empty' + loading='lazy' 延迟到浏览器空闲时

Next.js Image 组件的懒加载配置

默认行为：Next.js Image 对所有 viewport 外图片自动应用 loading='lazy'。你不需要手动添加。但 LCP 图片需要特殊处理——手动设置 fetchpriority='high' 和 priority 属性。

LCP 图片的正确写法

• 添加 priority 属性：Next.js 会预加载这张图片，优先级高于页面其余资源
• 添加 fetchpriority='high'：浏览器知道这张图片对 LCP 至关重要
• 确保图片尺寸正确，避免 CLS 布局偏移

常见问题 FAQ

立即优化你的图片加载

检查你的 Next.js 项目中哪些图片是 LCP 候选，给它们加上 priority 和 fetchpriority='high'，其余图片保持默认懒加载。