Kinsta 與 Cloudflare APO 的整合,代表了最大化 WordPress 性能的進步,在基準測試中,我們發現影響最大的是 TTFB 的載入時間,啟用 APO 後 網站頁面 TTFB 載入時間減少了 70 – 300%,具體取決於測試位置。
在本文中,我們將深入說明和範例 Cloudflare APO 的工作原理以及如何使用它來提高 WordPress 網站的性能 !
目錄
- 什麼是 WordPress 自動平台最佳化 (APO) ?
- 邊緣伺服器的靜態 HTML
- CloudFlare 的自動平台最佳化的工作原理
- 通過高性能主機和 Cloudflare APO 最大限度地提高 WordPress 性能
- Cloudflare 自動平台最佳化整合設定 WordPress
- 如何將 Kinsta 與 Cloudflare APO 整合並確認正在運行
什麼是 WordPress 自動平台最佳化 (APO) ?
WordPress 自動平台最佳化是 Cloudflare 提供的一套新的一鍵式平台定制優化服務。
第一個獲得 APO 待遇的平台是 WordPress,它是全球最受歡迎的 CMS,而 CMS 市場占有率超過 60% (所有網站佔有率超過 40%),未來,我們希望看到類似的 APO 服務用於其他 CMS 平台上。
Cloudflare 的 WordPress APO 在兩個主要方面提高了網站性能:
- WordPress 網站頁面的靜態 HTML 副本快取在世界各地的 Cloudflare 邊緣伺服器中。
- 第三方字型由 Cloudflare 快取和提供。
邊緣伺服器的靜態 HTML
Cloudflare 的 APO 與其他傳統頁面快取的 CDN 解決方案之間的不同處,主要是它能夠在 Cloudflare 的邊緣伺服器直接快取靜態 HTML。為了更了解 APO,我們來看看從「無最佳化」到 APO 的四種不同的 WordPress 設定。
WordPress 設定 #1 – 無頁面快取或無 CDN
預設情況下,WordPress 沒有頁面快取或 CDN 支援,使用此配置,即使網站請求之間沒有更改頁面內容,所有請求也需要由 PHP 和資料庫動態產生。
此外,沒有內容傳遞網路 CDN 的整合,所有網站靜態資產 (如 CSS、JS、圖片和字型) 都由原來的伺服器提供內容。
這種配置可能會導致 WordPress 網站非常慢,尤其是對於遠距離的訪問者 (讀者)。
WordPress 設定 #2 – 沒有 CDN 的頁面快取
實現頁面快取是提高 WordPress 性能的最佳方法之一,在 Kinsta 中,我們的會為每一個網站使用伺服器級的快取機制,由 Nginx 的 FastCGI 快取模組提供支援。
其他的使用者,也會在 WordPress 中安裝快取外掛,而產生快取頁面提高網站速度。
頁面快取可以顯著降低了伺服器上的 CPU 負載,因為可以從快取中處理請求,而無需由動態 HTML 生成。
伺服器的快取機制或 WordPress 快取外掛,可以降低你的 CPU 負載,以專注於其他重要的動態任務,並使你的 WordPress 網站更加穩定,雖然此配置可以讓你的網站每秒處理更多請求,但它並不能解決「距離問題」。
如果沒有合適的 CDN,對於遠方的訪問者提供靜態資產仍然是一個大問題。
WordPress 設定 #3 – 使用 CDN 進行頁面快取
到目前為止,使用 CDN 以提供靜態資產的頁面快取是託管 WordPress 網站最有效率的方式。
在這個設定中,源伺服器仍然負責為頁面提供實際的 HTML,然而,CSS / JS 文件、圖片和字型這樣的靜態資產被傳送到世界各地的各種 CDN 的節點 (PoP)。
這個設定背後的想法是靜態資產,尤其是大圖片,佔請求頁面大小的一大部分. 因此,通過將資產傳送到更靠近訪問者的伺服器,可以減少載入時間並提高性能。
儘管此配置比前兩項的配置有了顯著改進,但它確實讓你想知道如果 WordPress 性能不再由源伺服器提供 HTML 而成為速度瓶頸,會發生什麼?
在 Cloudflare 為 WordPress 引入 APO 之前,這樣的設定的技術層面非常高,至少對於非技術使用者來說是不可行的。
WordPress 設定 #4 – 適用於 WordPress 的 Cloudflare APO
Cloudflare APO 是世界上最新的 WordPress 性能加速,與之前受源伺服器性能限制的 WordPress 設定不同,啟用 APO 的網站從訪問者的角度來看本質上變得「無源頭伺服器」。
為了實現這一點,Cloudflare 利用其全球分佈的 CDN 以及 Workers / Workers KV 來建立 WordPress 網站的靜態 HTML 資產。
現在,只需啟用了 APO 的相容 WordPress 網站不再受到源伺服器所引起的延遲的影響。
簡單的說,來自美國、德國或日本的訪問者 (讀者) 的請求將從附近的數據中心而不是你的源伺服器的數據中心提供服務。
Cloudflare 的自動平台最佳化的工作原理
使用 Cloudflare APO 後,你的 WordPress 網站的 HTML 會快取在 Cloudflare 遍布全球的邊緣伺服器中,這是由 Workers KV 來執行的,這是一種分佈式鍵值資料庫服務,具有超快速的全局傳播 (不到 60 秒)。
當數據通過 Cloudflare API 寫入 Workers KV 時,它會在幾秒鐘內自動複製到全球 150 多個 Cloudflare 數據中心。
這使得 Workers KV 成為加速 WordPress 網站的主要執行者,因為文章和頁面可以很容易的由 key-value 表示,URL 是「key」,HTML 頁面內容是「value」。
你的 WordPress 網站啟用 APO 後,對你網站的大部份的請求將不再訪問你的源伺服器。
相反的,請求將從本地 Cloudflare CDN 快取 (如果快取頁面存在) 或 Workers KV (如果快取頁面在 Cloudflare 的 CDN 上不存在)提供。
如果 CDN 快取或 Workers KV 資料庫中不存在某個頁面,則 Cloudflare 將會向你的源伺服器發出單個請求並快取新頁面的 HTML。
這裡的神奇之處在於 Cloudflare Workers KV 充當源伺服器的各種分佈式鏡像,想像一下,存儲在 Workers KV 中的數據會在 Cloudflare 的整個伺服器網絡中自動複製。
簡單的說,即使你的 WordPress 的源伺服器位於美國的某個地方,來自日本訪問者 (讀者) 的請求也不需要訪問你的美國伺服器來啟動本地 CDN 快取區。
而是,來自日本的訪問者將從附近的 Cloudflare 數據中心的 Workers KV 資料庫或 CDN 快取中獲得快取的 HTML。
這種新的交付模式與之前為 WordPress 進行 HTML 頁面快取的方式大不相同。
以前,流行的「整頁快取」方法是由創立 Cloudflare 頁面規則來「快取所有內容」,雖然這種方法可以帶來顯著的性能提升,但它並不是一種非常有效的快取方法,因為它依賴於「pull」模式而不是 Workers KV 的「push」模式,後者會自動將 HTML 推送到全局。
使用以前的規則的設定,訪問美國 Cloudflare 快取區的訪問者,不會為其他位置 (歐洲、日本) 的訪問者快取資產,也就是說,網站無法從全球內容交付 (CDN) 的角度有效地利用 Cloudflare 的網絡。
Cloudflare 自動平台最佳化還通過快取第三方字型,在許多情況下,字型會佔據頁面請求大小的很大一部分。
這與通常從域名提供的 CSS、JS 和圖片不同,字型通常從第三方服務 (如:Google Fonts) 提供,也就是說 Cloudflare 等基於代理的快取服務無法快取字型和提供字型。
由於 APO 由 Cloudflare Worker (位於源伺服器和訪問者之間的可編程 JavaScript 服務工作者) 提供支援,因此可以額外的方式來完成快取之外的任務。
在這種情況下,APO 使用 Cloudflare Worker 來快取第三方字型並使用內聯 CSS 修改頁面的 HTML 指向 Cloudflare 的 CDN 上的快取字型,這不需獲取字型的額外外部請求的需要,並減少了提供頁面所需的連接數量和載入時間。
最後,由於 APO 通過 WordPress 外掛與你的網站整合,因此,每當你更新網站上的頁面、文章時,Cloudflare 快取都會自動清除,這可以確保訪問者始終能夠在沒有任何人工干擾的情況下查看你網站的最新版本。
通過高性能主機和 Cloudflare APO 最大限度地提高 WordPress 性能
Cloudflare APO 並不是靈丹妙藥,選擇像 Kinsta 這樣高效能 WordPress 主機仍然非常重要,主要有兩個原因:
- Cloudflare APO 僅為未登錄的用戶快取前端頁面,與 Kinsta 的伺服器級頁面快取配置類似,APO 不會快取具有特定 cookie 的頁面和已登錄用戶的頁面。簡單說,源伺服器性能仍然是關鍵部分。
- 一個出色的 WordPress 體驗不僅僅包括快速的前端性能,由於 WordPress 本質上是一個動態 CMS,因此在操作 WordPress 網站時需要考慮許多因素,後台的效能也是要並重。
以下 4 點說明了,為什麼即使使用 Cloudflare APO,仍然應該選擇高性能 WordPress 主機。
1. WooCommerce、Easy Digital Downloads和電子商務網站
當檢測到某些與電子商務相關的 cookie 時,Cloudflare APO 有選擇地繞過快取,例如,當訪問者將商品添加到WooCommerce 網站上的購物車時,WordPress 會 woocommerce_items_in_cart 自動設置 cookie,當檢測到此 cookie 時,APO 會繞過快取以避免快取和提供客戶特定的數據。
因此,即使啟用了 APO 自動平台最佳化,WooCommerce 和其他 WordPress 電子商務平台仍將嚴重依賴源伺服器性能。
2. WordPress 控制台性能
由於 Cloudflare APO 不會為登入用戶快取 HTML,因此在WordPress 控制台中將始終完全依賴於你的源伺服器性能,如果你沒有使用性能優化的主機,那麼在你的 WordPress 網站上編寫和發佈內容、管理圖片和其他功能及運行維護等等任務,可能會變成非常緩慢的體驗,這會對你的業務成效產生直接的負面影響。
3. WordPress 會員網站和論壇
如果您使用 Ultimate Membership Pro 之類的外掛來管理你的 WordPress 會員網站,或使用 bbPress 來支援 WordPress 論壇,Cloudflare APO 將無法最佳化大部分流量。
由於會員網站和論壇網站通常需要會員用戶登入,Cloudflare APO 將自動繞過這些用戶的 HTML 快取,因此,使用高性能主機仍然是 WordPress 會員網站和論壇,保持快速用戶體驗的最佳方式。
Cloudflare 自動平台最佳化整合設定 WordPress
既然上述已經討論了 Cloudflare Automatic Platform Optimization for WordPress (Cloudflare APO) 這麼多的優點,我們來說明如何將此服務與 Kinsta 整合,並設定到你的 WordPress 網站。
KInsta 雖然已經與 Cloudflare 整合,但 Cloudflare APO 這一部分並未在整合範圍內,也就是說,你想要使用 APO 的功能,必須自費。
APO 適用於 Cloudflare 免費和付費方案,對於免費的 Cloudflare 用戶,APO 需要額外支付每個月 5 美元的費用;如果你在 Cloudflare 上使用 Pro、Business 或 Enterprise 方案,則無需額外付費即可啟用 APO。
Kinsta 已經提供了 Cloudflare Enterprise 方案相當的功能,我們只需額外購買 APO 功能。
要開始使用 Cloudflare APO,需要執行以下操作:
1. 創建 Cloudflare API Token
在啟用 APO 之前,需要先生成 API Token 並安裝 Cloudflare WordPress 外掛。
請點擊 Cloudflare 控制台右上角的個人資料圖標,點擊「我的設定檔」,選擇「API Tokens」,然後點擊「建立 Tokens 」。
在「API Token Templates」頁面中,點擊 WordPress 選項旁邊的使用範本。
「WordPress」範本將生成具有必要權限的 API Token ,允許自動平台最佳化正常運行,一開始使用 APO 所需全部的預設設定,但如果你需要將 API Token 鎖定到特定用戶或區域,請隨時對「帳戶資源」和「區域資源」設定進行調整。
配置完 Token 參數後,向下滾動並點擊「繼續至摘要」。
最後,點擊 建立 Token 以完成該過程。
請務必將 API Token 複製到安全位置。稍後安裝 Cloudflare WordPress 外掛時將需要它,在密碼管理器等安全位置記錄 API Token 後,請關閉該頁面。
2. 安裝 Cloudflare WordPress 外掛
Cloudflare WordPress 外掛可以直接從 WordPress 外掛目錄中安裝,請在你的 WordPress 控制台中搜尋「Cloudflare」。
啟用後,接下來轉到 WordPress 控制台側欄中的設置 > Cloudflare,然後點擊「Here」登錄。
輸入你的 Cloudflare 帳號關聯的電子郵件地址以及你之前生成的 API Token,點擊 Save API Credentials 以完成登錄過程。
現在 Cloudflare WordPress 外掛已全部設定完畢,我們再轉到 Cloudflare 控制台以啟用自動平台最佳化。
3. 在 Cloudflare 中啟用自動平台最佳化
WordPress 的自動平台最佳化包含在 Cloudflare Pro、Business 和 Enterprise 方案中,無需額外費用,如果你使用免費的 Cloudflare 方案,則 APO 附加組件為每個月 5 美元。
要啟用 APO,請到 Cloudflare 控制台中的 Speed > 最佳化。
向下滾動到「最佳化傳遞」部分,並啟用「WordPress 自動平台最佳化」,如果你使用的是 Free 方案,Cloudflare 會在此提示提供帳單訊息。
啟用 APO 後,應該會看到一條消息,顯示「在你的 Domain 上成功偵測到 WordPress 外掛程式」。
再回到你的 WordPress 控制台中,轉到邊欄中的 設置 > Cloudflare,點擊「Automatic Platform Optimization」 設置旁邊的應用按鈕啟用。
如何將 Kinsta 與 Cloudflare APO 整合並確認正在運行
要讓 APO 正常運行,首先,確認你的 WordPress 網站的網域啟用了 Cloudflare 的 DNS 選項卡中的橙色雲。如果未啟用橙色雲,Cloudflare 將不會為你的網域傳送流量。
Kinsta 因為與 Cloudflare 整合,所以我們要利用 Kinsta 的 Cloudflare IP 來啟用 APO,要將原來的 A 紀錄刪除,改為 CNAME 別名方式。
使用瀏覽器檢查器檢查 Cloudflare APO 快取狀態
使用 Web 瀏覽器的內置檢查器檢查對你網站的請求的 HTTP 標頭,我們將使用 Google Chrome 來檢查,首先,開啟瀏覽器無痕模式視窗。
按下鍵盤 F12 鍵,查看 > 開發人員 > 開發人員工具 來訪問檢查器,點擊對你的網域請求,在子目路中,點擊「Headers」以顯示 HTTP 資訊。
啟用 APO 後,會看到三個 headers ,當 header 與下面的 headers 完全匹配時,APO 工作正常:
- cf-apo-via | tcache:表示從哪裡提供請求,有幾個可能的值 「origin, no-cache」、「tcache」,如果你看到此 header 的「origin, no-cache」值,則表示源伺服器已向 Cloudflare 發送資料了,最後,「tcache」值表示請求是從 Cloudflare 的快取提供的。
- CF-Cache-Status | HIT:表示頁面是否由 Cloudflare 的 CDN 提供服務,F5 刷新頁面幾次後,你應該會看到「HIT」狀態,如果你的 CF-Cache-Status header 在幾次刷新後仍然顯示「DYNAMIC」,則可能是由於配置錯誤或與 cookie 相關的不相容而繞過了 APO。
- cf-edge-cache | cache, platform=wordpress:據源伺服器的快取指令指示頁面的快取存相容性,這個 header 有兩個可能的值「no-cache」和「cache, platform=wordpress」,當使用 Cloudflare WordPress 外掛正確配置 APO 時,此 header 將應該快取顯示為「cache, platform=wordpress」。
- age:表示頁面在 Cloudflare 的 CDN 中快取的秒數。
使用 curl 檢查 Cloudflare APO 快取狀態
你還可以通過在 SSH 使用下面的 curl 指令來確認 Cloudflare APO 是否正常工作,該指令傳遞了一個「Accept: text/html」header。
curl --request GET -I -H "Accept: text/html" https://www.your-website.com
Code language: JavaScript (javascript)
執行命令後,會看到如下所示的 headers 列表,cf-cache-status、cf-apo-via、cf-edge-cache 和 age 顯示請求被 CloudFlare 的快取中。
CloudFlare APO 與 CloudFlare DNS 比較
最後,我們做了一個簡單的測試,來查看使用 CloudFlare APO 和使用一般 CloudFlare DNS 的差別。
使用 KeyCDN Performance Test 工具,在全球 10 個不同的地點進行測試,測試網站的性能,提供網站載入時間和 HTTP 回應 header 資訊結果。
上圖是運行 CloudFlare APO WordPress 自動平台最佳化的測試結果,TTFB 大幅的縮短時間。
上圖是運行一般 CloudFlare CDN 的測試結果,雖然已經將 CCS / JS、圖片推送到 CDN 節點上,TTFB 的時間還是非常的長。
結語
Cloudflare WordPress 自動平台最佳化無疑是近期提升 WordPress 性能的最重要服務,它超越了一般的 Web 伺服器最佳化、伺服器端頁面快取和 CSS / JS 縮小策略,並呈現出全新的東西。
在 Cloudflare APO 之前,WordPress 一直沒有一種簡單的方法在 CDN 上快取 HTML 頁面。
但是,受到 Cloudflare 對台灣的網路限制因素,放棄 Kinsta 原本的 Cloudflare IP 而與 Cloudflare APO 整合,會損失 TPE 這個節點,轉而繞道至 HKG 或 KIX 的節點進入台灣,速度上雖然感受不出太大的差異,但也是一個遺憾。
直不值得花費每個月 5 美金的費用啟用 CloudFlare APO,最主要是看你的網站受眾在哪裡,如果,你的網站訪問者都是在台灣,使用 Kinsta 本身的 CloudFlare 就非常夠用了,如果你的網站的訪問者遍佈全球,CloudFlare APO 無疑是一個最好的選擇。
如果您喜歡這篇文章,那麼您會喜歡 WooWP 的 WordPress 託管平台。加速您的網站,並從我們經驗豐富的 WordPress 團隊獲得技術支援,基於 Google Cloud 的基礎架構專注於自動擴展、性能和安全性,讓我們向您展示 WooWP Kinsta 的與其他主機商的不同 !
Sharing the is
發佈留言