使用优先级提示和 fetchpriority 加速资源加载

您最关键的资源加载速度有多快？

这个确切的问题让网站所有者（和经验丰富的网络专家）如痴如醉。 碰巧它就是在最初几毫秒内成就或破坏您的网站的原因。

在优化资源加载方面，您有两种选择：

1. 完全依靠浏览器的机制以最佳顺序下载和获取资源。
2. 尝试通过实施资源提示来帮助他们。

不幸的是，与现代浏览器一样好，每个站点/应用程序的设置和上下文都不同。 虽然他们非常擅长分配资源优先级，但在某些情况下，这还不够。

唉，资源提示对资源优先级的影响有限。

幸运的是，您可以将一个新提示添加到您的 Web 性能工具箱中——优先提示。

在本文中，您将了解更多关于：

• 什么是优先提示；
• 何时使用它们；
• 如何通过 fetchpriority 实现它们；
• 如何在您的网站上测试它们。

让我们开始！

什么是优先提示？

优先级提示是一种信号，允许网站所有者和开发人员在浏览器加载资源（例如，图像、字体、CSS、脚本和 iframe）时指示它们的优先级。

浏览器在构建网页的过程中要下载各种资源。 作为优先资源，它首先请求并下载 HTML 文档。

但是浏览器如何确定接下来要加载什么？

好吧，浏览器对每种资源类型都有一组预先确定的优先级：

这些默认优先级通常工作得很好，从而产生良好的 Web 性能。

然而，正如 Addy Osmani 在他关于优先级提示的文章中提到的那样，浏览器可以对接下来要获取的内容做出很好的有根据的猜测。

但他们并不像你那样了解你的项目。

因此，可能需要进行一些微调：

“像 Chrome 这样的浏览器确实具有启发式方法，可以根据信号（例如它们是否在视口中）来尝试以适当的优先级获取资源。也就是说，如果没有优先级提示，Chrome 只能在布局后提高视口内图像的优先级已经完成。这通常为时已晚，此时，它可以与其他所有内容竞争。考虑使用提示的另一个原因是，作为页面作者，您可能知道用户首先看到的最重要的内容，并且可以通知浏览器，以便它可以针对您的用例进行优化。”

以前，您唯一能做的就是使用预加载或预连接。

而且虽然preload是浏览器需要遵守的强制性指令，但在某些情况下，预加载的资源仍然可以获得较低的优先级。

例如，预加载的最大内容绘制 (LCP) 图像可以获得低优先级并被其他高优先级资源推回。 在这种情况下，优先提示可以完美地补充预加载并帮助加载资源。

这是关于优先提示的网络研讨会，Pat Meenan 谈到了 Chrome 中的优先提示，甚至称它们为 LCP 的“作弊代码”：

这是优先提示功能的一个典型例子。

现在，让我们看看何时应该在 Web 性能策略中实施优先提示。

何时使用优先提示

根据 Google 的说法，优先提示可以在 5 种主要情况下提供帮助：

1. 您有几个首屏图像，但它们不需要具有相同的优先级。 例如，在图像轮播中，只有第一个可见图像需要比其他图像更高的优先级。
   
2. 视口内的英雄图像以低优先级开始。 布局完成后，Chrome 发现它们在视口中并提高它们的优先级（不幸的是，开发工具只显示最终优先级 - WebPageTest 将同时显示两者）。 这通常会显着延迟加载图像。 在标记中提供优先级提示可以让图像以高优先级开始并更早地开始加载。

注意：将脚本声明为 async 或 defer 会告诉浏览器异步加载它们。 但是，如上图所示，这些脚本也被分配了“低”优先级。 您可能希望在确保异步下载的同时提高它们的优先级，特别是对于任何对用户体验至关重要的脚本。

您可以使用 JavaScript fetch() API 异步获取资源或数据。 浏览器为 Fetch 分配了高优先级。 在某些情况下，您可能不希望所有提取都以高优先级执行，而是更喜欢使用不同的优先级提示。 这在运行后台 API 调用并将它们与响应用户输入的 API 调用（例如自动完成）混合时会很有帮助。 后台 API 调用可以标记为低优先级，交互式 API 调用可以标记为高优先级。

浏览器为 CSS 和字体分配了高​​优先级，但所有这些资源可能并不同样重要或对 LCP 而言是必需的。 您可以使用优先级提示来降低其中一些资源的优先级。

几乎所有网站都属于前两种情况。 要确定您是否应该处理其他任何问题，请深入研究您的 (HTML/JS) 代码或寻求 Web 开发人员的帮助。

如何实现优先级提示：fetchpriority 属性

您可以使用 fetchpriority HTML 属性实现优先提示。

您可以将属性用于：

• 关联
• 图像
• 脚本
• iframe 标签

fetchpriority属性接受以下三个值之一：

• high：表示您认为资源很关键，并希望浏览器对其进行优先级排序。
• 低：表示您认为资源不太重要，并希望浏览器取消它的优先级。
• auto：当您没有偏好并让浏览器决定适当的优先级时的默认值。

或者，您可以使用 JavaScript Fetch API：

使用fetchpriority属性时要记住的几件事：

• fetchpriority不能确保较高优先级的资源将在相同类型的其他（较低优先级）资源之前加载。
• fetchpriority不应用于控制加载顺序本身。
• fetchpriority不是强制指令，它不能强制浏览器获取资源或阻止它获取。 是否要获取资源取决于浏览器。

重要提示：与资源提示类似，应谨慎使用优先级提示，因为过度使用可能会导致速度变慢而不是性能提升。

如何使用优先提示测试您的网站

在运行测试之前，您应该知道优先提示仅在 Chrome 101（或更高版本）和 Edge 101（或更高版本）中可用：

现在到手头的问题：

最简单的方法是使用工具，因此您不必手动更改代码。

幸运的是，WebPageTest 的实验功能可以让您在不更改代码的情况下测试优先提示等性能功能。

但是，WebPageTest 的实验功能是他们付费订阅的一部分，因此您需要计划一些额外的费用。

相反，如果您有技术技能，您可以自行微调您网站的代码并测试优先提示的影响。

确保在每次更改后运行测试。

回顾

我们涵盖了很多内容，所以这里快速回顾一下最重要的几点：

• 优先级提示允许您指示站点资源的优先级。
• 优先提示可以帮助您加快加载首屏图像、英雄图像（LCP 元素）、异步和延迟脚本、CSS 和字体文件。
• 优先级提示可以通过 fetchpriority 属性来实现。
• 您可以将 fetchpriority 属性与链接、img、脚本和 iframe 标记一起使用。
• fetchpriority 属性接受三个值之一：high、low 和 auto。
• 警告：应谨慎实施优先提示，因为过度使用它们可能会导致性能下降而不是提高速度。
• fetchpriority 不是强制指令，它不能强制浏览器获取资源或阻止它获取。 是否要获取资源取决于浏览器。
• 优先提示在 Chrome 101 或更高版本中可用。

要衡量优先提示对您网站的影响，请在每次更改后运行测试。

流行的测试工具：

• PageSpeed 见解
• GTMetrix
• 网页测试
• 灯塔
• 王国