Cloudflare Workers 加速 WordPress 實戰紀錄

以往在使用 Cloudflare CDN 服務來加速 WordPress 網站都是使用 Page Rules 功能來將網頁快取在節點中,然而現在我們有了更好的選擇 — Cloudflare Workers。

Cloudflare Workers 原理

Cloudflare Workers 原理

Cloudflare Workers 是什麼呢?
依據官方提供的 edge-cache-html 說明,是先利用 Cloudflare Page Cache 外掛為 WordPress 的每個網頁添加 x-HTML-Edge-Cache 標頭,再使用 JavaScript 來辨別網頁標頭的內容並進行相對應的作業。

用於 WordPress 的特點

除了最最最基本的網站速度會快很多之外,還有以下兩個特點:

自動更新已變更內容的網頁

以往使用 Page Rules 時當網站內容更新後,都必須手動去 Cloudflare 清除已過時的快取。但是如果我們使用 Workers 的話,可以讓 Cloudflare 節點快取的網站內容能即時自動更新,加快作業速度與減少人力。

過濾已登入使用者的 Cookies

Workers 除了能辨別網頁標頭控制快取之外,還可以過濾使用者的 Cookies。也就是能做到只快取未登錄用戶的網頁,當你一登入 WordPress 或 Woocommerce 時就不會快取,對於必須登入後才能瀏覽的 wp-admin 等等非公開網頁來說可以做到一個很安全的保護。


開始部署,來輕鬆使用 Workers

在本篇教學中,我們事先已將 Cloudflare 部署為 WordPress 的 CDN,如果你是初次接觸 Cloudflare 的朋友,可以先來參考免費資源網路社群的介紹。

第一部分 – 安裝 WP 外掛

我們的首要任務是為你的 WordPress 安裝名為「Cloudflare Page Cache」的外掛,你可以下載外掛壓縮檔手動上傳或者在安裝外掛的介面搜尋並安裝。

第二部分 – 新增腳本

進入 Cloudflare Dashboard,切換到 Workers 分頁,點擊 Launch Editor 按鈕進入 Workers 控制台。

進入 Cloudflare Dashboard,切換到 Workers 分頁,點擊 Launch Editor 按鈕進入 Workers 控制台。

我們按下 Add Script 來新增一個腳本。

我們按下 Add Script 來新增一個腳本。

名字可以隨意取,我這邊就用 html-edge-cache

名字可以隨意取,我這邊就用 html-edge-cache。

新建好腳本後點一下 Edit 來進行編輯。

新建好腳本後點一下 Edit 來進行編輯。

將預設的程式碼全數刪除,並將以下連結內的程式碼轉貼過來

將預設的程式碼全數刪除,並將以下連結內的程式碼轉貼過來

將你的 Cloudflare 帳戶資訊填入下圖圈住的地方。

欄位說明

email -> 填入註冊 Cloudflare 的電子郵件
key -> 填入 API Key,可在 My Profile 頁面取得
zone -> 填入 Zone ID,在 Overview 頁面可以找到
將你的 Cloudflare 帳戶資訊填入下圖圈住的地方。

改好記得要按下 Save

改好記得要按下 Save。

第三部分 – 新增路由

接下來將分頁切換到 Route,並按下 Add route 來新增一個路由。

接下來將分頁切換到 Route,並按下 Add route 來新增一個路由。

在這邊可以直接輸入網站網址,後面再加上一個「*」通配符來進行全站快取。
不用擔心全站快取可能會引發的安全性問題,前面安裝的 WP 外掛與 html-edge-cache 腳本裡面都有包含了 Cookies 過濾,請安心服用 ^^

在這邊可以直接輸入網站網址,後面再加上一個「*」通配符來進行全站快取。

可以將原本作為靜態資源快取的 CDN 網域也加入路由,一起加速!

可以將原本作為靜態資源快取的 CDN 網域也加入路由,一起加速!

第四部份 – 檢測

最後用無痕開啟你的網站,按下鍵盤 F12 開啟開發人員工具,切到 Network 分頁來檢查看看網站的 Headers 裡面有沒有出現 x-html-edge-cache-status: Hit,如果有出現就代表 Cloudflare 有成功抓到快取了!

最後用無痕開啟你的網站,按下鍵盤 F12 開啟開發人員工具,切到 Network 分頁來檢查看看網站的 Headers 裡面有沒有出現 x-html-edge-cache-status: Hit,如果有出現就代表 Cloudflare 有成功抓到快取了!

參考資料