優化 Google 字體性能

已發表: 2022-03-10
快速總結↬ Google 字體易於實施，但它們會對您的頁面加載時間產生重大影響。 讓我們探索如何以最佳方式加載它們。

公平地說，谷歌字體很受歡迎。 截至撰寫本文時，它們在網絡上的瀏覽量已超過 29 萬億次，原因很容易理解——該集合讓您可以訪問 900 多種精美字體，您可以在您的網站上免費使用。 如果沒有 Google 字體，您將僅限於安裝在用戶設備上的少數“系統字體”。

系統字體或“Web 安全字體”是跨操作系統最常預裝的字體。 例如，Arial 和 Georgia 與 Windows、macOS 和 Linux 發行版打包在一起。

像所有好東西一樣，谷歌字體確實是有代價的。 每種字體都有一個權重，Web 瀏覽器需要先下載它們才能顯示。 使用正確的設置，額外的加載時間並不明顯。 但是，如果弄錯了，您的用戶可能要等待幾秒鐘才能顯示任何文本。

谷歌字體已經優化

Google Fonts API 不僅僅是為瀏覽器提供字體文件，它還執行智能檢查以查看它如何以最優化的格式提供文件。

讓我們看看 Roboto，GitHub 告訴我們常規變體重 168kb。

Roboto Regular 文件大小為 168kb
單個字體變體為 168kb。 （大預覽）

但是，如果我從 API 請求相同的字體變體，我會得到這個文件。 只有11kb。 這個怎麼可能？

當瀏覽器向 API 發出請求時，Google 首先會檢查瀏覽器支持的文件類型。 我使用的是最新版本的 Chrome，它與大多數瀏覽器一樣支持 WOFF2，因此字體以高度壓縮的格式提供給我。

如果我將用戶代理更改為 Internet Explorer 11，則會改為使用 WOFF 格式的字體。

最後，如果我將用戶代理更改為 IE8，那麼我將獲得 EOT（嵌入式 OpenType）格式的字體。

Google Fonts 為每種字體維護 30 多種優化變體，並自動檢測並為每個平台和瀏覽器提供最佳變體。

— Ilya Grigorik，網絡字體優化

這是谷歌字體的一個很棒的功能，通過檢查用戶代理，他們能夠為支持這些格式的瀏覽器提供性能最高的格式，同時仍然在舊瀏覽器上一致地顯示字體。

跳躍後更多！ 繼續往下看↓

瀏覽器緩存

谷歌字體的另一個內置優化是瀏覽器緩存。

由於谷歌字體無處不在，瀏覽器並不總是需要下載完整的字體文件。 例如，SmashingMagazine 使用一種名為“Mija”的字體，如果這是您的瀏覽器第一次看到該字體，則需要在顯示文本之前將其完全下載，但下次您使用該字體訪問網站時，瀏覽器將使用緩存的版本。

隨著 Google Fonts API 的使用越來越廣泛，您網站或頁面的訪問者很可能已經在他們的瀏覽器緩存中擁有您的設計中使用的任何 Google 字體。

— 常見問題解答，谷歌字體

谷歌字體瀏覽器緩存設置為一年後過期，除非緩存被盡快清除。

注意： Mija 不是 Google 字體，但緩存的原則不是特定於供應商的。

進一步優化是可能的

雖然 Google 在優化字體文件的交付方面投入了大量精力，但您仍然可以在實施中進行優化以減少對頁面加載時間的影響。

1.限製字體系列

最簡單的優化是簡單地使用更少的字體系列。 每種字體最多可以增加 400kb 到您的頁面重量，再乘以幾個不同的字體系列，突然間您的字體重量就超過了整個頁面。

我建議使用不超過兩種字體，一種用於標題，另一種用於內容通常就足夠了。 通過正確使用字體大小、粗細和顏色，您甚至可以使用一種字體來獲得出色的外觀。

顯示單個字體系列的三個權重的示例（Source Sans Pro）
單個字體系列的三個權重（Source Sans Pro）。 （大預覽）

2.排除變體

由於 Google 字體的高質量標準，許多字體系列都包含所有可用的字體粗細：

  • 薄 (100)
  • 細斜體 (100i)
  • 光 (300)
  • 淺斜體 (300i)
  • 常規 (400)
  • 常規斜體 (400i)
  • 中型 (600)
  • 中等斜體 (600i)
  • 粗體 (700)
  • 粗斜體 (700i)
  • 黑色 (800)
  • 黑色斜體 (800i)

這對於可能需要所有 12 個變體的高級用例非常有用，但對於常規網站，這意味著當您可能只需要 3 或 4 個時下載所有 12 個變體。

例如，Roboto 字體系列重約 144kb。 但是，如果您只使用 Regular、Regular Italic 和 Bold 變體，則該數字將降至 ~36kb。 節省 75%！

實現 Google 字體的默認代碼如下所示：

 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

如果這樣做，它將僅加載“常規 400”變體。 這意味著所有淺色、粗體和斜體文本都不會正確顯示。

要加載所有字體變體，我們需要在 URL 中指定權重，如下所示：

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">

很少有網站會使用從 Thin (100) 到 Black (900) 的所有字體變體，最佳策略是僅指定您計劃使用的權重：

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,600" rel="stylesheet">

這在使用多個字體系列時尤其重要。 例如，如果您使用 Lato 作為標題，則隻請求粗體變體（可能還有粗斜體）是有意義的：

 <link href="https://fonts.googleapis.com/css?family=Lato:700,700i" rel="stylesheet">

3. 合併請求

我們在上面使用的代碼片段調用了 Google 的服務器 ( fonts.googleapis.com )，這稱為 HTTP 請求。 一般來說，您的網頁需要發出的 HTTP 請求越多，加載所需的時間就越長。

如果你想加載兩種字體，你可以這樣做：

 <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

這會起作用，但會導致瀏覽器發出兩個請求。 我們可以通過將它們組合成一個請求來優化它，如下所示：

 <link href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans:400,400i,600" rel="stylesheet">

單個請求可以容納多少字體和變體沒有限制。

4. 資源提示

資源提示是現代瀏覽器支持的一項功能，可以提高網站性能。 我們將看一下兩種類型的資源提示：“DNS Prefetching”和“Preconnect”。

注意：如果瀏覽器不支持現代功能，它會簡單地忽略它。 所以你的網頁仍然會正常加載。

DNS 預取

DNS 預取允許瀏覽器在頁面開始加載後立即開始連接到 Google 的字體 API ( fonts.googleapis.com )。 這意味著當瀏覽器準備好發出請求時，一些工作已經完成。

要為 Google 字體實現 DNS 預取，您只需將這一行添加到您的網頁<head>中：

 <link rel="dns-prefetch" href="//fonts.googleapis.com">

預連接

如果您查看 Google 字體嵌入代碼，它似乎是一個 HTTP 請求：

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">

但是，如果我們訪問該 URL，我們可以看到另外三個對不同 URL https://fonts.gstatic.com 的請求。 每個字體變體的一個額外請求。

Google 字體請求的源代碼
（查看源代碼）（大預覽）

這些額外請求的問題在於，在對https://fonts.googleapis.com/css的第一個請求完成之前，瀏覽器不會開始執行這些請求的過程。 這就是 Preconnect 的用武之地。

預連接可以被描述為預取的增強版本。 它是在瀏覽器要加載的特定 URL 上設置的。 它不僅執行 DNS 查找，還完成了 TLS 協商和 TCP 握手。

就像 DNS Prefetching 一樣，只需一行代碼即可實現：

 <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

只需添加這行代碼就可以將您的頁面加載時間減少 100 毫秒。 這可以通過在初始請求旁邊啟動連接來實現，而不是等待它首先完成。

5.本地託管字體

Google 字體是根據“自由”或“自由軟件”許可獲得許可的，這使您可以自由使用、更改和分發字體而無需請求許可。 這意味著如果您不想使用 Google 的託管，您可以自行託管字體！

所有字體文件都可以在 Github 上找到。 還提供包含所有字體的 zip 文件 (387MB)。

最後，還有一個幫助服務，可以讓您選擇要使用的字體，然後它會提供執行此操作所需的文件和 CSS。

在本地託管字體有一個缺點。 當您下載字體時，您將它們保存為當時的狀態。 如果它們得到改進或更新，您將不會收到這些更改。 相比之下，當從 Google Fonts API 請求字體時，始終會為您提供最新版本。

顯示上次修改日期的 Google Fonts API 請求
谷歌字體 API 請求。 （大預覽）

請注意 API 中的lastModified參數。 字體會定期修改和改進。

6.字體顯示

我們知道瀏覽器下載 Google 字體需要時間，但是在文本準備好之前會發生什麼？ 很長一段時間，瀏覽器會在文本應該出現的地方顯示空白，也稱為“FOIT”（不可見文本的Flash）。

推薦閱讀： Chris Coyier 的“FOUT, FOIT, FOFT”

什麼都不顯示對最終用戶來說可能是一種不和諧的體驗，更好的體驗是最初將系統字體顯示為備用字體，然後在字體準備好後“交換”字體。 這可以使用 CSS font-display屬性來實現。

通過添加font-display: swap; 對於@font-face 聲明，我們告訴瀏覽器顯示備用字體，直到 Google 字體可用。

 @font-face { font-family: 'Roboto'; src: local('Roboto Thin Italic'), url(https://fonts.gstatic.com/s/roboto/v19/KFOiCnqEu92Fr1Mu51QrEz0dL-vwnYh2eg.woff2) format('woff2'); font-display: swap; }

2019 年，谷歌宣布他們將增加對 font-display:swap 的支持。 您可以通過在字體 URL 中添加一個額外的參數來立即開始實現這一點：

 https://fonts.googleapis.com/css?family=Roboto&display=swap

7.使用Text參數

Google Fonts API 的一個鮮為人知的特性是text參數。 這個很少使用的參數允許你只加載你需要的字符。

例如，如果您有一個 text-logo 需要是唯一字體，您可以使用text參數僅加載 logo 中使用的字符。

它是這樣工作的：

 https://fonts.googleapis.com/css?family=Roboto&text=CompanyName

顯然，這種技術非常具體，只有少數實際應用。 但是，如果您可以使用它，它最多可以將字體重量減少 90%。

注意：使用text參數時，默認只加載“普通”字體粗細。 要使用另一個權重，您必須在 URL 中明確指定它。

 https://fonts.googleapis.com/css?family=Roboto:700&text=CompanyName

包起來

據估計，前 100 萬個網站中有 53% 使用 Google 字體，實施這些優化可以產生巨大的影響。

您嘗試過以上幾種？ 在評論部分讓我知道。