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

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

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

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

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

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

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

a9e1aea758dc79befb969cc5fadada44

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

申請流程

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

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

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

9324af10a597d5dacad04c34e31c5fe3
30da6a66a6a85c19ca24c4c30e1979fc

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

335eae8636e28478b139763b6b1ca604

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

ad5782fbd35e973e947006f73fa67a7e
7af262e3c5998bd59d1316861008f174

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

90413e95cc7615e7965a14af2d81e415

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

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

33ddd117b0b903d0f11f71029c48b143

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

ac34053dc9464ed22c5a230de585912c

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

c3c1f35d718becf109f0862ab168ebab

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

b31143f04c0262fcc86d0a8842f48508

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

88942fbf145a70db0544448ffe412622

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

13783a72d1d4ca181453bc63716a6648

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

8b6464973c5c8cc019d7c5920fd59dfe

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

a9f1d6d133bda353b7b91111eb5b8e71

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

測試流程

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

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

3dadd9f642527fedf50e4a61356afd0f

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

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

c0b7ab91a44e26d6a11b76b92841f37c

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

7a8c8bb21501b9c339bb185ba1534220

外掛的外掛

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

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

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

訂閱
Notify of
guest
0 留言
Inline Feedbacks
檢視所有留言