Cloudflare Workers 加速 WordPress 網頁載入效能實戰教學

為了改善網頁反應時間 (TTFB)，除了升級伺服器周邊硬體之外，使用 CDN 服務也是個不錯的選擇。Cloudflare 的邊緣快取服務 (Edge Cache) 已是大多數人認同的低成本架站必備項目。他的強大就不再贅述，這次要介紹的是 Cloudflare 推出的進階服務 — Workers。

Workers 與邊緣快取服務的差別，在於 Workers 擁有了高度的功能性。意味著你可以利用這個服務輕易做到 全站快取 (過濾已登入者)、字型快取、第三方腳本快取 或其他高自定義功能，現在解釋起來會過於模糊，我們會在接下來的文章中詳細說明。

---

在目前在官方釋出的 Workers 範例中，我挑出 Edge Cache HTML、Fast Google Fonts 與 Third Party Scripts 三個腳本來進行教學。讓我們來開始主題：

Workers 面板基本操作

首先登入 Cloudflare 控制台，從 Menu 選單進入 Workers 面板。

• 

到達 Choose your Workers plan 頁面時，我們選擇免費版本 Continue with Free。

• 

順利進入 Workers 面板後，我們點擊 Create a Worker 新增一個 Workers 腳本。

• 

先假定我們已經寫入好腳本，那就按下 Save and Deploy 進行存檔與部署。

• 

確認操作，再次點擊 Save and Deploy。

• 

到這裡，就先當我們的 Workers 腳本已設置完畢，接下來要將 Workers 綁訂到我們的網域。這邊注意一下，因為官方預設的腳本會讓網頁變成 Hello World，請閱讀完全文並選擇好欲使用的腳本再進行接續步驟。

再次開啟上方 Menu 選單，進入你的 網域控制台。

• 

切換到 Workers 頁面後，點擊 Add route 新增路由。

• 

在 Route 中輸入你要綁定的網址，可使用萬用字元 * 來全站路由，再調整 Workers 欄位為剛才新增的腳本。

為了防止因 Workers 免費方案請求數達到限制而遭到阻擋，導致網站 被下線，個人會調整 Request limit failure mode 下的 Failure mode for this route 為 Fail open (proceed)，使多出的請求直接繞過 Workers，讓網站伺服器直接處理。(可依自己的考量進行選擇)

最後按下 Save 完成部署。

• 

這時瀏覽剛才綁定的網址，Workers 腳本理應正常運作。

• 

基本操作就到這裡。接下來要介紹三個可運行於 WordPress 系統的腳本。

Edge Cache HTML

Edge Cache HTML 腳本的主要功能是快取 WordPress 的靜態網頁，且可以達成過濾特定 Cookies 與自動更新快取的機制。下面以簡化的流程圖來解釋：

• 

將整支腳本複製貼上至 Workers 後，我們必須修正一下腳本內容：

// API settings if KV isn't being used
const CLOUDFLARE_API = {
  email: "你的 Cloudflare 電子郵件", // From https://dash.cloudflare.com/profile
  key: "你的 Cloudflare 密鑰",   // Global API Key from https://dash.cloudflare.com/profile
  zone: "你的 Cloudflare 網域 Zone ID"   // "Zone ID" from the API section of the dashboard overview page https://dash.cloudflare.com/
};

完成後直接部署與綁定。接下來請為 WordPress 安裝 Cloudflare Page Cache 外掛並啟用。

登出 WordPress 後使用開發者工具測試，當 Workers 成功快取，在 Header 中 x-html-edge-cache-status 的狀態將會切換成 Hit。

• 

Fast Google Fonts

Fast Google Fonts 腳本能將 Google 字型先快取到 Cloudflare 中，再讓訪客直接從 Cloudflare 取得字型。你可以從開發者工具中查看到 Workers 將 Google 字型路徑重寫成站內位址，理應可以省下許多站外請求，加快速度。

但目前 Google 字型載入速度其實還不算慢，這邊需要自行評估。

• 

Third Party Scripts

Third Party Scripts 與 Fast Google Fonts 其實是一樣的功能，只不過目標對象從字型檔案變成了 Script 腳本，這裡就不多做贅述。

• 

---

最後提醒兩件事：

1. 在綁定路由的時原則上只能綁一個，如果想要讓所有個腳本都能運行，則必須自行合併與修正腳本。
2. Workers 是否能確實加速你的網站，這個答案是 不一定。像各位現在看到的這個網站，因為我使用台灣當地的高速主機，Cloudflare 變成只適合當作腳本與圖片的快取系統。如果現在使用 Workers 做全站快取，反而會 拖慢載入速度。你需要花費時間來進行測試，才能獲得理想的結果。