預先載入重要要求

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

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 下載、剖析並執行後，樣式.css 和 ui.js 才會提出請求。
沒有預先載入連結，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>
使用預先載入連結時，系統會同時要求 style.css 和 ui.js 和 app.js。
含有預先載入連結、styles.css 和 要求 ui.js 與 app.js 同時要求。

另請參閱「預先載入重要資產以加快載入速度」一文。 當中有更多指引

瀏覽器相容性

自 2020 年 6 月起，以 Chromium 為基礎的瀏覽器支援預先載入功能。詳情請見 瀏覽器相容性 。

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

請參閱 Tooling.Report 的預先載入資產 頁面。

堆疊專屬指南

Angular

提前預先載入路徑，即可加快瀏覽速度。

Magento

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

資源