目录
如果您曾经测试过 WordPress 网站的性能，您就会熟悉 PageSpeed Insights 建议：“预加载关键请求”。如果您还没有完全解决这个性能问题，那么是时候解决它了。预加载关键请求可能会影响特定的性能指标，并对站点速度产生总体影响。
本文将介绍什么是关键请求和关键资产。然后，您将能够识别它们并修复使用或不使用插件的 PageSpeed Insights 审核。
预加载密钥请求意味着什么？
当您预加载关键请求时，您会告诉浏览器优先考虑关键资产并首先下载它们。这样，最相关的文件就可以更快地加载，尤其是当浏览器稍后发现并下载关键文件时。
关键请求可以是页面在早期加载阶段所需的任何内容。最常见的文件是字体。然而，关键资产也可以是 JS 和 CSS 文件和图像。这是针对特定性能需求的个案增强。
为什么应该修复预加载密钥请求问题
预加载关键请求是一项重要的 Web 性能优化技术，它可以使您的网站速度更快，并且超出了 PageSpeed Insights 的建议。
通过预加载关键资源，您将优化两个关键性能指标：最大内容绘制 (LCP)和首次内容绘制 (FCP)。LCP 和 FCP 与预加载关键资源（例如图像、字体和特定 CSS 文件）密切相关（当不使用关键路径 CSS 时）。例如，预加载 LCP 图像是一项关键的性能优化，而且更为重要，因为 LCP 是核心 Web 重要指标。
请记住，LCP 和 FCP 在 Lighthouse v8 中分别占 25% 和 10%，这两个权重都对Lighthouse 的整体性能得分有所贡献。
预加载关键请求还可以缩短加载时间并提高感知性能。
这就是为什么预加载关键请求不仅对于 SEO 和性能原因至关重要，而且对于提供最佳用户体验也至关重要。
如何识别应预加载的关键文件
Lighthouse 是识别关键预加载请求的最简单、最有效的方法。在性能工具中测试 URL 的性能后，请检查“机会”部分，看看是否找到如下所示的“预加载密钥请求”建议：
如果您找到这样的推荐，您还将获得应预加载的文件。在这种情况下，要预加载的文件为：/main.css。至于要预加载的字体，文件具有以下扩展名：otf、ttf、svg、woff、woff2。
请注意，您也可以通过 GTmetrix 运行相同的测试。但是，根据该工具使用的 Lighthouse 版本，您可能会得到不同的结果和建议。Google 发布了 Lighthouse v8，该版本已在 PageSpeed Insights 中启动并运行。截至 2021 年 9 月，这是您应该查看的最新版本。
如何修复预加载密钥请求
无论是否使用插件，您都可以预加载关键请求并解决 PSI 建议。
如果您想自己实现 preload 属性，您应该识别 PSI 标记的关键资产，并将链接 rel =“preload” 添加到这些文件中。请记住将这些文件包含在 HTML 页面的头部。以下是“预加载”属性的示例：
<link rel=”preload” as=”type-of-content” href=”ritic-example.js”>您可以添加多种类型的内容，从图像到脚本、视频等等。您可以在此处查看完整列表。
另一方面，您可能想使用插件。有几个可以帮助您预加载不同类型的文件：
- Autoptimize可以手动预加载除图像之外的任何内容
- Perfmatters预加载图像、字体、CSS 和 JS 文件
- SG Optimizer预加载字体
- Asset Cleanup预加载字体、JS 和 CSS 文件。
如上所述，字体是需要预加载的主要文件。事实上，针对预加载的特定字体（折叠上方或下方所需的字体）通常比过度考虑所有细节并增加更多复杂性更有效，特别是在无法控制字体声明方式的情况下。
您应该避免为同一字体预加载多种格式 – 只需预加载一种字体格式。一般来说，您不应该预加载所有内容，否则会降低网站的性能。
发表回复