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 做全站快取,反而會 拖慢載入速度。你需要花費時間來進行測試,才能獲得理想的結果。
訂閱
Notify of
guest
3 留言
最新的 最舊的
Inline Feedbacks
檢視所有留言