中文字體拖慢你的網站？一篇搞懂字體該怎麼處理（附實測數據）

你的網站速度很慢，但你不知道為什麼。

圖片壓了、外掛刪了、快取也開了，Google PageSpeed 分數還是拉不上來。

問題可能不在你想的地方。

很多中文網站速度慢的主因，不是圖片，不是 JavaScript，是字體。

中文字體為什麼這麼大？

英文字體只需要處理 26 個字母的大小寫、數字、標點，加起來大概 200-300 個字形。一個字重（weight）的檔案大小通常在 20-50 KB。

中文不一樣。

常用字就有 3,000-6,000 個，加上罕用字可以到 13,000-20,000 個字形。每個字形都是獨立設計的，不像英文可以用字母組合。

拿最常見的 Noto Sans TC（Google Fonts 上最多人用的繁體中文字體）來說：

• 全集約 13,982 個字形
• 單一字重的 OTF 檔案：4.5-9 MB
• 即使轉成 WOFF2（網頁專用壓縮格式），單一字重仍約 900 KB - 1.2 MB

一般網站至少會用 2-3 個字重（Regular 400、Medium 500、Bold 700）。

三個字重加起來 = 2.7-3.6 MB，光字體就吃掉這麼多。

當作對比：一張經過壓縮的網頁用圖大概 80-200 KB。三個字重的中文字體，等於 15-45 張圖片的大小。

字體慢，SEO 就慢

Google 從 2021 年開始把網站速度（Core Web Vitals）納入排名因素。到 2026 年，這個規則沒有改變，反而越來越重要。

三個核心指標：

中文字體主要影響的是 LCP 和 FCP（首次內容繪製）。

機制很直接：

1. 瀏覽器開始載入頁面
2. 遇到字體檔案，開始下載
3. 字體還沒下載完 → 文字要嘛不顯示，要嘛先用替代字體
4. 字體終於下載完 → 文字才正式出現
5. 這整段等待時間，就是你的 LCP 被拖慢的時間

在 4G 手機網路（大概 10 Mbps）下，3 MB 字體大約需要 2.4 秒下載。

在 3G 或收訊不好的地方（1.6 Mbps），同樣的字體需要 15 秒。

15 秒，客人早就關掉了。

實測案例：一個寵物品牌網站的字體問題

我們最近在整理客戶網站速度時，看到一個很典型的案例。

這是一個寵物居家服務品牌的網站，用 WordPress + Brizy 頁面編輯器架的，LiteSpeed 伺服器。網站內容做得不錯，SEO 基礎也全配了（sitemap、og 標籤、結構化資料都有）。

但用 Google PageSpeed Insights 跑手機版：

• Performance 分數：55/100
• LCP：21.5 秒 🔴
• FCP：18.0 秒 🔴

拆解下載量：

字體佔了整站下載量的 七成以上。

而且這個案例很有趣的是，它的 CLS 只有 0.003（幾乎完美），TBT（Total Blocking Time）是 0ms。代表 JavaScript 執行和版面穩定性完全沒問題。

速度慢的唯一原因就是字體。

它用了 Bunny Fonts（一個注重隱私的 Google Fonts 替代品）載入 Noto Sans TC 的 400、500、700 三個字重，每個字重大約 1 MB。

4 個馬上能做的加速方法

從最簡單到最有效，依序來。

方法 1：加上 font-display: swap 和 preload

難度：低 ｜ 效果：FCP 立刻改善

這是最快的修法。加兩行程式碼就好：

<!-- 告訴瀏覽器：先下載這個字體 -->
<link rel="preload" href="/fonts/NotoSansTC-Regular.woff2"
      as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: 'Noto Sans TC';
  src: url('/fonts/NotoSansTC-Regular.woff2') format('woff2');
  font-display: swap;
}

preload 讓瀏覽器在解析 HTML 的時候就開始下載字體，不用等到 CSS 解析完才動。

font-display: swap 讓瀏覽器先用系統預設字體顯示文字，字體下載完再換上去。這樣使用者至少不用盯著空白頁等。

副作用是會有短暫的「字體跳動」（FOUT，Flash of Unstyled Text）——文字先用系統字體顯示，載完後突然換成設計字體。但比起整頁空白 15 秒，這個取捨很值得。

方法 2：減少字重數量

難度：低 ｜ 效果：直接少 1-2 MB

很多網站載了 3-4 個字重，但實際上只用到 2 個。

問自己：你的網站真的需要 300（Light）、400（Regular）、500（Medium）、700（Bold）四個字重嗎？

大多數情況下，400（Regular）+ 700（Bold）兩個就夠了。標題用 Bold，內文用 Regular，排版已經很清楚。

每少一個字重 = 省下約 1 MB。從 3 個字重減到 2 個，下載量直接少三分之一。

如果你用 Google Fonts，載入連結長這樣：

<!-- 原本載 3 個字重 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">

<!-- 改成 2 個就好 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap" rel="stylesheet">

方法 3：字體子集化（Subsetting）

難度：中 ｜ 效果：最顯著，可以省 70-90%

這是效果最好的方法。

原理很簡單：Noto Sans TC 全集有 13,982 個字形，但你的網站用到的可能只有 2,000-3,000 個常用字。把用不到的字形刪掉，檔案就小了。

實測數據：

• 全集 Noto Sans TC（單一字重）：約 1 MB（WOFF2）
• 子集化到常用 3,000-5,000 字：約 200-400 KB
• 壓縮率：60-80%

有一個開源專案 webfont-noto 做了更極端的子集化（4,657 個字形），壓縮率達到 92.55%。

工具推薦：

• pyftsubset（Python fonttools 套件）：最靈活，可以指定要保留哪些字元
• glyphhanger：可以爬你的網站，自動找出用到哪些字，再做子集化
• Google Fonts API 的 &text= 參數：最簡單，但只適合字數很少的情況

如果你用 WordPress，有些佈景主題或外掛（像 OMGF — Optimize My Google Fonts）可以自動幫你下載 Google Fonts 到本機並做基本的處理。不過完整的子集化通常需要手動處理。

方法 4：Self-host 字體（不從 Google / Bunny CDN 載）

難度：中 ｜ 效果：省掉 DNS 查詢 + 連線時間

從 Google Fonts 或 Bunny Fonts CDN 載字體，瀏覽器需要：

1. DNS 查詢（fonts.googleapis.com 或 fonts.bunny.net）
2. 建立 HTTPS 連線
3. 下載 CSS 檔案
4. 解析 CSS，找到字體檔案位置
5. 再一次 DNS 查詢（fonts.gstatic.com）
6. 建立另一個 HTTPS 連線
7. 下載字體檔案

光是 DNS 和連線就多花了 100-300 毫秒。

Self-host（把字體檔案放在自己的伺服器上）可以跳過步驟 1-5，因為字體跟網頁在同一個網域，已經有連線了。

做法：

1. 從 Google Fonts 下載字體檔案
2. 用 google-webfonts-helper 轉成 WOFF2 格式
3. 放到網站的 /fonts/ 資料夾
4. 在 CSS 裡用 @font-face 指向本地路徑

如果搭配方法 3（先子集化再 self-host），效果最好。

方法比較表

如果只做一件事：先把字重從 3 個減到 2 個（方法 2）。花 30 秒，立刻省 1 MB。

如果願意花一個下午：方法 3 + 方法 4 一起做（子集化 + self-host）。這是目前最佳實踐。

常見問題

Q：我用了系統字體（不載任何外部字體），會不會更快？

A： 會，而且字體下載量直接歸零。但代價是品牌一致性——不同裝置會顯示不同字體（Mac 用蘋方、Windows 用微軟正黑、Android 用 Noto Sans），看起來不一樣。如果你的品牌對字體沒有強烈要求，這是最激進也最有效的做法。

Q：Google Fonts CDN 不是有快取嗎？第二次造訪應該很快？

A： 以前是這樣。Google Fonts 曾經有跨站快取（你在 A 網站載過 Noto Sans TC，去 B 網站就不用重載）。但 Chrome 從 2020 年開始取消了跨站快取（為了隱私）。現在每個網站都要重新下載。

Q：Bunny Fonts 比 Google Fonts 快嗎？

A： 速度差不多，因為字體檔案大小一樣。Bunny Fonts 的優勢是 GDPR 合規（不會把使用者 IP 傳給 Google），不是速度。

Q：我的網站用 SHOPLINE / Wix / Squarespace，能調整字體載入嗎？

A： 開店平台通常不讓你動字體設定。如果平台預設用 Google Fonts 載中文字體，你能做的有限。這也是自架網站（WordPress / Next.js）的優勢之一：你可以完全控制字體載入方式。

Q：字體調整完，SEO 排名會變好嗎？

A： 不保證。Core Web Vitals 是 Google 排名因素之一，但不是唯一因素。內容品質、反向連結、搜尋意圖匹配都更重要。但同樣品質的內容，速度快的頁面確實比慢的頁面更有排名優勢。而且速度直接影響使用者體驗——客人不會等 15 秒，他會關掉去找下一家。

總結

中文字體是很多網站速度問題的隱藏殺手。

真正的原因是中文字體天生就比英文大 20-50 倍，不是圖片太大、外掛太多或伺服器太慢。

好消息是，這個問題有明確的解法：

1. 先加 font-display: swap + preload（30 分鐘）
2. 字重減到 2 個（30 秒）
3. 子集化 + self-host（半天，效果最好）

做完這三件事，字體從 3 MB 降到 400 KB 以下，LCP 從 20 秒降到 3 秒以內。

這是我們實際在客戶網站上看到的數字，不是理論。