Cloudflare 單月 5 美元 WordPress 自動平台最佳化服務實戰

Cloudflare 推了一個新功能「WordPress 自動平台最佳化 APO」,顧名思義就是可以加快 WordPress 網站的載入速度。(官網說明)

它的效果其實跟用付費版的多筆 Page Rule 來將前台全部快取、登入後根據 Cookie 自動略過的方式很像,但這個服務還有另外做了一些效能上處理,所以我們除了選用高效能伺服器之外,也可以選擇花少許租金來大幅改善網站的載入效能。

喔對了,其實有個 WordPress 外掛可以用 Cloudflare 免費版來達到類似的效果,在文末我們會提到。

如果我沒有退掉服務的話,你現在看這個網站時的 TTFB 應該至少會低於 300 毫秒

至於要怎麼測 TTFB,我們在後面也會提到,這邊先來說明如何啟用 APO

看下圖,左邊為原先僅套用 Cloudflare 預設設定的網站首頁,右圖是啟用了 APO 服務的首頁。我們可以看到倒數第三行的 Waiting (TTFB) 數值從 1.17 秒降到了 258.11 毫秒,雖然不是很專業的測試,但從這裡就能看到效能差距非常的明顯。

CloudFlare APO 每月服務租金為 5 美元 (約 150 台幣左右),必須使用信用卡或簽帳卡支付。我想成人應該都沒問題,但如果你未滿 20 歲則需要請父母陪你去郵局辦 VISA 金融卡或弄張副卡才可以申請 APO。

申請流程

在掏出信用卡之前,我們得先確認你的網站跟 Cloudflare APO 有沒有相容性問題。所以請先從 WordPress 後台安裝同名的「Cloudflare」外掛。

安裝好外掛後可以先不用動設定,我們先登入 Cloudflare 控制台 > Speed > 最佳化,看看 WordPress 自動平台最佳化服務是否有成功偵測到你網站的外掛。

如果有偵測到再繼續下一步,沒有的話請先檢查是否有外掛衝到了。(官方說明)

沒問題就勇敢按下購買按鈕進入申請流程。

付款沒什麼好說明的,東西填一填趕快往下走流程吧!

付款成功後,現在就可以將 WordPress 自動平台最佳化功能開啟。如果你的網站電腦與手機版網頁樣式不同,那我想你應該需要勾選「按裝置類型快取」才可以相容這類服務。

其實現在 APO 服務已經生效了,但因為我們還沒配置網站上的 Cloudflare 外掛,有些功能可能還不會生效。

所以,為了進行配置,請先進入 Cloudflare 後台 > 我的設定檔 > API Token > 建立 Token。

Cloudflare 很貼心地做了一堆範本給你選,我們可以直接選擇 WordPress 範本。

接下來這頁面會列出套用範本的設定值,沒必要就不用修改了,直接點擊繼續至摘要按鈕。

這邊直接點擊建立 Token 按鈕。

最後你會得到一串詭異的字串,這就是你的 Token,請先複製起來且不要外流,這東西可掌握著你 Cloudflare 帳戶的生殺大權呢!

該拿的都拿了,現在回到你的 WordPress 網站後台 > 設定 > Cloudflare,點擊 Sign in here 的 here 進行登入。

輸入你的 Email 與貼上剛才建立的詭異 Token 字串後,點擊 Save API Credentials 連結帳戶。

接下來你會進到 Cloudflare 外掛的設定頁,按下 Apply Recommended Cloudflare Settings for WordPress 的 Apply 按鈕就全部設定完成了。

最後我們來看看要如何測試網站當前的效能與 APO 服務狀態。

測試流程

首先,請用無痕式視窗開啟你的網站首頁。

無痕是甚麼,以 Chrome 來說就是這個:

瀏覽過一次你網站首頁之後 (目的是讓 Cloudflare 先進行快取),再按下鍵盤 F12 開啟 DevTools > Network,並且按下鍵盤 F5 重新整理網頁。

最後你就可以從下方的列表中找到第一個對網站的 GET 請求,點開他後你如果能從 Response Header 中找到 cf-apo-via: cache、cf-cache-status: HIT 代表已成功快取。

至於 TTFB 怎麼看,將右下角區塊切換到 Timing 頁,Waiting (TTFB) 欄位的數值就是了。

外掛的外掛

前面有提到的,前台全部快取、登入後自動繞過快取其實可以用 WP Cloudflare Super Page Cache 外掛來做到相同功能,一樣能讓網站 TTFB 數值降低許多。

那他跟 APO 有甚麼差別呢?老實說我也沒有很深入的去探討,但這個是我租用 APO 前就在用的,且如果未來退租後也會繼續選用的外掛。這外掛的外掛性已經不用在解釋了吧?

至於 WP Cloudflare Super Page Cache 要怎麼安裝、使用,這就留到下次來介紹啦!

0 留言
Inline Feedbacks
View all comments
[convertkit form=2362222]
0
對這邊的內容有什麼想法嗎?你可以在討論區留言喲!x
()
x