使用 fetchpriority 优先级提示提升性能
通过 fetchpriority 和优先级提示控制资源加载顺序,提升 LCP 分数并改善现代浏览器中的 Core Web Vitals 指标。
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 秒。
Discover how at OpenReplay.com.
管理脚本优先级
异步和延迟脚本自动获得低优先级，这对于关键功能并不总是理想的：
<!-- 具有高优先级的关键异步脚本 -->
<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 吗？
可以，但效果有限。懒加载图像已经延迟加载直到需要时。只对立即出现在视口中的懒加载图像使用 fetchpriority=high，否则浏览器会忽略提示，直到图像进入加载阈值。
fetchpriority 是否适用于 HTTP/3 和多路复用？
是的，fetchpriority 适用于所有 HTTP 版本。虽然 HTTP/2 和 HTTP/3 通过多路复用消除了队头阻塞，但优先级提示仍然控制浏览器请求和处理资源的顺序，特别是在带宽受限的连接上。
如何调试 fetchpriority 是否真正起作用？
打开 Chrome DevTools 网络选项卡并启用 Priority 列。具有 fetchpriority 的资源显示调整后的优先级，如 High 或 Low，而不是默认值。您还可以检查 Performance 面板来测量实际的加载时间改进。
我应该对首屏所有图像使用 fetchpriority 吗？
不，只为您的单个 LCP 图像保留 fetchpriority=high。多个高优先级图像会相互竞争以及与关键 CSS/JavaScript 竞争。浏览器已经自动提升可见图像，所以只为最重要的视觉元素覆盖优先级。
