如何避免链接关键请求
已发表: 2023-08-03每次运行 PageSpeed Insights 测试时，您是否都会收到“避免链接关键请求”警告？
嗯，今天就到此结束。
阅读本指南后，您将了解有关关键请求的所有信息、链接它们如何影响您的性能，以及最重要的是 - 如何修复“避免链接关键请求”警告。
- 什么被视为关键请求？
- “避免链接关键请求”是什么意思
- 链接关键请求如何影响您的性能
- 如何避免在 WordPress 上链接关键请求
- 奖励：修复“避免链接关键请求”的其他最佳实践
请继续阅读。
什么被视为关键请求？
关键请求是渲染网页初始视图所必需的资源。 换句话说 - 首屏加载的所有内容。
例如，当我加载 NitroPack 的主页时，我在笔记本电脑上看到的内容如下：
所有首屏元素都被认为至关重要，因为根据它们的加载速度，用户可以获得良好的体验或立即跳出。
避免链接关键请求是什么意思？
简而言之，“避免链接关键请求”警告意味着渲染页面所需的关键资源太大。
就链接部分而言，关键请求链是一系列相互依赖的请求，对于渲染页面至关重要。 解析和执行请求的顺序由关键渲染路径 (CRP) 确定。
关键渲染路径是指 Web 浏览器将 HTML、CSS 和 JavaScript 代码转换为用户屏幕上的视觉表示形式所采取的步骤序列。
当浏览器开始解析代码时，它会根据分配的优先级处理关键请求：
现在您已经了解了 CRP 是什么以及浏览器如何分配优先级，让我们回到“关键请求链”的定义。
由于它是一系列相互依赖的请求，加载大型的、未优化的关键请求将不可避免地导致更长的关键链，从而减慢页面加载速度。
为了说明这个说法，我们来看下面的例子：
想象一个简单的网页，其中包含以下资源：
- index.html –定义页面结构的主要 HTML 文件。
- styles.css –定义页面的视觉外观和布局。
- main.js –包含向网页添加交互性和功能的脚本。
- logo.png（图像文件）
考虑这样一种情况：每个资源都是长关键请求链的一部分。 例如，假设 HTML 文件引用了多个 CSS 和 JavaScript 文件，而每个文件又引用了其他资源，从而形成了依赖链。
在这种情况下，加载链中任何一个资源的延迟都会对关键路径延迟和页面的整体性能产生级联影响。
说到网络性能，让我们看看哪些指标将受到链接关键请求的最大影响……
链接关键请求如何影响您的性能
链越长，浏览器渲染显示内容所需的资源所需的时间就越长。
就网络性能指标而言，这意味着首次内容绘制 (FCP) 和最大内容绘制 (LCP) 较差。
首次内容绘制 (FCP) 失败
FCP 测量浏览器在页面上可视化第一段 DOM 内容（例如图像、SVG、非空白画布元素）所需的时间。
这些元素可能看起来微不足道，但它们对于网站的用户体验至关重要。 他们告诉访问者他们的输入正在处理并且网站正在加载。 如果页面在加载前保持空白几秒钟，用户不知道是否发生了某些事情。
为了保证浏览器能够尽快渲染第一段 DOM 内容，关键请求链必须短而轻。 否则，访问者因黑屏和 FCP 失败而退出的可能性会更高。
未通过最大内容油漆 (LCP)
LCP 测量页面上最大的首屏元素加载所需的时间。
它是三个核心 Web 生命 (CWV) 之一，这是一组以用户为中心的指标，用于衡量网站的加载时间、视觉稳定性和交互性。 它们也是Google 排名因素。
因此，由于加载长关键请求链而导致 LCP 分数较低不仅意味着您未达到某些性能指标，而且还意味着：
- 降低通过 CWV 的机会
- 损害您网站的排名
- 提供糟糕的用户体验
避免这一切的最可靠方法是通过优化资源的数量和规模来缩短关键路径。
这是如何做到的......
如何避免链接关键请求（在 WordPress 上）
如果有一个解决“避免链接关键请求”的单一策略，那么它将消除渲染阻塞资源。
渲染阻塞资源是当浏览器遇到它们时，必须先下载、解析并执行它们，然后再执行其他操作（包括渲染）的文件。
最常被标记为“渲染阻塞”的罪魁祸首是未优化的 CSS 和 JavaScript 文件。
以下技巧将帮助您成功处理这两个问题：
删除未使用的 CSS
术语“未使用的 CSS”是指当前页面上未使用的 CSS 规则。
这些规则使文件变得比必要的大，使您的代码膨胀，并创建很长的关键请求链。 因此，您的文件和页面需要永远加载。
如果您愿意微调代码，则可以使用 PurifyCSS 等在线工具。
输入页面的 URL，该工具会自动删除不必要的代码。 然后，您可以下载“纯化的”CSS 并将其上传到您的网站上：
重要提示：更改代码会隐藏破坏网站设计和功能的风险。 如果您以前没有技术经验，请联系网络开发人员或安装一个会自动为您完成此操作的插件。
单击按钮即可删除未使用的 CSS。 安装 NitroPack 并自动优化您的网站 →
延迟 JavaScript
推迟 JavaScript 文件允许您仅在必要时加载它们，因此浏览器可以首先专注于提供最关键的内容（首屏）。
您可以使用async延迟加载 JS 文件 并推迟 属性。
- 异步
异步加载意味着脚本将在后台获取，同时页面的 HTML 解析和渲染继续进行。
下载脚本后，它会暂停 HTML 解析，立即执行脚本，然后恢复解析。 因此，具有 async 属性的脚本的执行顺序可能无法预测，因为它们可能在不同时间完成加载。
async属性非常适合您不想阻止页面加载和呈现的第三方脚本。
- 推迟
defer属性与 async 一样，也是异步加载脚本，但执行方式有所不同。
具有 defer 属性的脚本将在 HTML 解析继续时在后台下载，但脚本执行将推迟到 HTML 解析完成后。 使用 defer 的脚本的执行顺序按照它们在 HTML 中出现的顺序进行维护。
当您想要保持脚本在 HTML 中出现的执行顺序时，请使用defer属性。
代码压缩和缩小
关键请求链优化的另一层是减少资源的整体大小，因为这将有助于浏览器更快地下载、解析和渲染它们。
实现这一目标的方法是压缩和缩小文件。
应用压缩将重写文件的二进制代码并使用比原始更少的位对信息进行编码。
最流行的压缩工具是 gzip。 Gzipping 的工作原理是查找重复的字符串并将其替换为指向该字符串的第一个实例的指针。 好处是指针比文本占用更少的空间。
另一方面，缩小会删除不必要的代码元素，例如注释、换行符或空格：
来源： KeyCDN
通过修剪代码，您可以缩短关键请求，从而提高网站速度。
在线有大量免费工具可以帮助您优化代码大小。 使用它们将要求您输入代码，然后复制缩小/压缩版本并将其粘贴回您的网站。 这里有一些建议：
- CSS纳米
- 顶级 JavaScript 压缩器
- 代码美化
修复“避免链接关键请求”的其他最佳实践
字体子集化
处理完网站的 CSS 和 JavaScript 资源后，下一个最佳优化对象就是网络字体。
最容易被忽视的是，网络字体通常是大文件，需要一段时间才能加载，甚至会阻止文本的渲染。
为了避免这种情况，您需要减小它们的大小，以便浏览器可以立即加载它们。
输入字体子集。
字体子集是一种优化技术，可以从字体中删除未使用的字形（字符）以大幅减小其大小。
例如，考虑一下您的主页使用了多少个独特的字形。 我们敢打赌，他们不会超过 100 个。
从这个角度来看，Font Awesome 是第二大最常用的字体（占所有网站的 7%），有 26,107 个字符。
资料来源：网络年鉴
想象一下，通过仅加载特定页面绝对必要的内容，您可以为浏览器和访问者节省多少时间。
有一些在线工具可以帮助您应用字体子集。 您需要上传字体文件并选择要删除的字形。 然后，返回您的站点并上传子集文件。
此外，您需要确保每次更新内容时都完成该过程。
重要提示：通过在线工具对字体文件进行子集化可以隐藏优化后页面上丢失字符的风险。 如果您以前没有使用过字体，我们强烈建议您联系网络性能专家或安装一个可以自动为您完成此操作的插件。
无风险地对字体进行子集化。 通过安装 NitroPack 将其尺寸减小多达 70% →
预加载密钥请求
使用链接 rel=preload 属性预加载关键请求是另一种优化策略，它将改进您的 FCP 和 LCP，并缩短关键路径。
要确定最关键的请求，请通过 PageSpeed Insights 运行您的网站并检查“预加载密钥请求”警告：
然后，转到您的代码并将链接 rel=preload标记添加到特定资源：
不要忘记包含as属性，以便浏览器可以根据预取资源的类型设置预取资源的优先级，并确定它是否已存在于缓存中。
其他资源：检查 as 值的完整列表。
如何避免使用 NitroPack 链接关键请求
如果您没有配备合适的工具，优化关键请求链可能是一项乏味的任务。
如您所知，在某些情况下，对代码进行微调可能会适得其反并破坏网站的功能和设计。
但修复单个 PSI 警告不应该是一件令人头疼的事情。
或者至少 NitroPack 不是这样。
NitroPack 是一款一体化速度优化工具，可通过应用以下功能来提高您网站的性能：
- 删除未使用的 CSS
- 延迟 JavaScript
- 字体子集化
以及 32 多种其他经过验证的优化技术。
使用 NitroPack，无需编码或以前的技术经验即可提高网站的性能。
听起来好得令人难以置信？
让我们看一下我们客户的一个网站，其中包含和不包含 NitroPack。
以下是不使用 NitroPack 时的结果：
移动设备上的性能得分为 41，链数为 47，关键路径延迟为 3,781 毫秒。
不带硝基包
以下是 NitroPack 的结果：
95 性能得分，1 条链，关键路径延迟缩短 2 倍以上：
带硝基包
您还可以体验这一点以及许多其他性能改进。 立即安装 NitroPack，让我们为您的网站提供闪电般的速度。