fetchpriority 有什么用？资源优先级如何影响页面性能？

简化版

fetchpriority 用来提示浏览器某个资源的下载优先级，例如首屏大图可以设置 fetchpriority=\"high\"，非关键图片可以设为 low。它影响资源调度，但不是强制命令。优化资源优先级要先识别关键资源，避免让不重要资源抢占带宽，也不要把所有资源都设成 high。

详细版

浏览器会根据资源类型、位置、是否阻塞渲染等因素安排请求优先级。开发者可以通过 preload、async/defer、懒加载和 fetchpriority 提供额外提示。

手段	作用	示例
fetchpriority	调整已有资源优先级	首屏 LCP 图片
preload	提前发现关键资源	字体、关键 CSS、首屏图
loading=\"lazy\"	降低屏幕外图片优先级	长页面图片
defer	延迟脚本执行到解析后	非阻塞业务 JS

<img
  src="/hero.webp"
  width="1200"
  height="600"
  fetchpriority="high"
  alt="活动主视觉"
/>

优先级优化的目标不是让所有资源更快，而是让关键资源先快起来。

完整版教学

一、资源优先级为什么重要

浏览器同时能发起多个请求，但网络带宽、连接数和服务器处理能力都有限。如果非关键资源太早占用带宽，关键资源就会排队。

首屏性能尤其依赖关键资源顺序。LCP 图片、关键 CSS、核心字体和入口 JS 如果被延后，用户会明显感觉页面慢。

二、fetchpriority 解决什么问题

有些资源浏览器能发现，但默认优先级不一定符合业务。典型例子是首屏大图：浏览器看到 <img> 后才请求，而且可能优先级不够高。

fetchpriority="high" 可以告诉浏览器这张图很重要，应提高下载优先级。

<img src="/banner.avif" fetchpriority="high" width="960" height="480" alt="banner" />

三、它和 preload 的区别

preload 是“提前发现资源”，fetchpriority 是“调整资源优先级”。两者可以配合，但不能滥用。

对比	preload	fetchpriority
重点	让浏览器早点知道资源	影响请求调度优先级
常见对象	字体、CSS、LCP 图	图片、script、fetch
风险	预加载无用资源浪费带宽	high 太多导致优先级失效

四、哪些资源适合 high

适合提高优先级的资源通常满足：

• 首屏可见。
• 影响 LCP 或主要内容呈现。
• 资源体积较大，晚开始会拖慢体验。
• 不会被 CSS 背景图或 JS 动态插入延迟发现。

屏幕外图片、非关键广告、推荐位、埋点脚本不应该抢高优先级。

五、如何观察优先级

Chrome DevTools Network 面板可以显示 Priority。也可以结合 Performance 面板看关键资源在瀑布图中的开始时间和完成时间。

如果 LCP 图片开始请求很晚，就要分析它是被发现晚、优先级低，还是被其他资源抢占。

六、优先级只是提示

浏览器最终会综合自身策略、网络状态和资源类型决定调度。fetchpriority 不是强制命令，也不是所有浏览器和所有资源类型都表现完全一致。

所以优化后要用 Lab 和 RUM 验证，不要只看代码写了属性。

七、常见误区与追问

• 误区：所有首屏资源都应该设 high。 high 太多会互相竞争，关键资源反而没有真正突出。
• 误区：fetchpriority 可以替代 preload。 一个管优先级，一个管提前发现，解决的问题不同。
• 误区：加了 high LCP 一定下降。 如果瓶颈在 TTFB、图片体积或主线程渲染，优先级提示收益有限。
• 追问：首屏背景图怎么办？ CSS 背景图发现较晚，可以考虑 preload 对应图片资源。
• 追问：非首屏图片怎么处理？ 通常使用 loading=\"lazy\" 并避免设置高优先级。
• 追问：怎么证明它有效？ 看 Network 瀑布图、LCP 元素加载时间和线上 LCP 分位数变化。

八、加强记忆

资源优先级记成“关键资源别排队”。preload 负责早发现，fetchpriority 负责调度提示，懒加载负责降低非关键资源优先级。优化只给真正关键资源开绿灯。