在先前的單元中，您已瞭解如何最佳化 HTML、CSS、JavaScript 和媒體資源在本單元中，我們將介紹一些讓網站最佳化的方法 。
網頁字型會影響網頁在載入時間和轉譯時間的效能。
大型字型檔案可能需要一點時間下載，並且對第一個方式
內容繪製 (FCP)，但不正確的 font-display 值可能會造成
導致網頁出現累計版面配置位移的不當版面配置位移
(CLS)。
最佳化網頁字型之前可先討論，瞭解從 以便瞭解 CSS 如何 在某些情況下擷取不必要的網路字型。
探索
網頁字型是在樣式表中使用 @font-face 定義
宣告：
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
上述程式碼片段定義了名為 "Open Sans" 的 font-family，以及
會告訴瀏覽器可在哪個位置找到個別網路字型資源。為了節省費用
頻寬時，瀏覽器在判斷網路字型之前，不會下載網路字型。
表示目前頁面的版面配置需求
h1 {
font-family: "Open Sans";
}
在上述 CSS 程式碼片段中，瀏覽器會下載 "Open Sans" 字型檔案
，因為它會剖析網頁 HTML 中的 <h1> 元素。
preload
如果在外部樣式表中已定義 @font-face 宣告，則
瀏覽器必須先下載樣式表，才能開始下載。
這使得網路字型成為後來被人發現的網路字型，但其實有辦法讓
瀏覽器可以更快探索網路字型。
您可以使用 preload 提出網路字型資源的早期要求
指令。preload 指令可在期間及早發現網頁字型
瀏覽器立即開始下載，不必等待
完成下載和剖析。preload 指令
不需要等到網頁需要字型才會開始。
<!-- The `crossorigin` attribute is required for fonts—even
self-hosted ones, as fonts are considered CORS resources. -->
<link rel="preload" as="font" href="/fonts/OpenSans-Regular-webfont.woff2" crossorigin>
內嵌 @font-face 宣告
你可以透過內嵌方式，讓系統在載入網頁時更早偵測到字型
會轉譯會妨礙顯示的 CSS (包括 @font-face 宣告) 的 <head> 中的
使用 <style> 元素 建立 HTML 程式碼。在這種情況下，瀏覽器會發現
網頁字型，因為不需要等待
要下載的樣式表
內嵌 @font-face 宣告的優點比使用 preload 更高
提示，因為瀏覽器只會下載轉譯目前所需的字型
頁面。這種做法可避免下載未使用字型的風險。
下載
發現網路字型並確認目前網頁的 瀏覽器就能下載這些內容網路字型的數量、編碼 檔案大小可能會大幅影響 由瀏覽器下載及轉譯
自行代管網路字型
網頁字型可以透過第三方服務提供，例如 Google Fonts，或 也可以在來源中自行託管。使用第三方服務時 頁面需要先與供應商網域建立連線，才能開始 下載所需的網路字型這可能會延遲探索和後續搜尋 下載網路字型
您可以使用 preconnect 資源提示來減少這項負擔。使用
preconnect，您可以指示瀏覽器開啟跨來源的連線
一般情況下，瀏覽器會出現以下情形：
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
上述 HTML 程式碼片段可提示瀏覽器建立連線
fonts.googleapis.com和 CORS 連線和 fonts.gstatic.com。只有部分通知
字型供應商 (例如 Google Fonts) 會從不同的
您可以藉由 網頁字型。在多數情況下，自行代管網路字型的速度比下載字型更快 從跨來源傳送如果你打算自行代管網路字型，請確認網站 使用內容傳遞網路 (CDN)、HTTP/2 或 HTTP/3，並 網站字型的正確快取標頭。
只使用 WOFF2 和 WOFF2
WOFF2 提供寬版瀏覽器支援功能和最佳壓縮功能，最多可提升 30% 。縮減檔案大小可以加快下載速度。WOFF2 格式通常是想要完整相容於新世代的需求 。
對網路字型進行小設定
網頁字型通常包含各式各樣的字符， 來表示不同語言中使用的各種字元。如果您的 網頁只提供一種語言的內容，或者使用單一字母，那麼您也可以 透過子設定縮減網頁字型的大小這通常是由 指定數字或範圍的 Unicode 編碼點。
子集是原始網路中包含的一組有限字符 字型檔案例如，網頁可能會提供 拉丁字母字元的特定子集視所需的子集而定 字符可以大幅縮減字型檔案的大小。
部分網路字型供應商 (例如 Google Fonts) 會透過以下方式自動提供子集
使用查詢字串參數。舉例來說，
https://fonts.googleapis.com/css?family=Roboto&subset=latin 網址會放送
樣式工作表，採用僅使用拉丁字母的 Roboto 網路字型。
如果您決定自行代管網路字型，下一步就是產生 使用 glyphanger 或 subfont 等工具，自行代管這些子集。
不過，如果您沒有自行代管網路字型的權限，則可以
指定額外的 text，即可從 Google Fonts 提供的部分網路字型。
查詢字串參數，只包含
你的網站舉例來說，如果您的網站上只有顯示網頁字型
「歡迎」一詞需要較少字元，您可以
要求透過 Google Fonts 進行資料子集：
https://fonts.googleapis.com/css?family=Monoton&text=Welcome。這可以
「大幅」減少單一字體需要的網路字型資料量
如果您的網站提供這類極端子設定
字型顯示
瀏覽器找到並下載網路字型後
轉譯完成的部分。根據預設，瀏覽器會禁止轉譯任何使用
直到下載完成你可以調整瀏覽器的文字顯示設定
設定是否該顯示 (或不顯示) 哪些文字
已經使用 font-display CSS 屬性完整載入字型。
block
font-display 的預設值為 block。有了 block，瀏覽器
禁止轉譯任何使用指定網路字型的文字。不同
但瀏覽器的運作方式稍有不同Chromium 和 Firefox 禁止轉譯
最多 3 秒才能使用備用廣告。Safari 無限期封鎖
直到網路字型載入完成
swap
swap 是最常使用的 font-display 值。swap 未封鎖
文字的顯示方式，然後在備用文字中立即顯示文字，再替換
指定的網路字型。這樣一來，你不必等待就能立即顯示內容
以供下載
然而，swap 的缺點是如果備用廣告，會導致版面配置位移
您在 CSS 中指定的網路字型和網路字型的本質差異很大
高度、核心和其他字型指標如果這會影響您網站的 CLS，
您不需要透過 preload 提示，立即載入網路字型資源
或者您不考慮其他 font-display 值。
fallback
font-display 的 fallback 值介於
block和swap。與 swap 不同，瀏覽器會禁止轉譯字型，但
短暫切換備用文字。與「block」不同：
不過封鎖期非常短
如果網路字型是網路字型，使用 fallback 值就能在快速網路上正常運作
網路字型是當網頁上 立即採用的字體
初始轉譯的程式碼不過，如果網路速度緩慢，系統就會顯示備用文字
封鎖期結束後，網頁字型在封鎖期間結束後便取代
即將抵達目的地。
optional
optional 是字串最高的 font-display 值，僅使用網頁版
100 毫秒內下載的字型資源如果網路字型
超過 30 分鐘，網頁就不會使用，而且瀏覽器會使用
網路字型下載時，目前瀏覽的備用字體
並放置在瀏覽器快取中
因此，後續瀏覽網頁時，您可以立即使用網路字型，因為
也已經下載font-display: optional 會避免看到版面配置位移
使用 swap 標記；不過，如果網頁字型太晚出現， 有些使用者 不會看見
字型示範
學以致用
瀏覽器何時下載網路字型資源 (假設沒有網路字型資源)
透過 preload 指令擷取)？
放送網路時唯一 (且效率最高) 的格式為何？ 提供給所有新式瀏覽器？
下一項：程式碼分割 JavaScript
熟悉字型最佳化後， 在下個單元中，我們會說明 也就是將載入網頁的速度延後載入 透過程式碼分割來啟用 JavaScript。這樣可以保留頻寬和 CPU 在網頁的啟動階段盡量降低爭用率， 使用者很可能與內容互動的時間點。