預先載入網路字型以加快載入速度

Garima Mimani
Garima Mimani
GitHub

本程式碼實驗室說明如何使用 rel="preload" 預先載入網頁字型，避免出現未套用樣式的文字閃爍 (FOUT)。

評估

首先，請先評估網站成效，再進行任何最佳化調整。

  1. 如要預覽網站，請按下「View App」，然後按下「Fullscreen」全螢幕。
  2. 按下「Control + Shift + J」鍵 (在 Mac 上為「Command + Option + J」鍵) 開啟開發人員工具。
  3. 按一下「Lighthouse」分頁標籤。
  4. 確認已在「Categories」清單中勾選「Performance」核取方塊。
  5. 按一下「產生報表」按鈕。

產生的 Lighthouse 報表會在「關鍵路徑延遲時間上限」下方顯示資源的擷取順序。

重要要求鏈結中含有網頁字型。

在上述稽核中，網頁字型是重要要求鏈的一部分，且最後才擷取。關鍵要求鏈結代表瀏覽器優先擷取資源的順序。在這個應用程式中，網頁字型 (Pacfico 和 Pacifico-Bold) 是使用 @font-face 規則定義，也是瀏覽器在重要要求鏈中擷取的最後一項資源。一般來說，網頁字型會延遲載入，也就是說，系統會先下載重要資源 (CSS、JS)，再載入網頁字型。

以下是應用程式擷取資源的順序：

延遲載入網頁字型。

預先載入網頁字型

為避免 FOUT，您可以預先載入需要立即使用的網頁字型。在文件開頭為這個應用程式新增 Link 元素：

<head>
 <!-- ... -->
 <link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>

as="font" type="font/woff2" 屬性會指示瀏覽器將這項資源下載為字型，並協助排定資源佇列的優先順序。

crossorigin 屬性會指出是否應透過 CORS 要求擷取資源，因為字型可能來自不同網域。如果沒有這個屬性，瀏覽器會忽略預先載入的字型。

由於網頁標頭使用 Pacifico-Bold，我們新增了預先載入標記，以便更快擷取。Pacifico.woff2 字型會套用至不需捲動位置下方的文字，因此不需預先載入。

重新載入應用程式，然後再次執行 Lighthouse。查看「Maximum critical path latency」(關鍵路徑延遲時間上限) 部分。

Pacifico-Bold 網站字型已預先載入，並從重要要求鏈中移除

請注意，Pacifico-Bold.woff2 已從關鍵要求鏈中移除。在應用程式中較早擷取。

已預先載入 Pacifico-Bold 網頁字型

有了預先載入功能，瀏覽器就知道要提早下載這個檔案。請注意，如果使用不當，預先載入功能可能會對未使用的資源提出不必要的要求，進而影響效能。