如何预加载关键请求以获得更好的核心网络生命力

并非网站的所有资源都同样重要。

是的，您的网站完美地外观和运行都需要它们，但是当涉及到其性能时，有些必须具有更高的优先级。

否则，您可能会面临页面加载缓慢的风险，并且 PageSpeed Insights (PSI) 报告中会出现一长串警告。

其中之一是 –预加载密钥请求。

在接下来的几行中，您将了解什么是关键请求、为什么修复“预加载关键请求”警告很重要，以及最后但并非最不重要的 – 如何执行此操作。

• 预加载密钥请求是什么意思
• 预加载关键资源将如何提高您的网站速度
• 如何识别您应该预加载的关键请求
• 如何修复预加载密钥请求警告
• 自动预加载关键请求

请继续阅读。

预加载密钥请求是什么意思？

通过预加载关键请求，您可以告诉浏览器哪些是需要提前下载的最关键资产。 这使得最重要的文件能够更快地加载，特别是当它们稍后会在过程中被发现和下载时。

但这提出了一个问题：

是什么让请求变得至关重要？

关键请求是显示在页面初始视口（或我们市场喜欢称其为首屏）中的资源。

例如，以下是我在笔记本电脑上加载 NitroPack 主页时看到的内容：

所有在首屏加载的资源都被认为是关键的。 因此，浏览器应该以更高的优先级下载和渲染它们，以便为用户提供即时的加载体验。

一般来说，浏览器的算法非常擅长对页面最关键的资源进行优先级排序。 事实上，当浏览器下载资源时，它会为其分配一个优先级：

• 最高
• 高的
• 中等的
• 低的
• 最低

然而，作为网站的所有者/开发者，您对哪些资源比其他资源更重要有宝贵的见解。 因此，通过预加载它们，您不仅可以通过 PSI 警告，还可以提高整体性能和用户体验。

就是这样…

应用预加载密钥请求修复将如何提高您的性能

事实是：

仅仅为了将另一个警告移至“通过”类别而修复“预加载密钥请求”警告是不值得的。

但是，预加载网页中最关键的资源将对您的网站产生重大影响：

• 核心网络生命力
• 表现得分
• 感知表现

让我们看看这怎么可能。

预加载和最大内容油漆 (LCP)

最大内容绘制测量页面上最大的首屏元素加载所需的时间。

最常被视为 LCP 元素的资源类型包括：

• 图片;
• 图片标签；
• 视频缩略图；
• 带 CSS 的背景图像；
• 文本元素。

它们都是预加载的绝佳候选者。

更快地交付它们将帮助您改善网站最困难的核心网络生命指标。

此外，LCP 占总体性能得分的 25%。 因此，提高它将不可避免地导致你的分数从红色变为绿色。

只需单击一个按钮，您的 LCP 分数就会从红色变为绿色。 立即安装 NitroPack →

预加载和首次内容绘制 (FCP)

首次内容绘制 (FCP) 测量浏览器在页面上可视化第一段 DOM 内容（例如图像、SVG、非空白画布元素）所需的时间。

虽然预加载加载动画或页面徽标（它也可以触发 FCP）可能看起来微不足道，但它对于用户体验至关重要。

当浏览器立即加载 FCP 元素时，它会向用户发送直接响应，他们的输入正在处理并且站点正在加载。

如果页面在加载前保持空白几秒钟，用户将不知道是否发生了某些情况。 你可以猜到他们的下一步是什么：

弹跳！

换句话说，预加载 FCP 元素对于让访问者满意至关重要，最重要的是让访问者满意您的网站。

此外，FCP 占你表现得分的 10%，所以你在这方面也会得到提升。

预加载和感知性能

我们多次提到感知性能。 如果您想知道它的含义，请参阅以下定义：

“感知性能是对网站性能、响应能力和可靠性的主观衡量。 换句话说，网站对用户来说的速度有多快。 它比实际运行速度更难量化和测量，但也许更重要。”

在某些情况下，页面加载和响应用户交互的速度和流畅程度的感知甚至比获取资源所需的实际时间更重要。

通过预加载关键资源，您可以让用户感受到页面加载速度更快。 内容加载速度快且流畅，创造了更加无缝的浏览体验。 用户可以更快地与页面交互，而无需等待关键资源被获取和加载。

这种改进的感知性能可以导致

• 更高的用户参与度
• 降低跳出率
• 对网站的总体满意度

如何确定应预加载的最关键请求

Google 的 PageSpeed Insights 是识别关键预加载请求的最简单、最有效的方法。

当您测试 URL 的性能时，请务必检查“机会”部分以获取建议。 特别查找标记为“预加载密钥请求”的建议，类似于所示的示例：

或者，您可以使用 Chrome DevTools 运行一些测试。 要启动该过程，请加载要测试的页面，然后单击“检查”>“灯塔”。

然后，选择是否要测试页面的移动版本或桌面版本，然后单击“分析”页面加载：

测试完成后，向下滚动并查找“预加载密钥请求”警告。

注意：由于Google PageSpeed Insights使用 Lighthouse，因此通过 PSI 或 Chrome DevTools 测试您的页面将产生相同的结果。 这取决于您喜欢哪种方式。

要了解 Lighthouse 究竟如何确定哪些资源适合预加载，让我们看一下以下示例。

您页面的关键请求链如下所示：

> 索引.html

>> 应用程序.js

>>> styles_custom.css

>>>> ui_custom.js

在您的index.html文件中，您包含一个脚本src="app.js"标记。 当 app.js 文件执行时，它会触发 fetch() 调用来下载styles_custom.css和ui_custom.js 。 直到这两个资源被下载、解析并执行后，页面才会完全显示。 此类文件被视为渲染阻塞资源。

因此， styles_custom.css和ui_custom.js将被 Lighthouse 识别为相关资源。

问题是浏览器只有在下载、解析和执行app.js后才会意识到最后两个文件。 但是，您知道这些资源包含在页面的首屏部分，您应该尽快下载它们。

要给它们更高的优先级，您可以使用link rel="preload" 。

如何修复“预加载密钥请求”警告

要修复该警告，请将链接 rel=preload 属性应用于 PSI 标记的关键资源。

简而言之， link rel=preload命令指示浏览器比通常发现的更早获取重要资源。

预加载是声明性的，与其他资源提示不同，例如提供建议的预取和预连接。 这意味着浏览器必须获取您认为对页面体验至关重要的特定资源。

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

例如，以下是代码片段查找预加载徽标的方式：

您可能已经注意到，除了预加载和资源之外，还有第三个属性 - as 。

as 属性指示资源的内容类型。 如果在指定预加载内容时不添加有效的“ as ”，您将面临两次获取资源的风险。

此外，包含as属性可以帮助浏览器根据预取资源的类型设置其优先级，并判断该资源是否已存在于缓存中。

以下是您可以指定的as值的完整列表：

重要提示：现代网络浏览器擅长对资源进行优先级排序，因此过度使用链接 rel=preload 可能会导致负面结果。 确保谨慎使用它，并且仅在真正需要时才使用它。

使用 NitroPack 自动预加载关键请求

如果您正在寻找一种更简单、自动的方法来预加载关键资源并提高网站的核心 Web 生命力、性能得分和感知性能，那么您应该尝试 NitroPack。

NitroPack 在超过 180,000 个网站的 Core Web Vitals 结果中处于领先地位的主要原因之一是我们专有的资源加载机制。

NitroPack 不依赖于内置浏览器技术。 相反，它使用我们的资源加载器，该加载器重新安排将资源提供给主线程的方式并预加载许多资源。 这通过从主线程卸载任务来利用现代 CPU 的多核特性。

此外，我们的服务通过为每个布局的每个页面创建关键 CSS 来自动优化您网站的 CSS 交付。 这会带来更好的感知和实际性能。

但最好的部分是 – 使用 NitroPack 是无风险的。

为何如此？

首先，您可以测试 NitroPack，无需花费一毛钱即可获得我们的免费计划。

其次，NitroPack 可以处理站点文件的副本，保证原始文件 100% 安全。

简单的说：

您可以通过拥有业内最快​​的装载站点来超越所有竞争对手，而无需费力或冒任何风险。

这对我来说听起来很划算！