無痛架站 – Self-Host Google Fonts 提升網頁速度，改善 Google Core Web Vitals 分數

接續 SEO 最佳化的話題，為了提升網頁速度、改善訪客閱讀的體驗，我們一般會使用 Google PageSpeed Insights 來檢查 Core Web Vitals 評分是否提升，影響閱讀體驗的相關數據是否表現夠好 (如 CLS、LCP 等)。

Google 在 2021 年 8 月改變網頁索引、排名的機制之後，將不會參考電腦版的網頁速度評估而是直接採用行動版的數據。

在這篇文章中，自行架站的麻瓜朋友們，我們將會介紹簡單易懂能夠顯著提升網頁載入速度的方式，透過自行託管 Google 字型 (self-host Google Fonts) 大幅減少需要跟 Google 字型伺服器溝通、傳輸資料的時間。

而我們也多了一個理由將 Google 字型託管在我們自己的網站中：

2022 年 1 月德國法院裁定『內嵌從 Google 伺服器下載字型的網站違反歐盟 GDPR 規範』。

German Court Rules Websites Embedding Google Fonts Violates GDPR – The Hacker News

使用 Flying Scripts 之後

還記得上一篇文章「無痛架站 – Flying Scripts 提升網頁速度，改善 Google Core Web Vitals 分數」中我們介紹過可以使用 Flying Scripts 改善 Core Web Vitals 評分的方式嗎？

本文是接續在使用 Flying Scripts 之後，自行託管 Google 字型的測試，因此網頁速度評估的數值將以上一篇文章的結尾作為基礎。(如下圖)

第一次造訪 Quants Note 網站的新朋友們，建議先閱讀「無痛架站 – Flying Scripts 提升網頁速度，改善 Google Core Web Vitals 分數」一文唷。

行動版網頁速度評估

電腦版網頁速度評估

載入 Google Fonts 對網頁速度的影響

在進行 PageSpeed Insights 評估網頁速度的時候，如果有使用到 Google 字型就能在「排除禁止轉譯的資源」中看到與 fonts.googleapis.com 的資料傳輸與占用時間。Google 字型雖然都是最佳化的，但需要額外連線、傳輸還是會占掉一些基本的時間。

從下面的測試結果可以觀察到，光是 Google 字型就要額外花費將近 1 秒的頁面載入時間。在這篇文章的結尾，當我們完成自行託管 Google 字型之後，我們再來看看改善了多少。

如何 Self-Host Google Fonts

那麼我們要從哪開始呢？

首先我們要先知道使用了哪些 Google 字型，知道有哪些字型種類之後，可以先想一想是不是真的需要這麼多種不同的字型? 或是可以使用相近的字型代替，從而減少整體使用的字型數量。一般建議一個頁面不要使用超過三種以上的字型。

接著就可以透過 Custom Fonts 外掛自行託管 Google 字型囉!

找出需要的 Google Fonts

找出需要或正在使用的字型有幾種方式：

1. 編輯網頁的時候自行記錄使用了哪些字型
2. 使用 Chrome Extension 工具，例如 Hoverify 可以檢索網頁元素
3. 使用 PageSpeed Insights 評估網頁速度並從最佳化建議「排除禁止轉譯的資源」中定位字型種類

通常會建議混合使用上述的幾種方式，除非是網頁設計熟手，保持著良好規劃與設計的紀錄，那麼在初期的時候就會知道需要使用到哪幾種字型了。

但是一般人可能在設計網頁、編輯的時候急忙著完成工作，大多只能事後使用其他工具協助了。建議大家使用第 3 種方式，可以一次定位找出一個網頁中使用到的所有字型。後續再依照頁面的類型一一檢查即可快速找出所有使用的字型。

網頁的類型：

• 首頁 – Landing Page
• 彙整頁面 – Silo Page
• 部落格頁面 – Blog Page
• 文章頁面 – Post

安裝 Custom Fonts

從 WordPress 後台的「外掛」> 「安裝外掛」搜尋 Custom Fonts 即可找到以下外掛。安裝後並完成啟用。

啟用外掛之後即可在 WordPress 後台的「外觀」> 「Custom Fonts」找到。

步驟一：從 Google Fonts 下載字型

如果還沒想好要用哪種字型的話，可以先至 Google Fonts 查詢、檢索。這個網頁可以讓大家直接觀察各種字型的樣貌與風格。

決定好字型之後，接著到 google-webfonts-helper 挑選需要的字型、粗細、字級後下載。

步驟二：上傳字型

將步驟一中下載的字型上傳到 WordPress 媒體庫中。

步驟三：將 Google Fonts 設定為本地字型

接著從「Custom Fonts」> 「新增字型」按粗細、顯示方式將下載的字型上傳至對應的格式。

各種格式對應支援的瀏覽器與裝置類型的說明，可以參考 google-webfonts-helper 中的說明。

步驟四：完成本地字型的設定

設定完成之後，我們就能在 Custom Fonts 看到儲存好的各種字型了。

修改網站字型來源

接著就是大工程了。由於在網站建設之初還未想到要自行託管 Google Fonts，所以現在必須要一一的回顧當時架站的每一個跟字型有關的步驟。如果你才正要準備架站，可以在編輯網頁時參考以下套用本地字型的說明。

因為 Quants Note 的網頁使用的是 Thrive Suite – Thrive Theme Builder 建立的，所以接下來的說明會以 Thrive Themes 的功能說明為主。如果大家使用的是不同的佈景主題編輯器則需要按照各自編輯器的內容一一回顧檢查。

Thrive Themes – Typography

Thrive Themes 預設使用的是 Shapeshift Theme，有提供整體網站字型風格的設定。從 WordPress 後台的「Thrive Dashboard」> 「Thrive Theme Builder」>「Typography」可以找到。

Typography 中可以儲存不同範本 (Template)，設定不同風格未來可以做為整體風格改變的改版之用。按下 EDIT 編輯按鈕即可看到以下畫面。

選取不同階層、段落即可指定網頁中對應階層、段落內容的預設字型與風格。

左上方會出現字型設定區塊，在 Source 來源的地方選取 Custom Fonts Plugin。

接著就能從 Font 字型選單中看到先前步驟儲存在本地的字型了。

在 Typography 中設定的範本將會套用到一般網站上的首頁、文章以及一般自訂頁面的預設使用字型與格式上。相當方便。

Thrive Themes – Theme Templates

在 Thrive Themes 中按照使用需求，可以自訂以下不同頁面的預設範本：

• 首頁
• 部落格頁面
• 文章頁面
• 彙整頁面

以首頁的範本為例，編輯之後即可按照各個區塊的內容將字型調整為本地字型。

頁面 Pages

安裝 Thrive Suite 之後，可以使用 Thrive Architect 作為頁面編輯器。對於之前曾經自訂調整的頁面，可以使用 Edit with Thrive Architect 編輯頁面。

與上述的 Thrive Theme Builder 編輯首頁範本相同，點擊 Edit with Thrive Architect 之後即可開始編輯頁面中的各個區塊內容，並將字型調整為本地字型。

Disable Google Fonts

經過一番努力將網站中各個網頁的字型都調整完成之後，接著可以透過「Thrive Dashboard」> 「General Settings」中的 Disable all Google Fonts loaded by Thrive on your website 選項，取消使用 Google Fonts。

使用自行託管的 Google Fonts 之後

嗒噠~~這樣我們就完成了 Google Fonts 的自行託管了。

興奮之餘，別忘了先清除網站的快取 Caches，靜待一段時間等候網頁的快取重新建立完成之後可以透過 Chrome 瀏覽器 Ctrl + Shift + I 進行檢查，查看 Network 下 Font 載入的字型是否路徑都是來自於自己的網站。

確認沒問題之後，就來到 Google PageSpeed Insights 再次進行網頁速度評估吧!

行動版網頁速度評估

以下就是自行託管 Google 字型之後的網頁速度，對行動版的速度提升效果很不錯。(請參考評分改善的相對值，Presto Player 這篇文章現在的評分已經沒這麼高了，詳情請看後記)

電腦版網頁速度評估

對電腦版的網頁速度也有提升，更加的穩定。

後記 – 關於提升網頁速度的研究

為什麼這篇文章一直到現在才問世呢? (距離上一篇文章已經 10 天了)

因為這段時間進行了一個新外掛的研究，這個外掛的功能跟 Perfmatters、Asset CleanUp 類似，也是專門用來提升網頁載入速度的套裝功能，因為功能太多且複雜所以進行了一系列的不同參數組合的比對測試。詳細內容還請大家靜待有完整的報告之後再跟大家分享。

而就在開啟這個研究的最初，是什麼原因讓我突然就開始研究起其他效能增進的外掛呢? (原本規劃是更晚一些時候才會開啟)

因為就在完成自行託管 Google Fonts 的網站改版之後的某天，突然發現 Flying Scripts 中延遲 JavaScript 載入的魔法似乎是失靈了 (可改善載入時間，但不影響 PSI 分數)。還記得「無痛架站 – Flying Scripts 提升網頁速度，改善 Google Core Web Vitals 分數」文中我們讓行動版的評分從 20 提升到了 60 嗎? 現在已經被打回原形了!!

所以我就馬上繼續研究其他效能增進的方法了。

大家也可以檢查一下，如果遇到相同的狀況可以在留言中一起討論。

提升網頁速度的研究真的是一刻也無法讓人停歇呀。(苦笑)

更新 – 網站最佳化研究的新進展

前面說的 Clearfy 外掛的研究與分析已經完成囉，有興趣的朋友可以看看以下兩篇詳細分析文章！

「14 天網站最佳化衝刺實作 – Clearfy v.s Heavy Theme」
「網站最佳化 – Thrive Themes 的 Project Lightspeed 光速計畫 + Clearfy Pro」

也可以參考這一系列能提升網頁載入速度、效率的外掛分析：

「無痛架站 – 縮圖工具 ShortPixel 快速又方便」
「無痛架站 – Flying Scripts 提升網頁速度，改善 Google Core Web Vitals 分數」
「WordPress 超輕量圖片 Lightbox 特效外掛 – 完美取代 FooBox」
「Presto Player Review 最佳的線上影片播放解決方案」
「網站最佳化 – 網站改版就用「Blocksy 佈景主題 + Kadence Blocks 區塊編輯器」」