此页面由 Cloud Translation API 翻译。

预加载关键请求

Lighthouse 报告中的“优化”部分将关键请求链中的第三级请求标记为预加载候选项：

Lighthouse 标志如何确定预加载候选项

假设您网页的关键请求链如下所示：

index.html |--app.js |--styles.css |--ui.js

您的 index.html 文件声明了 <script src="app.js">。当 app.js 运行时，它会调用 fetch()才能下载styles.css和ui.js。该页面似乎不完整直到最后 2 个资源被下载、解析和执行为止。使用上面的示例，Lighthouse 会将 styles.css 和 ui.js 标记为候选对象。

可能节省的时间取决于浏览器能尽早处理来启动请求。例如，如果 app.js 的下载、解析和执行用时为 200 毫秒，每项资源有望节省 200 毫秒的时间，因为 app.js 不再是每个请求的瓶颈。

预加载请求可以提高您的网页加载速度。

如果没有预加载链接，则只有在下载、解析和执行 app.js 后，系统才会请求 style.css 和 ui.js。 — </ph> 如果没有预加载链接，`styles.css` 和仅在 `app.js` 下载完成后请求 `ui.js`，解析和执行

这里的问题在于后 2 项资源所占的比例app.js。但您知道这些资源很重要文件。

声明预加载链接

在 HTML 中声明预加载链接，以指示浏览器下载关键资源尽快处理

<head>
  ...
  <link rel="preload" href="styles.css" as="style" />
  <link rel="preload" href="ui.js" as="script" />
  ...
</head>

使用预加载链接时，系统会同时请求 style.css 和 ui.js 以及 app.js。 — 采用预加载链接时，`styles.css` 和 `ui.js` 与 `app.js` 同时请求。

另请参阅预加载关键资源以提高加载速度，获取更多指导。

浏览器兼容性

自 2020 年 6 月起，基于 Chromium 的浏览器支持预加载。请参阅浏览器兼容性获取更新。

构建工具对预加载的支持

请参阅 Tooling.Report 的预加载资源页面。

针对特定堆栈的指南

Angular

提前预加载路线以加快导航速度。

Magento

修改主题的布局并添加 <link rel=preload> 标记。

资源

预加载密钥请求审核的源代码