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」外掛。
https://wordpress.org/plugins/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 前就在用的,且如果未來退租後也會繼續選用的外掛。這外掛的外掛性已經不用在解釋了吧?
https://tw.wordpress.org/plugins/wp-cloudflare-page-cache/
至於 WP Cloudflare Super Page Cache 要怎麼安裝、使用,這就留到下次來介紹啦!