如何优化Next.js外部CloudFront图片的Cache-Control适配Google Lighthouse

1. 结论：CloudFront配置Cache-Control是正确解决方案 #

Next.js仅自动为/_next/static路径下的资源添加缓存头，但你的图片来自第三方API并通过CloudFront分发，这类资源的缓存规则需要在CDN层面配置。通过CloudFront设置合适的Cache-Control策略，能让浏览器和CloudFront边缘节点缓存图片资源，减少重复请求，完全符合Lighthouse对静态资源高效缓存的要求。

2. AWS控制台操作步骤 #

步骤1：进入CloudFront分发详情 #

登录AWS控制台，找到CloudFront服务，点击目标分发进入详情页面。

步骤2：编辑或创建图片资源的行为规则 #

• 切换到行为标签页，找到匹配图片资源的行为（比如路径模式为/*.jpg、/*.png的规则）；如果没有对应规则，点击创建行为，设置路径模式匹配你的图片后缀或路径。
• 点击目标行为的编辑按钮。

步骤3：配置缓存策略 #

在缓存策略和源请求策略区域：

• 选择自定义缓存策略，若没有现成的，点击创建缓存策略：
  • 填写策略名称（如Image-Long-Term-Cache）
  • 设置TTL值：默认TTL、最小TTL、最大TTL都设为31536000（1年，适合不常更新的图片）；若图片会定期更新，可根据实际情况调整（比如7天=604800）
  • 缓存键设置：保持默认（包含Host、Origin等必要请求头）即可，若图片有个性化需求（比如不同尺寸），可添加对应的查询参数到缓存键
  • 响应头设置：选择自定义响应头策略，添加Cache-Control头，值设为public, max-age=31536000, immutable（immutable告知浏览器资源不会变更，无需发起验证请求）
• 创建完成后，回到行为编辑页面，选择刚创建的缓存策略。

步骤4：保存并等待生效 #

点击保存更改，CloudFront会自动分发配置变更，通常需要5-30分钟生效。

注意事项 #

• 如果图片需要更新，务必使用版本化URL（比如路径添加哈希值image-v1.jpg），这样更新后浏览器会请求新资源，避免旧缓存影响；
• 若图片有动态更新需求，可降低TTL值，但优先推荐版本化URL+长期缓存的组合，这是Lighthouse最认可的静态资源缓存方案。

内容的提问来源于stack exchange，提问作者Cristian Rojas