如何用 fetchpriority 和 loading 优化图片加载优先级？

图片加载优先级优化的核心只有两条：首屏最大的那张图（LCP 图片）用 fetchpriority="high" 并且绝对不要加 loading="lazy"；视口以下的图片加 loading="lazy" 且不要给它们提优先级。这两条做对，LCP 通常能明显前移；做反了，等于亲手把首屏图片推到下载队列末尾。

fetchpriority 和 loading 有什么区别？

结论：loading 决定图片「什么时候开始加载」，fetchpriority 决定图片「排队时排第几」，两者解决的是不同问题，可以叠加使用。

• loading 是 <img> 和 <iframe> 上的属性，取值 eager（默认，立即加载）和 lazy（延迟到接近视口才加载）。Chrome 77（2019 年 8 月）、Firefox 75（2020 年 4 月）、Safari 15.4（2022 年 3 月）起支持。
• fetchpriority 是网络优先级提示，取值 high、low、auto（默认）。Chrome 101（2022 年 4 月）起支持 <img> 上的该属性，Safari 17 和 Firefox 121 之后跟进。不支持它的浏览器会直接忽略，不会报错、不会降级出错。
• 结论：在 Chrome 里图片的默认优先级低于阻塞渲染的关键资源，fetchpriority="high" 的作用就是把这张图提到与关键 CSS 同级，让它更早进入连接和下载队列。

首屏的 LCP 图片怎么配？

结论：LCP 图片用默认的 loading="eager"（可以直接不写）+ fetchpriority="high"，并补齐 width、height、srcset、sizes。

<img src="hero-1600.jpg"
     srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
     sizes="100vw"
     width="1600" height="900"
     fetchpriority="high"
     decoding="async"
     alt="产品主图">

最容易犯的错是给首屏图片加 loading="lazy"。Chrome 检测到后会直接在控制台打出警告「Lazy load image was detected on LCP」，Lighthouse 里对应的审计项是「Largest Contentful Paint image was lazily loaded」。懒加载的代价是图片要等布局完成、进入触发距离才开始请求，在 4G 网络下这一延迟往往是几百毫秒量级。

另外，Chrome 的懒加载并不是「进视口才加载」：在 4G 网络下，图片距离视口 1250px 时就会开始请求，慢速网络下这个阈值还会更大。所以折叠线下方不远处的大图仍然可能和你首屏的 LCP 图抢带宽——这也是为什么首屏关键图需要显式 high。

视口以下的图片怎么配？

结论：只加 loading="lazy" 就够了，不要顺手加 fetchpriority="high"。

给页面里所有图片都加 fetchpriority="high" 是最常见的反模式：当每张图都是 high，等于没有 high，浏览器仍然要靠启发式规则排队，白白浪费了一次优化机会。真正该用 fetchpriority="low" 的场景是首屏轮播图里非第一帧、装饰性大图、以及明显要被替换掉的占位图。

轮播图的正确写法是：第一帧 fetchpriority="high"，其余帧 loading="lazy"，切换时再补 eager。

preload 什么时候该用？

结论：只有当图片在 HTML 解析早期「发现不了」时才用 <link rel="preload" as="image" fetchpriority="high">，典型是 CSS 背景图和 JS 动态插入的图片。

<link rel="preload" as="image" href="hero-1600.avif"
      imagesrcset="hero-800.avif 800w, hero-1600.avif 1600w"
      imagesizes="100vw"
      fetchpriority="high">

注意 imagesrcset 和 imagesizes 只在 rel="preload" as="image" 上生效，用它才能让浏览器在响应式场景下 preload 正确的候选图。preload 是把双刃剑：它会被无条件提前下载，如果 preload 了一张后来又没用的图，等于从 LCP 图手里抢带宽，反而拖慢首屏。

怎么验证配置生效了？

结论：DevTools 的 Network 面板和 Performance 面板都能直接看到每张图的优先级。

具体操作：打开 DevTools → Network 面板 → 右键表头勾选 Priority 列，看 LCP 图是否显示为 High，折叠线以下的图是否在滚动前不发起请求。Performance 面板录制一次加载，在 Network 轨道里也能看到优先级标签。最后用 Lighthouse 跑一次，确认没有「Largest Contentful Paint image was lazily loaded」这条告警。测试时记得把网络节流到 Slow 4G，本地千兆网络下这些差异会被完全抹平。

一句话收尾：首屏 LCP 图 fetchpriority="high" 且不懒加载，视口以下的图 loading="lazy" 且不提优先级，需要提前发现的图才用 preload —— 三条规则覆盖 90% 的图片加载优先级问题，剩下的靠 DevTools 的 Priority 列逐一核对。