Lighthouse 報告的「商機」部分會將重要要求鏈中的第三層要求標記為預先載入候選項目:
![Lighthouse 預先載入金鑰要求稽核的螢幕截圖](https://developer.chrome.com/static/docs/lighthouse/performance/uses-rel-preload/image/a-screenshot-the-lightho-a0f22e9688496.png?authuser=3&hl=zh-tw)
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 毫秒。
預先載入要求可加快網頁載入速度。
![如果沒有預先載入連結,只有在下載、剖析並執行 app.js 後,系統才會要求 Style.css 和 ui.js。](https://developer.chrome.com/static/docs/lighthouse/performance/uses-rel-preload/image/without-preload-links-st-f9c93e03b4029.png?authuser=3&hl=zh-tw)
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.com/static/docs/lighthouse/performance/uses-rel-preload/image/with-preload-links-style-da7d794e22995.png?authuser=3&hl=zh-tw)
styles.css
和 ui.js
和 app.js
。如需更多指引,另請參閱「預先載入重要資產以加快載入速度」。
瀏覽器相容性
自 2020 年 6 月起,以 Chromium 為基礎的瀏覽器支援預先載入功能。如需更新,請參閱瀏覽器相容性。
建立用於預先載入的工具支援
請參閱 Tooling.Report 的預先載入素材資源頁面。
堆疊專屬指南
Angular
提前預先載入路徑,加快導航速度。
Magento
修改主題的版面配置,並新增 <link rel=preload>
標記。