預先載入重要要求

Lighthouse 報告的「商機」部分會將重要要求鏈中的第三層要求標記為預先載入候選項目:

Lighthouse 預先載入金鑰要求稽核的螢幕截圖

Lighthouse 旗標如何判定預先載入候選項目

假設網頁的關鍵要求鏈如下所示:

index.html |--app.js |--styles.css |--ui.js

您的 index.html 檔案宣告 <script src="app.js">。當 app.js 執行時,系統會呼叫 fetch() 來下載 styles.cssui.js。必須等到最後 2 項資源下載、剖析和執行後,頁面才會完整顯示。以上述範例來說,Lighthouse 會將 styles.cssui.js 標記為候選項目。

節省的費用是根據您宣告預先載入連結之前,瀏覽器可啟動要求的速度,計算得出。舉例來說,如果 app.js 需要 200 毫秒來下載、剖析及執行應用程式,由於 app.js 不再是各項要求的瓶頸,因此每個資源可省下 200 毫秒。

預先載入要求可加快網頁載入速度。

如果沒有預先載入連結,只有在下載、剖析並執行 app.js 後,系統才會要求 Style.css 和 ui.js。
如未預先載入連結,只有在 app.js 下載、剖析和執行後,才會要求 styles.cssui.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 一併要求。
使用預先載入連結後,系統會同時要求 styles.cssui.jsapp.js

如需更多指引,另請參閱「預先載入重要資產以加快載入速度」。

瀏覽器相容性

自 2020 年 6 月起,以 Chromium 為基礎的瀏覽器支援預先載入功能。如需更新,請參閱瀏覽器相容性

建立用於預先載入的工具支援

請參閱 Tooling.Report 的預先載入素材資源頁面。

堆疊專屬指南

Angular

提前預先載入路徑,加快導航速度。

Magento

修改主題的版面配置,並新增 <link rel=preload> 標記。

資源