本程式碼研究室將說明如何使用 rel="preload" 預先載入網路字型，以移除任何不含樣式的文字 (FOUT) 的閃光燈。
測量
請先評估網站成效，再加入任何最佳化項目。
- 如要預覽網站，請按下「查看應用程式」，然後按下「全螢幕」圖示
。 - 按下 `Control+Shift+J 鍵 (在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
- 按一下「Lighthouse」分頁標籤。
- 確認您已在「類別」清單中勾選「成效」核取方塊。
- 按一下「產生報表」按鈕。
系統產生的 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.woff2 如何從重要要求鏈中移除。在應用程式中先前的擷取作業。
預先載入時，瀏覽器就會知道需要提早下載這個檔案。請務必注意，如未正確使用，預先載入功能可能會對未使用的資源發出不必要的要求，進而降低效能。