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

Garima Mimani
Garima Mimani
GitHub 毛刺

本程式碼研究室說明如何使用 rel="preload" 預先載入網頁字型，以便移除 任何未設定樣式的文字 (FOUT)。

測量

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

  1. 如要預覽網站，請按下「查看應用程式」。然後按下 全螢幕 全螢幕。
  2. 按下 Control+Shift+J 鍵 (或在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
  3. 按一下「Lighthouse」分頁標籤。
  4. 確認您已在「類別」清單中勾選「成效」核取方塊。
  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。查看「最大關鍵路徑延遲時間」區段。

Pacifico-Bold 網路字型預先載入，並從犯罪要求鏈結中移除

請注意 Pacifico-Bold.woff2 如何從關鍵要求鏈中移除。系統會在應用程式中稍早擷取這個資料。

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

透過預先載入，瀏覽器知道需要提早下載這個檔案。請注意，如未正確使用，預先載入可能會對未使用的資源發出不必要的要求，進而影響效能。