Lighthouse 报告中的“优化”部分 将关键请求链中的第三级请求标记为预加载候选项:
![Lighthouse 预加载关键请求审核的屏幕截图](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-rel-preload/image/a-screenshot-the-lightho-a0f22e9688496.png?authuser=0000&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
不再是每个请求的瓶颈。
预加载请求可以提高您的网页加载速度。
<ph type="x-smartling-placeholder">![如果没有预加载链接,则只有在下载、解析和执行 app.js 后,系统才会请求 style.css 和 ui.js。](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-rel-preload/image/without-preload-links-st-f9c93e03b4029.png?authuser=0000&hl=fi)
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。](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-rel-preload/image/with-preload-links-style-da7d794e22995.png?authuser=0000&hl=fi)
styles.css
和
ui.js
与 app.js
同时请求。
另请参阅预加载关键资源以提高加载速度 ,获取更多指导。
浏览器兼容性
自 2020 年 6 月起,基于 Chromium 的浏览器支持预加载。请参阅 浏览器兼容性 获取更新。
构建工具对预加载的支持
请参阅 Tooling.Report 的预加载资源 页面。
针对特定堆栈的指南
Angular
提前预加载路线以加快导航速度。
Magento
修改主题的布局
并添加 <link rel=preload>
标记。