Next.js Image预加载警告问题（Chrome严格模式下）

一、添加priority后出现「预加载资源未在窗口加载后几秒内使用」警告的原因 #

• next/image的priority属性会自动为图片生成<link rel="preload">标签，强制浏览器将该图片列为最高优先级资源进行预加载
• Chrome严格模式会监控预加载资源的实际使用时机：如果预加载的资源在window.load事件触发后的几秒内，没有被实际渲染到页面的可视区域中，就会触发这个警告
• 具体场景下的诱因：
  • SSG生成的静态HTML中，preload标签已经被插入到<head>，但客户端hydration（水合）过程中，图片组件可能因条件渲染、父组件动态加载、CSS隐藏等逻辑，导致实际渲染时机晚于预加载完成的时间
  • 页面其他资源（如脚本、样式）的加载阻塞了图片DOM节点的渲染，使得预加载的图片资源暂时无法被页面使用

二、移除priority后出现「LCP图片需添加priority」警告的原因 #

• 首屏图片属于*LCP（最大内容绘制）*元素，这是Core Web Vitals中衡量页面加载性能的核心指标
• next/image默认对未标记priority的图片启用懒加载逻辑，这会延迟LCP图片的加载启动时机，进而拉长LCP时间，影响页面性能评分
• Chrome的性能检测工具会识别出首屏LCP图片未被设置高优先级加载，因此触发警告，要求通过priority属性提升该图片的加载优先级，优化LCP指标

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