五個方法提升 Web Fonts 載入速度
微調 font 文件並進階優化字體載入策略，以實現最快速度和最短 FOUT 表現
在之前的文章我們介紹了關於 system fonts 相對於 web fonts 的優點，與 system fonts 相比，web fonts 會對效能產生負面影響，使用更多數據並且增加網頁耗能，更是對 Google SEO 排名造成間接性的傷害。
但，以上都是以工程師的角度作為依據。一個讓人賞心悅目的網站，如果少了相對應的字體，就無法達到畫龍點睛的效果。為了彌補 web fonts 所帶來的缺陷，本篇文章我們將介紹五種提高 web fonts 性能的方法，透過更多細節的操作，同時得到 web fonts 的美感也降低它所帶來最大程度的影響。
使用最新的文件格式
Web Open Font Format 2.0 （woff2） 是 web font 中最小，最有效率的文件格式。 當在 CSS 中使用 @ font-face 規則時，請確保 woff2 字體出現在較舊的，效率較低的文件格式（如 ttf）之前。 理由是瀏覽器是直接使用它能解讀的第一個字體，即使它是一個較為肥大的文件格式。
此外，除非網站需要支持 IE8，否則不需要 woff2 和 woff 以外的文件格式。 如果不需要支持 IE11，就只需要 woff2。
@font-face {
font-family: 'astralweb';
src: url('astralweb.woff2') format('woff2'),
url('astralweb.woff') format('woff');
}
如果字體只有 ttf 格式，則需要使用線上字體轉換的工具對其進行轉換。 假如使用未帶有完全開源許可證的字體，請先確認許可證是否允許轉換格式。
使用 font-display
當開始研究字體載入策略時，會很常看到這兩種字母縮寫：
- Flash of Invisible Text (FOIT) : 指的是瀏覽器下載 web font 之前看不見文本的期間。
- Flash of Unstyled Text (FOUT) : 是在瀏覽器下載 web font 之前備用字體呈現文本的期間。
兩者都不是理想的使用者體驗，但如果我們使用 web font，其中一種極可能會在用戶首次訪問網站時發生（希望通過第二次頁面載入，瀏覽器將能夠將其 cache，避免情況再次發生）。 延續上面的方法繼續添加 font-display，則可以告訴瀏覽器我們偏好呈現哪種狀況在使用者面前。
在以前的文章有介紹 font-display 各個屬性的特性（auto｜block｜swap｜fallback｜optional），此篇文章就不再贅述，請參閱 使用 font-display 改善與優化網站效能。
值得一提的是，Google SEO 排名指標中 CLS (什麼是 CLS ? 請參閱：2021年 GOOGLE 演算排名 SEO 核心指標 – 累積版面配置轉移 CLS )，對於 FOIT / FOUT 是有列入評分標準，目前 font-display 較為合適的屬性是 swap，swap 解決了字體閃爍的問題，但字體變換的瞬間還是因不同字體設計有不同的軸、字重、字寬，所以依然會造成瞬間的抖動，CLS 會酌量增加 0.001~0.01 分。
@font-face {
font-family: 'astralweb';
src: url('astralweb.woff2') format('woff2'),
url('astralweb.woff') format('woff');
font-display: swap;
}
預先載入 font 文件
為了最大程度地減少 FOIT / FOUT 時間，我們希望盡快載入 web font 文件。 使用 html <head>中的 <link rel =“ preload”>，可以讓瀏覽器更早開始獲取字體。 在<head>的頂部（任何 CSS 之前）添加以下標記，將 href 屬性設置為 font 文件的 url：
<link rel="preload" href="/astralweb.woff2" as="font" type="font/woff2" crossorigin>
透過添加此標籤，我們告訴瀏覽器立即載入 web font 文件，通常瀏覽器只有在 CSS 中找到特定字體的引用並找到使用該字體的 DOM 元素後，才會開始載入。
簡單來說，瀏覽器僅會在當前頁面上需要時才下載字體。 而我們要預先載入覆蓋此行為，即使沒有使用字體，瀏覽器也會被迫下載字體。但預先載入一種字體只能載入單一格式，woff2 即是最優先的考量。
預先載入的字體越多，從 preload 中獲得的收益就越少，因此請優先考慮 “第一可視範圍” 中出現的字體（ 用戶在不滾動的情況下看到的前100vh）。
Font 文件建立子集合 – Only use what you need
透過設置字體的子集合，我們可以生成一個較小的 font 文件，該文件僅包含所需的字形（字形是單個字符或符號）。 使用 Font Subsetter Tool 上的工具來對需求字體 （測試：Space Grotesk Bold）進行子集化，僅包含 “Basic Latin” 範圍內的字符，這將 woff2 版本的文件大小從 30KB 減少到僅剩 7KB。
與更改文件格式相同，使用前，請先確認字體許可證上是否允許子集合的建立。
自行託管所需字體
最後一點，並不像上述四個方法為通用法則。使用託管服務，例如 Google Fonts 或 Adobe Fonts，有兩個很好的理由：
- 它們通常是網絡上使用某些字體免費合法的唯一選擇：當使用其中一種服務，請確定該服務是否支持子集合設置或可以添加 font-display。
- 它們很方便：將服務中提供的 html 複製到網頁的 <head> 會比其他方法更為快速（相對於自行下載 font 文件，再轉換和建立子集合，然後為每個字體的粗細， 風格寫@ font-face 規則）。
如果只是出於方便仍在使用 Google Fonts，請查看 google-webfonts-helper。 使用線上工具，可以從整套 Google Fonts 中構建自定義 web font，定義所需的粗細和字符集，再進行下載，其中包含所需的 CSS 和 font 文件（最新格式）。
接下來將列出 4點不使用託管服務而選擇自行託管字體的原因：
- Performance 效能網域查找需要時間；雖然可以使用 Preconnect 來緩解此問題，但是打開傳輸控制協定 TCP 連接新網域始終會降低效能。 這可能就是為什麼某些 Google 自己的網站（包括web.dev）現在也是使用自託管字體而不是 Google Fonts 的原因。
- Privacy 隱私如 Adobe Fonts 之類的付費 web font service 需要出於計費目的而檢測頁面瀏量，但是它們收集的數據可能超出其必要性。 如果可以選擇的話，請使用 CSS（<link rel =“ stylesheet”>）而不是 JavaScript（<script>）載入字體，以減少第三方可以收集有關用戶的數據量 。
- Control 控制自行託管，可以完全控制字體的確切載入方式，允許您提供自定義子集合，定義 font-display 以及指定瀏覽器緩存 font 文件的時間。
- Reliability 可靠性第三方服務可能會減速，中斷或完全關閉。 自行託管字體，只要我們的網站正常運行，字體都將正常呈現。
結論
以上的每個步驟都有其自身的優點，一起使用後可以帶來更大的改進。 如果決定實施本篇中介紹的某些方法，請在進行更改之前和之後嘗試使用 Lighthouse 或 Web Page Test 之類的線上工具，查看每項更改的效果。未來我們將介紹更多有關字體應用的技術，記得追蹤我們的FB粉絲團及IG，也別忘了訂閱電子報，就不會錯過第一手的最新消息囉！有問題也歡迎聯繫我們！
參考文章：https://iainbean.com/posts/2021/5-steps-to-faster-web-fonts/#5.-Self-host-your-fonts
我要留言