文章彙整

五個方法提升 Web Fonts 載入速度

Astral WebBy Astral Web 2 months agoNo Comments
首頁  /  網站設計與開發  /  前端開發  /  五個方法提升 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

當開始研究字體載入策略時,會很常看到這兩種字母縮寫:

  1. Flash of Invisible Text (FOIT) : 指的是瀏覽器下載 web font 之前看不見文本的期間。
  2. 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 較為合適的屬性是 swapswap 解決了字體閃爍的問題,但字體變換的瞬間還是因不同字體設計有不同的軸、字重、字寬,所以依然會造成瞬間的抖動,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 FontsAdobe Fonts,有兩個很好的理由:

  1. 它們通常是網絡上使用某些字體免費合法的唯一選擇:當使用其中一種服務,請確定該服務是否支持子集合設置或可以添加 font-display
  2. 它們很方便:將服務中提供的 html 複製到網頁的 <head> 會比其他方法更為快速(相對於自行下載 font 文件,再轉換和建立子集合,然後為每個字體的粗細, 風格寫@ font-face 規則)。

如果只是出於方便仍在使用 Google Fonts,請查看 google-webfonts-helper。 使用線上工具,可以從整套 Google Fonts 中構建自定義 web font,定義所需的粗細和字符集,再進行下載,其中包含所需的 CSS 和 font 文件(最新格式)。

接下來將列出 4點不使用託管服務而選擇自行託管字體的原因:

  1. Performance 效能網域查找需要時間;雖然可以使用 Preconnect 來緩解此問題,但是打開傳輸控制協定 TCP 連接新網域始終會降低效能。 這可能就是為什麼某些 Google 自己的網站(包括web.dev)現在也是使用自託管字體而不是 Google Fonts 的原因。

  2. Privacy 隱私如 Adobe Fonts 之類的付費 web font service 需要出於計費目的而檢測頁面瀏量,但是它們收集的數據可能超出其必要性。 如果可以選擇的話,請使用 CSS(<link rel =“ stylesheet”>)而不是 JavaScript(<script>)載入字體,以減少第三方可以收集有關用戶的數據量 。
  3. Control 控制自行託管,可以完全控制字體的確切載入方式,允許您提供自定義子集合,定義 font-display 以及指定瀏覽器緩存 font 文件的時間。

  4. Reliability 可靠性第三方服務可能會減速,中斷或完全關閉。 自行託管字體,只要我們的網站正常運行,字體都將正常呈現。

結論

以上的每個步驟都有其自身的優點,一起使用後可以帶來更大的改進。 如果決定實施本篇中介紹的某些方法,請在進行更改之前和之後嘗試使用 Lighthouse  或  Web Page Test  之類的線上工具,查看每項更改的效果。未來我們將介紹更多有關字體應用的技術,記得追蹤我們的FB粉絲團IG,也別忘了訂閱電子報,就不會錯過第一手的最新消息囉!有問題也歡迎聯繫我們

 

參考文章:https://iainbean.com/posts/2021/5-steps-to-faster-web-fonts/#5.-Self-host-your-fonts

 000

推薦文章

Categories:
  前端開發SEO搜尋引擎優化數位行銷網站設計與開發

留下回應

你的電子郵件地址不會被公開.