Skip to main content

中文字體對於網站速度的影響

前言​

根據 Shopify 官方建議，若在網站中使用的文字不存在客戶的作業系統中，則該文字會在讀取網站時另外進行下載

Shopify 官方說法：

You can choose from several fonts for the text in your online store. However, if you use a font that does not yet exist on your customer's computer, then the font has to be downloaded before your text can be displayed.

因此以下為選用文字的建議：

Below are some examples of the fonts that might be used to render text when you select a system font family :

  • Mono: Menlo, Consolas, Monaco, Liberation Mono, or Lucida Console
  • Sans-serif: BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, or Helvetica Neue
  • Serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, or Source Serif Pro

比較改善前後的成效：​

  • Noto Sans (改善前)

此字型為中文字體，通常是並不會預設在電腦中，因此在網站讀取時會需要下載

  • Roboto (改善後)

此字體 Roboto 通常為系統預設字體因此將它作為對照組

圖片對照​

透過 LightHouse 實測結果： fonts-comparation

結論​

經過實驗結果證實字體的選擇確實會影響到網站載入速度，且使用到的字數越多載入網站的時間也會越久！

載入網站時間 = 字數 * 字體實際容量

=> 字體越多 or 字體實際容量越大 則載入網站時間也越久!