Link rel=preload：优先考虑资源以获得更好的站点速度

2016 年，w3c 与 Yoav Weiss 一起为 Chrome 发布了一个名为link rel="preload"的新网络标准，为更快的加载时间开辟了新途径。

六年后，预加载成为顶级网站为提高加载速度和用户体验而采用的排名第一的资源优先级排序技术。

条形图显示了按 CrUX 等级划分的 rel="preload" 的采用情况。 资料来源：网络年鉴 2021

link rel=preload 的日益流行证明了它的有效性。 这也使得它容易被滥用。

由于其灵活性，预加载重要资源需要更深入的知识，才能利大于弊。

在本文中，您将了解到：

• 资源优先级如何运作
• link rel preload 是什么
• 您可以预加载哪些网页元素
• 什么时候应该（不应该）使用 link rel=preload
• 哪些 Core Web Vitals 指标预加载得到改善
• 链接 rel=preload 在真实网站中的好处

让我们直接开始吧！

查看您的网站使用 NitroPack 可以提高多少速度

资源优先级解释

手动资源优先级排序是您将现代浏览器从页面加载过程中进行猜测的方式。

然而，在您开始影响加载资源的方式和时间之前，我们应该介绍一些基础知识。

默认情况下，浏览器会尝试找出要请求的资产以及请求的顺序。 当浏览器下载资源时，它总是被分配一个优先级：最高、高、中、低或最低。

优先级取决于资源类型（例如文本、图像、样式表、脚本、视频）和资源引用在文档中的位置。

在选择要预加载的资产时，您必须注意渲染阻塞资源，而不是阻止浏览器先下载它们。 否则，您最终可能会显示一个空白页面，而不是更快地加载它。

优化自动驾驶仪上的关键资源！ 使用 NitroPack 查看您的站点。

什么是链接 rel=preload？

简而言之， link rel=preload是一个命令，用于告诉浏览器您希望它们比正常情况下更快地获取重要资源。

与预取和预连接等其他资源优先级排序技术不同，预加载不仅仅是一种提示，而是一种声明。 这意味着浏览器被迫获取您知道对页面体验至关重要的资源。

您可以通过将带有 rel="preload" 的链接标记添加到 HTML 文档的头部来预加载资源：

< link rel ="preload" as ="script" href ="critical.js">

别担心，我们稍后会详细介绍。

哪些浏览器支持链接 rel=preload？

所有主流浏览器都支持预加载，使网站所有者和开发人员能够提供更快的加载时间和无限制的用户体验。

有关支持的浏览器版本的详细分类，请参阅“我可以使用吗”下的此表。

link rel=preload 是必要的吗？

预加载关键资源可让您进行精细控制以定义自定义加载逻辑。 您的站点是否需要它取决于您的审核结果。

对于高质量的关键请求评估，我们建议探索手动网页速度测试和内部收集的现场实验室数据。

超跳转到：如何检查要预加载的资源。

link rel=preload 渲染阻塞吗？

当用于大量非必要文件时，预加载标签会干扰页面的正确呈现。 在这种情况下，浏览器没有关注重要的渲染阻塞资源，而是忙于处理大量低优先级文件。

例如，Asana 主页为低重要性的 JavaScript 文件提供了 26 个预加载标签。 这会导致页面呈现出现大量延迟，从而损害用户体验。

（Asana 主页示例）请求瀑布图中的绿线显示页面开始呈现的时间。 来源：DebugBear 的文章

链接 rel=”preload” 与 rel=”prefetch”

当预加载首次可用时，许多用户对其与现有预取指令相比的优势感到困惑。

Prefetch 专注于最有可能成为未来导航必不可少的资源（意味着在当前页面之后）。 另一方面，预加载处理当前导航的资源。

我可以预加载哪些网页元素？

如前所述，link rel preload 适用于通常被浏览器发现较晚的资源。

您可以预加载的资源包括：

• 声音和音乐文件
• 视频（MP4、MP3、WebM）
• 音频 WebVTT 轨道
• JavaScript文件
• CSS 样式表
• 网络字体（TTF、EOT、WOFF、WOFF2）
• 图像（AVIF、WebP、JPG 和 JPEG 或 PNG）
• XHR 和获取 API 请求
• 网络工作者
• 多媒体嵌入和对象

preload 指令具有强大的“as”值。 必须告诉浏览器在不延迟更重要的文件或落后于不重要的文件的情况下为您预加载的资源赋予什么优先级。

以下是您可以指定的“as”值的便捷列表：

Yoav Weiss（谷歌 Chrome 开发者关系团队成员）还指出：

“...preload 不会阻止窗口的onload事件，除非该资源也被阻止该事件的资源请求。”

让我们回顾一下网站所有者和开发人员选择预加载的最常见资源。

如何链接 rel=preload 图像

您的网站上始终至少有一个页面在视口中有一个大图像，从一开始就欢迎网站访问者。 此类图像非常适合预加载。

请记住，通过将带有 rel="preload" 的链接标记添加到 HTML 文档的头部来预加载资源。 像这样：

结果是您的图像加载速度更快，并改进了最具挑战性的核心网络生命指标之一 - LCP。

但是，要预加载响应式图像，您需要使用imagesrcset和imagesizes属性来帮助浏览器根据屏幕尺寸选择合适的图像进行下载。

优化您的所有图像以实现快速加载时间和自动驾驶仪的响应能力。 使用 NitroPack 查看您的站点。

如何链接 rel=preload 网络字体

在浏览器下载并解析 CSS 文件之前，不会获取在 CSS 文件中使用 @font-face 规则定义的字体。 这就是为什么网络字体是排名靠前的网站选择预加载的第二受欢迎的资产。

这是一个示例片段：

如何链接 rel=preload JavaScript 文件

为了提高交互时间等响应指标，我们建议您拆分庞大的 JavaScript 包并仅预加载关键块。

这样，浏览器就可以将获取与执行分开，并在下载整个 JS 包之前更早地发现该特定资源。

它会是这样的：

< link rel ="preload" as ="script" href ="late_discovered.js">

我什么时候应该使用链接相对预加载？

这是“视情况而定”的情况。

一般规则是仅预加载您知道对于访问者登陆页面时的首次交互必不可少的较晚发现的资产。

如何检查要预加载哪些资源？

正如我们之前提到的，确定要预加载哪些资源的最佳方法是审核网页的加载方式。

幸运的是，您可以使用 Chrome DevTools 中的请求瀑布图来识别要预加载的资源。

第 1 步：访问大多数访问者登陆的网页并“检查”它

第 2 步：导航到“网络”选项卡并刷新页面以生成瀑布图

第 3 步：右键单击“名称”部分以打开“优先级”列

第 4 步：探索资源的加载方式以及为它们分配的优先级，以查明可能的预加载资产

此外，您的 Lighthouse 报告有一个“机会”部分，将您的关键请求链中迟到发现的资产标记为预加载候选资产：

我怎么知道预加载是否正常工作？

在确定预加载候选对象后，您可以开始测试链接 rel=preload 是否正常工作。

在 DevTools 中使用相同的请求瀑布图来执行此操作。 如果您正确选择了要预加载的资产并如前所示放入有效属性，您应该会看到页面加载时间有所改善。

这是之前和之后的示例：

（预加载前）：仅在样式表“main.css”之后下载字体文件“Pacifico-Bold.woff2”。 （预加载字体文件后）：字体的下载与样式表同时进行。

如何不滥用链接 rel=preload

鉴于一些适当的预加载标签可以显示令人印象深刻的结果，很容易被带走。

但是由于预加载的性质，可能会出现一系列性能问题。

• 对浏览器正常行为的不必要干扰
• 过度使用资源（即比平时更快地用完带宽）
• 对关键渲染路径的有害影响阻止浏览器做正确的事情

错误 #1：预加载太多资源

没有您应该瞄准的确切数字，但在选择要预加载的资源时要非常小心。 请记住，您应该定位对首次与网页交互至关重要的较晚发现的资产。

错误 #2：预加载未使用的内容

通常情况下，我们会在公共标头中找到一个链接 rel=preload，即使预加载资源仅位于一个网页（例如登录页面）上。

预加载未使用内容的警告消息

这可能只是一个简单的错误或编码不足。 在这种情况下，将通用包拆分为特定模板的较小目标包是一种更好的方法。

错误 #3：预加载非必要资源

仅预加载任何资源不会让您获得所需的速度提升。 对首屏体验的呈现和交互性不重要的资产最好保留较低的优先级。

相反，旨在找到浏览器发现的元素比您希望的晚。

错误 #4：预加载不存在的内容

这种情况很少发生，但一旦发生，结果就是 404 页面。 这在预加载时是不行的，您应该始终仔细检查资源是否确实有效。

rel=preload 改善了哪些 Core Web Vital 指标？

到目前为止，我们已经看到了预加载速度优化能力的不可否认的证据。 它可以缩短加载时间，改进性能指标和响应能力，并帮助您留下良好的第一印象。

以下是正确预加载后改进最大的指标：

• Largest Contentful Paint (LCP) ：大型首屏资源（如英雄图片和大块文本）是很好的 LCP 候选者。 更快地交付它们可以帮助您改善核心网络生命指标网站最难解决的问题。
• Cumulative Layout Shift (CLS) ：预加载网络字体显示字体相关布局偏移的显着改进，例如 Flash of Unstyled Text (FOUT) 和 Flash of Invisible Text (FOIT)。
• First Input Delay (FID)和Interaction to Next Paint (INP) ：预加载支持重要交互的 JavaScript 可帮助您根据用户的意图达到更好的响应水平。

链接 rel=preload 流行网站的好处

2017 年，Chrome Data Saver（现已停用）团队在脚本和 CSS 样式表上应用了预加载，发现受影响页面的 First Contentful Paint 改进平均缩短了 12%。

使用 link rel=preload 改进加载指标的其他成功案例包括：

1. 预加载网络字体时，Shopify 将 Chrome 桌面上的下一次绘制时间缩短了 50%（1.2 秒），这完全消除了不可见文本的 Flash；
2. Flipkart 通过预加载他们的密钥包来减少大量的主线程空闲；
3. 通过预加载 9 个基本 API 调用将页面呈现指标提高 10% 的概念；
4. 《金融时报》通过使用链接预加载标题，将显示刊头图像所需的时间缩短了 1 秒。

使用预加载（左）和不使用预加载（右）的 Shopify。 资料来源：Addy Osmani 的文章

加入前31%的高速网站！ 亲眼目睹 NitroPack 的影响。

概括

Link rel=preload 是一种有效的资源优先级排序技术，可加快您的网站速度并在首次接触时提供更好的用户体验。

谨慎使用此指令，并且仅用于对首屏体验至关重要的较晚发现的资源。 确保首先在 Chrome DevTools 和 Lighthouse 的帮助下分析浏览器如何下载和解析您的资产。

正确实施 rel=”preload” 将提高站点响应能力和性能指标，这对您的在线业务的成功至关重要。