预加载关键请求

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

Lighthouse 预加载关键请求审核的屏幕截图

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

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

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

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

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

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

<ph type="x-smartling-placeholder">
</ph> 如果没有预加载链接,则只有在下载、解析和执行 app.js 后,系统才会请求 style.css 和 ui.js。 <ph type="x-smartling-placeholder">
</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>
<ph type="x-smartling-placeholder">
</ph> 使用预加载链接时,系统会同时请求 style.css 和 ui.js 以及 app.js。
使用预加载链接时,styles.css 和 与 app.js 同时请求 ui.js

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

浏览器兼容性

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

构建工具对预加载的支持

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

针对特定堆栈的指南

Angular

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

Magento

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

资源