Lighthouse 报告的“优化建议”部分将关键请求链中的第三级请求标记为预加载候选项:
![Lighthouse 预加载密钥请求审核的屏幕截图](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-rel-preload/image/a-screenshot-the-lightho-a0f22e9688496.png?authuser=9&hl=fi)
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。](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-rel-preload/image/without-preload-links-st-f9c93e03b4029.png?authuser=9&hl=fi)
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。](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-rel-preload/image/with-preload-links-style-da7d794e22995.png?authuser=9&hl=fi)
styles.css
和 ui.js
和 app.js
。
如需获得更多指导,另请参阅预加载关键资源以提高加载速度。
浏览器兼容性
自 2020 年 6 月起,基于 Chromium 的浏览器支持预加载。如需了解相关更新,请参阅浏览器兼容性。
对预加载的构建工具支持
请参阅 Tooling.Report 的预加载资源页面。
针对特定堆栈的指南
Angular
提前预加载路线以加快导航速度。
Magento
修改主题的布局并添加 <link rel=preload>
标记。