WordPress佈署CDN分享:
在研究優化WordPress的讀取速度的使用者也許聽過一個名詞:CDN(Content Delivery Network),傳說佈署這種服務就可加快網站讀取速度,部分速度檢測服務(GTMetrix)也會將它列為改善WordPress網頁讀取速度的手段之一。到底CDN是什麼呢?如何在WordPress佈署?會不會有什麼後遺症呢?這篇文章將會分享我在WordPress上使用過的CDN服務與心得,文章目錄:
進入正題前先說明本文分享的是我在「WordPress」架設的「內容網站」使用CDN的心得,並不是以技術面的角度全方位的探索這種網路服務。CDN的用途廣泛,串流或直播服務也非常依賴CDN來提供更高的服務品質,這些就不在本篇分享的範圍了。
CDN是優化網頁讀取速度的方式之一,如想探索如何優化WordPress網頁讀取速度,請參考WordPress|速度優化分享 – 主機挑選、圖片優化、相關外掛與CDN。
CDN簡介:
CDN的全名是Content Delivery Network(內容傳輸網絡),最基本的原理:
CDN服務商將網站所需的資源(大多是靜態資源,例如圖片、CSS、JavaScript等等)存放在它的資料中心,USER讀取資料時,根據系統設計優化傳輸路徑、讓USER可盡快由它們的資料中心取得檔案;部分CDN服務會在它們那邊儲存HTML(就是動態資源)
聽起來很玄,白話文就是如果你的資料中心在台灣,美國的使用者存取網頁的速度會受台灣 – 美國間的網路傳輸速度影響,如果採用在美國有資料中心的CDN服務,USER便能由美國取得資料、不用繞道台灣。
要不要用CDN的評估項目之一便是….你的資料中心離主要訪客遠嗎?如主要訪客來自台灣,而你的資料中心在香港、台灣或日本等東亞區域,那就不一定要採用CDN。
這種運作模式還有一個好處:減輕原始主機的負擔。原本它要負責回應所有的網頁資源請求,佈署CDN之後大半的資源是由CDN傳給使用者。以上兩點只是CDN基本服務之一,部分CDN會提供其他附加服務,這邊就不另外說明。
CDN佈署方式:
在簡介佈署方式前先說明網站資源類別,這樣才好理解佈署方式的差別:
- 動態資源:由PHP或NodeJS等程式組成的HTML(WordPress是用PHP)
- 靜態資源:CSS、圖片、JavaScript
- USER的瀏覽器取得HTML之後會再讀取上面相關的靜態資源,最後顯示成我們看到的網頁
變更DNS:
- 跟CDN服務說網站的IP在哪,他會去那邊抓取資料;變更自己網站的DNS、將主網域的IP指到CDN服務提供的IP
- 運作模式:USER瀏覽你的網站時,會因為DNS的設定被導到CDN服務的主機取得「所有資源(即靜態資源與動態資源)」
- 網站資源的網域不用變更、可以加快網頁回應速度(因為由CDN提供HTML),會在後面StackPath那邊說明注意事項
利用Delivery Domain:
- 開啟CDN服務之後它會給你一個網域,CDN服務會去抓你網站的「靜態資源」然後存在它提供的網域
- 你需要利用外掛將網站靜態資源的網域變更成CDN服務提供的網域
- 運作模式:USER讀取網站時,靜態資源的路徑會是掛在CDN提供的網域下、由它們提供檔案;HTML還是由原始主機提供
- 可以加快靜態資源讀取速度,但對改善網頁回應速度幫助不大(HTML還是由原始主機提供)
我用過的CDN服務:
Jetpack:
- Jetpack是WordPress官方提供的外掛,安裝這個外掛後可啟用WordPress官方提供的免費CDN服務
- 佈署方式:利用Delivery Domain
- 只處理圖片、WordPress主程式、Jetpack跟WooCommerce的CSS與JavaScript
- 不提供手動purge功能,如果你上傳一張圖片然後刪除它,再上傳另外一張圖片但檔名一樣,系統會顯示前一張圖片
- 詳細說明請參考Jetpack使用心得,開啟這服務後要觀察網頁讀取速度是否改善
KeyCDN:
- 官網
- 依使用量付費
- 佈署方式:利用Delivery Domain搭配CDN Enabler。如停用CDN Enabler,靜態資源的網域就會回復成原網域
- 跟WordPress整合程度高,搭配CDN Enabler可自動purge檔案
- 提供免費的SSL,所以CDN上的資源路徑也都是https開頭,不會造成混合性內容問題
- 佈署之後要觀察網站讀取速度,不知為何….啟用後圖片讀取速度有明顯延遲,我就不用了
StackPath:
- 官網
- 月費制
- 佈署方式:變更DNS或者利用Delivery Domain
- 跟WordPress整合程度較低、無法利用外掛自動purge,很常需要手動purge才會顯示新內容
- 提供免費的SSL
- 如採「變更DNS」則優化效果明顯,不過偶爾會因為快取動態資源(以php、NodeJS等程式組成的html)出問題
- 提供線上客服,回應很快
- 注意事項:雖然可利用StackPath快取HTML、加快主機回應速度(TTFB),但如有用WordPress的快取外掛(WP Rocket、WP Super Cache等等),須注意這些外掛對於HTML檔案設定的快取時限。如果這些外掛設定HTML的快取時限是0秒,StackPath「預設」是遵守這設定、不會在它的主機快取HTML。若需要解決這類的問題,請跟快取外掛開發商或CDN服務商聯繫
這三個CDN服務效能最好的是StackPath,他們最推薦的方式是以DNS實現全站整合(Full-Site Integration),也就是由它們提供靜態資源與動態資源,但是需基礎的DNS與CDN知識才好順利佈署,而且很可能要手動調整自己主機內HTML檔的快取設定。
提到CDN,總是有人建議使用Cloudflare,我的心得是….如果使用者大多來自台灣,可用它的DNS服務,但不要用它的「免費」CDN,因為….台灣的訪客造訪佈署Cloudflare「免費」CDN的網站,很容易被導到美國的資料中心取資料,多繞很長一段路。
CDN的潛在問題:
雖然CDN運用的當可以優化網站傳輸速度,但它的潛在問題也很煩人:
- 有的CDN效能有問題,佈署之後反而拖慢資料傳輸速度
- 因為部分或全部資料是來自於CDN而非原始主機,偶爾會因CDN跟原始主機互動不良產生的問題,這時很可能要詢問兩邊的客服到底是誰的問題,這很煩!
- 因為部分的資料來自於CDN而不是原始的主機,如果網頁資料有更新,可能需要purge資料(就是強制清除CDN資料或宣告那些資料過期了)才能讓USER存取到最新資料。
- 有的CDN服務提供WordPress外掛,可讓你更新資料時自動purge(例如KeyCDN)
- 有的沒有(例如Stackpath),這時要到CDN後台手動purge,其實蠻煩的
除了上面的潛在問題,佈署好CDN之後還要參考服務商的說明測試CDN是否正確運作,每家服務商測試方式可能有差異,請參考服務商說明。還有一點很重要….記得利用Google Search Console、AMP Validator、Mobile Friendly Test確認網頁是否可被Google正確的爬取、解讀。
心得:
在優化網站速度時,CDN確實是一個選項,但需要仔細評估,它潛在的後遺症其實很煩人,千萬別人云亦云的使用這種服務。如果網站大多數的訪客離網站的資料中心不遠(屬於同一個地理區域)或者網站主機根本沒有訪客過多產生的效能問題,佈署CDN是自找麻煩。
延伸閱讀:
WordPress懶人包:
- WordPress架站|註冊網域、安裝網站 / 外掛、設定調整等9大步驟教學
- WordPress SEO|網域與索引、重點功能、內容編輯等七大主題教學
- WordPress主機|重點功能要求、主機費用評估、五大主機簡介
- WordPress速度優化|主機挑選、圖片優化、相關外掛與CDN
- WordPress推薦外掛|Yoast SEO、WP Rocket、AMP for WP等10大外掛
- WordPress佈景主題|主題市集ThemeForest挑選、購買、安裝佈景主題教學
WordPress佈景主題:
WordPress外掛:
- Yoast SEO|WordPress必裝SEO外掛設定教學
- Redirection|WordPress必裝301轉址外掛設定教學
- WP Rocket|WordPress必裝快取外掛設定教學與注意事項
- WPForms|WordPress必裝表單外掛付費版教學
- AMP for WP|WordPress上線AMP網頁推薦外掛設定與使用心得
- Jetpack|超多工WordPress推薦外掛設定教學