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 毫秒的下載、剖析及執行，
由於 app.js 不再是每項要求瓶頸，因此每項資源的潛在節省量為 200 毫秒。
預先載入要求可加快網頁載入速度。
styles.css 和
只有在下載 app.js 後，系統才會要求 ui.js。
來建立和執行
但問題是，瀏覽器只有在察覺時才會發現
下載、剖析及執行 app.js。
但您知道這些資源非常重要
。
宣告預先載入連結
在 HTML 中宣告預先載入連結，指示瀏覽器下載重要資源 應用程式。
<head>
...
<link rel="preload" href="styles.css" as="style" />
<link rel="preload" href="ui.js" as="script" />
...
</head>
styles.css 和
要求 ui.js 與 app.js 同時要求。
另請參閱「預先載入重要資產以加快載入速度」一文。 當中有更多指引
瀏覽器相容性
自 2020 年 6 月起，以 Chromium 為基礎的瀏覽器支援預先載入功能。詳情請見 瀏覽器相容性 。
用於預先載入的建構工具支援
請參閱 Tooling.Report 的預先載入資產 頁面。
堆疊專屬指南
Angular
提前預先載入路徑，即可加快瀏覽速度。
Magento
修改主題的版面配置
並新增 <link rel=preload> 標記。