最佳化網路字型

在先前的單元中,您已瞭解如何最佳化 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.comCORS 連線和 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 網路字型。

如果您決定自行代管網路字型,下一步就是產生 使用 glyphangersubfont 等工具,自行代管這些子集。

不過,如果您沒有自行代管網路字型的權限,則可以 指定額外的 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-displayswap 未封鎖 文字的顯示方式,然後在備用文字中立即顯示文字,再替換 指定的網路字型。這樣一來,你不必等待就能立即顯示內容 以供下載

然而,swap 的缺點是如果備用廣告,會導致版面配置位移 您在 CSS 中指定的網路字型和網路字型的本質差異很大 高度、核心和其他字型指標如果這會影響您網站的 CLS, 您不需要透過 preload 提示,立即載入網路字型資源 或者您不考慮其他 font-display 值。

fallback

font-displayfallback 值介於 blockswap。與 swap 不同,瀏覽器會禁止轉譯字型,但 短暫切換備用文字。與「block」不同: 不過封鎖期非常短

如果網路字型是網路字型,使用 fallback 值就能在快速網路上正常運作 網路字型是當網頁上 立即採用的字體 初始轉譯的程式碼不過,如果網路速度緩慢,系統就會顯示備用文字 封鎖期結束後,網頁字型在封鎖期間結束後便取代 即將抵達目的地。

optional

optional 是字串最高的 font-display 值,僅使用網頁版 100 毫秒內下載的字型資源如果網路字型 超過 30 分鐘,網頁就不會使用,而且瀏覽器會使用 網路字型下載時,目前瀏覽的備用字體 並放置在瀏覽器快取中

因此,後續瀏覽網頁時,您可以立即使用網路字型,因為 也已經下載font-display: optional 會避免看到版面配置位移 使用 swap 標記;不過,如果網頁字型太晚出現, 有些使用者 不會看見

字型示範

學以致用

瀏覽器何時下載網路字型資源 (假設沒有網路字型資源) 透過 preload 指令擷取)?

建立網頁的 CSSOM 後 但為了配合目前的版面配置而需要
在樣式表中發現其參照後。

放送網路時唯一 (且效率最高) 的格式為何? 提供給所有新式瀏覽器?

EOT
WOFF
TTF
WOFF2

下一項:程式碼分割 JavaScript

熟悉字型最佳化後, 在下個單元中,我們會說明 也就是將載入網頁的速度延後載入 透過程式碼分割來啟用 JavaScript。這樣可以保留頻寬和 CPU 在網頁的啟動階段盡量降低爭用率, 使用者很可能與內容互動的時間點。