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 毫秒。
預先載入要求可加快網頁載入速度。
這樣做的問題是,瀏覽器只會在下載、剖析及執行 app.js
後,才會發現最後 2 項資源。但您知道這些資源很重要
因此應盡快下載
宣告預先載入連結
在 HTML 中宣告預先載入連結,指示瀏覽器盡快下載重要資源。
<head>
...
<link rel="preload" href="styles.css" as="style" />
<link rel="preload" href="ui.js" as="script" />
...
</head>
如需更多指引,另請參閱「預先載入重要資產以加快載入速度」。
瀏覽器相容性
自 2020 年 6 月起,以 Chromium 為基礎的瀏覽器支援預先載入功能。如需更新,請參閱瀏覽器相容性。
建立用於預先載入的工具支援
請參閱 Tooling.Report 的預先載入素材資源頁面。
堆疊專屬指南
Angular
提前預先載入路徑,加快導航速度。
Magento
修改主題的版面配置,並新增 <link rel=preload>
標記。