预加载关键请求

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

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 后，才会请求 styles.css 和 ui.js。
如果没有预加载链接，只有在下载、解析和执行 app.js 后，系统才会请求 styles.css 和 ui.js。

这里的问题在于，浏览器只有在下载、解析并执行 app.js 后，才会发现最后这 2 项资源。但您知道这些资源非常重要，应尽快下载。

在 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> 标记。

资源