Back

使用 fetchpriority 优先级提示提升性能

OpenReplay Team

Sep 16, 2025 · 2 min read

Fetch Priority API 通过 fetchpriority 属性让您直接控制浏览器如何优先处理资源加载。这个 HTML 属性通过确保关键资源优先加载，而让不太重要的资源等待，从而帮助优化核心 Web 指标。

核心要点

fetchpriority 属性可以通过 high、low 或 auto 值覆盖浏览器默认的资源优先级
LCP 图像从优先级提示中获益最多，在实际测试中显示 0.5-2 秒的改进
优先级提示与 preload 和 preconnect 互补，但在加载管道中服务于不同目的
浏览器支持涵盖 Chrome 102+、Safari 17.2+ 和 Firefox 132+，具有优雅降级

理解 fetchpriority 属性的性能影响

浏览器根据类型和位置自动为资源分配优先级。<head> 中的 CSS 获得最高优先级，而图像开始时优先级较低。fetchpriority 属性让您可以通过三个值覆盖这些默认设置：

high：将资源优先级提升到默认值之上
low：将优先级降低到默认值之下
auto：使用浏览器默认值（默认值）

以下是它在不同元素上的工作方式：

<!-- 提升 LCP 图像优先级 -->
<img src="hero.jpg" fetchpriority="high" alt="Hero image">

<!-- 降低非关键脚本优先级 -->
<script src="analytics.js" fetchpriority="low"></script>

<!-- 使用自定义优先级预加载 -->
<link rel="preload" href="font.woff2" as="font" fetchpriority="high" crossorigin>

与 Preload 和 Preconnect 的主要区别

虽然 preload 强制早期资源发现，preconnect 预热服务器连接，但 fetchpriority 属性专门控制发现后的下载优先级。可以这样理解：

Preload：“早期下载此资源”
Preconnect：“准备服务器连接”
Fetchpriority：“下载时使用此优先级级别”

这些工具相互补充。预加载的图像默认仍获得低优先级——添加 fetchpriority="high" 确保它在其他低优先级资源之前下载。

使用 fetchpriority 优化 LCP 图像

fetchpriority 属性对性能最有影响的用途是提升最大内容绘制（LCP）图像。默认情况下，浏览器只有在布局后才发现视口图像的重要性，从而导致延迟。

<!-- 不使用 fetchpriority：图像在队列中等待 -->
<img src="product-hero.jpg" alt="Featured product">

<!-- 使用 fetchpriority：立即高优先级下载 -->
<img src="product-hero.jpg" fetchpriority="high" alt="Featured product">

实际测试显示，仅通过向主要图像添加此属性，LCP 就能改进 0.5-2 秒。

管理脚本优先级

异步和延迟脚本自动获得低优先级，这对于关键功能并不总是理想的：

<!-- 具有高优先级的关键异步脚本 -->
<script src="app-core.js" async fetchpriority="high"></script>

<!-- 非关键跟踪脚本保持低优先级 -->
<script src="tracking.js" async fetchpriority="low"></script>

<!-- 延迟加载的增强脚本 -->
<script src="enhancements.js" defer fetchpriority="low"></script>

控制 Fetch API 优先级

JavaScript fetch 请求默认为高优先级。对于后台操作，明确降低它们的优先级：

// 用户触发的数据（保持高优先级）
const userData = await fetch('/api/user');

// 后台同步（较低优先级）
const suggestions = await fetch('/api/suggestions', {
  priority: 'low'
});

// 页面加载期间的关键 API 调用
const config = await fetch('/api/config', {
  priority: 'high'
});

优化非关键资源

并非所有 CSS 和字体都值得高优先级。使用 fetchpriority 来降低补充资源的优先级：

<!-- 关键样式首先加载 -->
<link rel="stylesheet" href="critical.css">

<!-- 主题变体可以等待 -->
<link rel="preload" as="style" href="theme-dark.css" 
      fetchpriority="low" onload="this.rel='stylesheet'">

<!-- 图标字体不会立即可见 -->
<link rel="preload" as="font" href="icons.woff2" 
      crossorigin fetchpriority="low">

fetchpriority 实现最佳实践

fetchpriority 属性是一个提示，而不是命令。浏览器可能会根据其启发式方法覆盖您的偏好。遵循以下准则：

谨慎使用：只调整对性能有可测量影响的资源的优先级。从 LCP 图像和关键脚本开始。

策略性地与 preload 结合：对于触发 LCP 的 CSS 背景图像：

<link rel="preload" as="image" href="hero-bg.jpg" fetchpriority="high">

测试影响：使用 Chrome DevTools 网络面板验证优先级更改。查找 Priority 列并观察页面加载期间的优先级变化。

考虑带宽：优先级提示在较慢的连接上最重要，因为资源竞争有限的带宽。HTTP/1.1 连接比 HTTP/2 或 HTTP/3 受益更多。

避免过度使用：将所有内容设置为高优先级会适得其反。每页专注于 2-3 个真正关键的资源。

浏览器支持和实现

fetchpriority 属性在现代浏览器中享有广泛支持：

Chrome/Edge：102+
Safari：17.2+
Firefox：132+

较旧的浏览器简单地忽略该属性，使其成为渐进式增强。不需要 polyfills。

结论

fetchpriority 属性为您提供对资源加载优先级的细粒度控制，直接影响核心 Web 指标性能。专注于提升 LCP 图像、管理异步脚本优先级，以及降低非关键资源竞争。记住这是一个提示——测试您的更改并测量实际性能影响，而不是假设浏览器总是会遵循您的优先级。

常见问题

可以，但效果有限。懒加载图像已经延迟加载直到需要时。只对立即出现在视口中的懒加载图像使用 fetchpriority=high，否则浏览器会忽略提示，直到图像进入加载阈值。

是的，fetchpriority 适用于所有 HTTP 版本。虽然 HTTP/2 和 HTTP/3 通过多路复用消除了队头阻塞，但优先级提示仍然控制浏览器请求和处理资源的顺序，特别是在带宽受限的连接上。

打开 Chrome DevTools 网络选项卡并启用 Priority 列。具有 fetchpriority 的资源显示调整后的优先级，如 High 或 Low，而不是默认值。您还可以检查 Performance 面板来测量实际的加载时间改进。

不，只为您的单个 LCP 图像保留 fetchpriority=high。多个高优先级图像会相互竞争以及与关键 CSS/JavaScript 竞争。浏览器已经自动提升可见图像，所以只为最重要的视觉元素覆盖优先级。

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.