使用 <link rel="preload"> 预加载资源会向浏览器发出信号，表明很快就会需要某个资源。不过，预加载会沿用资源类型的默认优先级，尤其是图片，其优先级较低。使用 fetchpriority 可让您优化此相对优先级，尤其是确保以高优先级预加载图片，以便它们能够更早开始并使用更多带宽资源。
如何实现
- 确定预加载候选资源：找出浏览器未尽早发现（例如，CSS 中的视频海报图片或背景图片），但对网页外观至关重要的资源。
- 提升关键图片预加载的优先级：对于 LCP 图片或其他默认情况下未优先加载的关键图片，请使用
<link rel="preload" fetchpriority="high">确保其优先级高于其他预加载。请注意，默认情况下，字体已具有高优先级。 - 降低非关键预加载资源的优先级：对于初始渲染不重要的资源（例如背景视频或次要字体），请使用
<link rel="preload" fetchpriority="low">。 - 与资源类型协调：请注意，不同的
as类型具有不同的默认优先级；必要时，请使用fetchpriority替换这些默认值。
示例代码
<!-- Elevate priority for a video poster image that acts as the LCP candidate -->
<link rel="preload" href="/images/video-poster.jpg" as="image" fetchpriority="high">
<!-- Elevate priority for a critical LCP image that is hidden in CSS -->
<link rel="preload" href="/images/hero-background.jpg" as="image" fetchpriority="high">
<!-- Deprioritize a secondary font to avoid network contention -->
<link rel="preload" href="/fonts/secondary-font.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin>
最佳做法
- 强制性：最多只能在 1-2 个关键图片预加载上使用
fetchpriority="high"，以避免网络争用和优先级提升效果被稀释。 - 强制性：对 Largest Contentful Paint (LCP) 图片使用
fetchpriority="high"。 - 建议：将网页上的预加载总数限制为最多 2 张图片和 2-3 种基本字体，以防止带宽争用。
- 请使用
fetchpriority="low"预加载您希望浏览器尽早开始加载但又不影响关键资源（尤其是非关键字体）的资源。 - 务必正确指定
as属性，以确保使用预加载。 - 务必优先通过
<img>标记在 HTML 中静态发现关键资源（例如 LCP 图片），而不是依赖于预加载背景图片。 - 务必确保字体预加载始终具有
crossorigin属性（即使是同源）。 - 请勿使用已弃用的
importance属性。它已被fetchpriority取代。
后备策略
<link rel="preload"> 上的 fetchpriority 属性是一项渐进增强功能。不支持该属性的浏览器仍会使用该资源类型的默认优先级预加载资源。为确保兼容性，请务必提供正确的 as 和 type 属性。