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 外掛並啟用。

Cloudflare Page Cache

Cloudflare Page Cache

Adds support for caching pages on Cloudflare and automatic purging when content changes.

Patrick Meenan

登出 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 做全站快取,反而會 拖慢載入速度。你需要花費時間來進行測試,才能獲得理想的結果。

延伸閱讀