在上一篇《縮圖打得開卻被說無效?LiteSpeed 的過度保護陷阱》中,我提到了 LiteSpeed 伺服器可能會過度防禦社群爬蟲,導致圖片抓不到。而這一篇,要來記錄另一個我親身踩過、也搞最久的一個坑-網站更新了內容,卻怎麼看都沒變。

當時我對網站做了一連串修改,從 SEO 外掛的 OGP 設定全都重新整理過,按下儲存完後,結果打開前台一看,居然什麼都沒變,不管是分享連結還是直接開網站,看到的仍是改之前的樣子。當下我開始懷疑是不是設定漏掉什麼,還是主機不支援功能,於是又開始一輪測試與重新設定,但問題依然沒解決,最後,才總算發現是快取沒清,就這樣一個按鈕沒按,讓我被搞了兩天,真是謝了。

這也讓我想起了很久以前在一次 WordPress 小聚上,前輩提到過一句話:「網站有改,一定要記得清快取。」當時我只覺得就一個按鈕這樣而已,並不太理解背後原因,反正照做就對了。但直到這次,我才真正意識到,原來快取並不是單一的東西,它其實分成-網站快取與 CDN 快取-兩種。這兩種快取若沒清乾淨,我們以為的更新,其實就只是我們以為,實際上新內容壓根沒送出去。

這也是為什麼在這個系列中,我決定把「快取問題」獨立出來一篇專文來記錄與釐清,因為不論是在處理 OGP 縮圖、meta 資料、社群分享預覽,甚至是一般網頁樣式更新,快取沒清好都會有所影響,看不到卻無所不在。如果有遇到這種「明明修改了,卻沒有任何變化」的狀況,那麼這篇文章希望能幫助新手理解,為什麼要進行快取清除這個動作的關鍵原因,並搞懂快取層級跟正確清除快取的方式。

為什麼 WordPress 還要另外安裝「清快取外掛」?

首先要知道,我們要WordPress 是一種「動態網站」,也就是每當有一個訪客打開我們網站時,WordPress 會當下立即去到資料庫裡抓文章內容、圖片、分類資訊等,然後即時把這些東西組裝成一頁完整的 HTML 頁面,再送到訪客眼前。

這種模式最大優點就是系統非常靈活,無論我們是更新了文章,還是換了網站名稱或圖片,只要一儲存,馬上就能套用到網站上,這是最大的優點,相對的缺點就是,這也非常耗資源,每來一位訪客來,WordPress 都要重新爬資料庫,等於每次都重新做網頁,當同時有很多人訪問時,主機很容易吃不消,網站就會變得很慢,俗稱卡卡的。

而快取就像是幫我們把「組裝好的完整頁面」先存一份副本。每當訪客來的時候,網站就不用再從頭跑一次組裝流程,而是直接把那份「組裝好的完整頁面」送出去,這樣對訪客來說,網頁畫面出現的快,網站自然不會卡卡的,使用體感更好;對網站管理者來說,主機的壓力也會減輕,也能承受更多人同時上站,這樣才能留住流量。

這時候就會有人想問,那 WordPress 自己就沒有快取功能嗎?對,WordPress 原生(預設)是完全沒有快取機制的,它每次都是即時撈資料、即時組 HTML,這也是為什麼,我你需要另外安裝快取外掛,來幫網站建立這種「組裝好的完整頁面」的機制。透過快取外掛,可以讓網站跑得更快、省資源,還能掌握網站更新時機,當我們更新網站內容(像是換了文章標題、圖片、OGP 縮圖),不必再被「明明改了但沒反應」的狀況卡住。

出現「明明改了但沒反應」,很大的機率是雖然我們更新了,但網站還在送出「舊的 HTML 快取檔案」,還沒來得及更新,這時候快取外掛就能派上用場:

  • 你可以手動一鍵清除全部快取
  • 或者設定成「每次發文或儲存設定時自動清快取」,幫你自動同步最新內容

這時候會有人想問:「既然快取外掛是先把內容組好給訪客,那我不要快取,是不是每次訪客來都會看到即時最新的版本,就不會卡舊資料?」

乍聽之下,還蠻合理的,但事情沒有這麼簡單。事實上,就算沒裝快取外掛,網站還是會有快取,甚至可能會變成我們無法控制的快取來源,快取外掛的重要性不只幫我「建立快取」,更重要的是幫我們「清除快取」。不安裝快取外掛,反而更容易踩到讓人抓不著頭緒的「快取陷阱」,遇到這種事情的話,我們連清都不知道要去哪裡清。

沒有安裝快取外掛會發生甚麼事情?

最直接的說法是,當我們沒有安裝快取外掛時,網站內容更新後是否會馬上反映在前台,就不是由我們自己決定了,決定權變成是主機和 CDN 的規則來判斷。

當我們以為「不裝快取外掛,就不會有快取」,這其實是一個很常見的誤會,快取行為不會因為我們沒裝外掛而消失,反而因為沒裝外掛,失去了主動清除快取的能力。我們可以看看當沒有安裝快取來外掛時,會出現哪些問題:

首先可能會出現的是,自家主機偷偷幫我們快取。有些主機 ( 像 Hostinger、遠振、SiteGround) 為了讓網站跑得更快,會在背景自動快取我們的頁面 HTML。但如果你沒有快取外掛,就沒有地方可以手動清除,等於只能等系統自己過期更新,這個時間就不可考,可能一兩個小時後就更新,也有可能是數天後,一切都是未可知。

其次若我們使用了 CDN,沒使用手動快取的話,那頁面的更新就會被卡住,因為 CDN 會幫我們加速網站,但同時也會快取整個頁面,這表示若 CDN 還沒主動更新前,外部訪客看到的仍然是舊的版本。

接著是很多人沒注意到的,頁面編輯器自己也會快取,像 Elementor、Divi 這類建站工具,有些會自動產生靜態 HTML 頁面或樣式快取,來幫我們加速畫面,但也可能讓我們再改了文字、圖片後,卻發現前台卻沒變,這時通常新手就會想說是不是網站壞掉了。

最後是我們看的是瀏覽器快取,當網站出現不是最新畫面,有時候不是網站沒改成功,而是我們的電腦留存的是舊畫面,像圖片、樣式表等會被瀏覽器快取,這也會造成「我看起來沒改變,但別人說都說有變」,這種反過來發生的狀況。

也就是說, 不裝快取外掛的最大問題是,是我們沒地方可以「按下清除鍵」,故當網站更新後,除非主機或 CDN 自己過期,否則無法馬上強制更新,我們就只能痴痴的等。這也是我當初踩到的大坑之一,設定明明改好了,縮圖、標題、樣式卻都沒反應,最後發現我清的是表面的 CDN,而關鍵的 HTML,在我下載外取外掛前我是沒辦法主動清除的。

所以我們若希望網站更新能立即在前台反映,建議還是要安裝一款好用的快取外掛,以便在更新網站內容後,只要點一下「清除全部快取」,就能讓最新的 HTML 結構、圖片、OGP 設定馬上生效,不只是方便控制,更能節省我們在反覆排查為什麼畫面沒變的寶貴時間。

為什麼要用 CDN?網站更新還要多一道手續?

首先我們要先知道 CDN(Content Delivery Network)是什麼?

CDN 是一種讓我們網站內容 (HTML、圖片、JS、CSS) 複製到世界各地節點的技術,讓訪客從就近的伺服器讀取內容,提升速度、減少原始主機負擔。 所以 CDN 快取」的就是-CDN 幫我們暫存網站的內容,於是訪客能看到的是 CDN 上的快取版本。

我自己有在前輩推薦下使用 Cloudflare,我以為 Cloudflare 清快取=CDN 清快取,某方面來講是對的。因為 Cloudflare 就是一種 CDN,當我在 Cloudflare 裡按下 Purge Everything,就是在清除它所快取的 HTML、圖片、CSS 等等,等同於清了 CDN 快取。但 Cloudflare 只是 CDN 的一種,CDN ≠ Cloudflare,因為提供這種服務的不只Cloudflare一家,如 QUIC.cloud(LiteSpeed 專屬 )、BunnyCD、Akamai、Amazon CloudFront 等都有提供類似的服務。

所有 Cloudflare 快取都屬於 CDN 快取,但不是所有 CDN 快取都由 Cloudflare 控管。這個概念先建立起來,我們接下來才好講,因為我的CDN是由 Cloudflare 來處理,所以後面都會用 Cloudflare 替代 CDN,以便方便解說。

使用 Cloudflare 的好處

優點說明
全球加速我們的網站會在 Cloudflare 的全球節點上建立快取,對非台灣地區的訪客來說速度會更快。
基礎安全防護Cloudflare 會幫我們擋掉部分惡意 IP、攻擊請求、Bot 等,有基本的防火牆效果。
自動 HTTPS免費 SSL 憑證(如果主機沒設定,也能靠它強制全站加密)。
減少主機壓力快取靜態資源後,減輕我們的主機負載。

使用 Cloudflare 的可能麻煩 ( 尤其對內容經營者 )

問題說明
修改網站後看不到更新Cloudflare 快取 HTML 導致你看的是舊版。要手動清除快取才會顯示新內容。
快取邏輯需要理解對新手來說「網站沒變但我改了」會很挫折,實際是 CDN 快取惹的禍。
除錯過程變的複雜有時我們會以為是主題或外掛壞掉,其實是 Cloudflare 快取沒清,這會拖延問題排查。

是否要使用 Cloudflare ?

我們可以先評估我們有沒有以下幾種狀態,若是勾選越多,那麼使用 Cloudflare 就會網站有幫助的,只要學會管理快取,效果會非常好。

  • 網站做國際網站,預估有海外流量
  • 有大量圖或靜態資源
  • 希望減輕主機壓力或省頻寬
  • 願意花點時間學習快取清除與快取層級邏輯

與之相反的,若是下面幾項越多勾選起來的,那麼停用 Cloudflare 是比較有利,且還能讓每次修改都能即時顯示,簡化除錯流程

  • 主要訪客都在台灣或亞洲
  • 網站內容經常更新(部落格、商店、縮圖、SEO 修正測試 )
  • 你自己對快取 DNS、CDN 設定比較沒信心
  • 當前網站速度還不算太慢

我們要知道在使用 Cloudflare 之前,我們網站主機的設定到使用者的瀏覽器,每一次存取,都直接向我們的主機請求最新的 HTML、CSS、圖片等內容。所以只要在 WordPress 後台按「儲存變更」或更新一篇文章,前端就會立即讀到新的內容,因為它是直接連線到你原始主機 (origin server)。再啟用 Cloudflare 之後,網站的設定到使用者的瀏覽器的,這個過程出現中介者,現在變成我們網站主機 Cloudflare(CDN 快取層 )→使用者的瀏覽器。

從這邊我們可以看出 Cloudflare 的工作,就是先幫我們把這些內容暫存 (cache) 在它的全球節點上,這樣每次有人連上我們的網站,它會優先從最近的伺服器把東西送出,不必每次都請求你主機上的資料,網站載入就能更快。但問題也就出在這裡,當我們更新了網站內容時,Cloudflare 上的快取內容還是舊的,它不知道你動了什麼,於是依舊把舊版本丟給訪客看。ˋ這時我們就會發現:

  • 自己在後台按儲存沒錯,但前台完全沒變化
  • Facebook/LINE 分享時還是抓到舊縮圖
  • 網站樣式或標籤根本沒有更新

這時最佳解法就是-手動清除 Cloudflare 快取,只要在 Cloudflare 後台點清除快取,就能讓它強制從源站 ( 也就是我們的主機 ) 重新抓最新資料,然後我們就會看到更新後的樣子了。因此若要使用 Cloudflare,需要掌握三點原則:

  1. Cloudflare 是中間快取層
  2. 更新網站後需手動清 CDN 快取
  3. 所有變化前提是 HTML 結構也同步更新

從上述我們可以看到,Cloudflare 是提升網站速度與安全性的重要工具,只是它的快取機制也讓「網站更新延遲顯示」成了常見問題,如果我們還沒準備好跟它相處,不妨先安裝快取清除外掛就好,等未來有需要時再加上它。

補充小技巧:避免太常手動清快取的方法

如果我們會常更新內容,可以這樣設定:

  1. 先保留 Cloudflare,但進入「開發者模式」(Developer Mode):適合正在大量修改網站時,暫停快取干擾。
  2. 善用 SEO 外掛的「自動清除快取」功能:比如 Rank Math、SEOPress 可以搭配 LiteSpeed Cache 自動清 HTML。
  3. 真的不想煩,就暫時停用 Cloudflare 的 Proxy(點橘雲變灰):這樣 DNS 繼續由 Cloudflare 管,但不走快取、也沒干擾你改網站。
  4. 改用 “Cache-Control: no-cache” 設定 HTML(適合技術熟手):這樣可以只讓圖片/CSS 快取,HTML 保持動態

CDN 快取跟網站快取,差在哪裡?清快取也有順序?

前面我們提到了網站快取外掛,也講述了CDN快取清除,這時又有可能遇到一種情況,就是兩個都清了,但還是一切還是舊照,會發生這種情況,很大可能不是我們改錯地方,而是「快取」沒清乾淨。要知道 CDN 快取跟網站快取,是各自負責不同的區域,清除順序不一樣,也會影響到最終成效。

網站快取的工作,就是把網站當下的 HTML 頁面暫存起來,讓系統不需要每次都重新組裝內容。每當更新文章、修改 SEO 設定、或是更換圖片時,WordPress 其實會產出一份新的 HTML 結構,但如果這份新的 HTML 沒有成功取代掉快取中舊的版本,那麼訪客打開網站時,看到的仍然會是過期的內容,也就是說不是沒改成功,而是改了之後,快取還在送舊的 HTML 出去。

CDN 快取則是會在世界各地的節點,幫我們暫存整份網站資料(像是 HTML、圖片、CSS 等),這樣訪客就不必每次都連回主機,可以加快載入速度,也減輕主機負擔。不過如果 CDN 沒更新快取內容,就算我們已經修改了網站的 HTML 結構,訪客看到的仍然會是舊版本的頁面,因為 CDN 還在送出過期的資料。

我們理解這兩種差異後,我們接下來要理解快取清除及清除順序,對前端的影響,為了方便理解,就用圖表顯示:

用圖表看懂兩種快取怎麼影響前端:

只清 CDN 快取的結果

更新網站內容

【源站快取沒清】→ 伺服器仍輸出舊版 HTML

【CDN 快取已清】→ CDN 回源重新抓 → 結果還是舊 HTML

訪客看到的:還是沒變!

只清網站快取快取的結果

更新網站內容

【源站快取已清】→ 伺服器已產出新版 HTML

【CDN 快取沒清】→ 還在送出之前快取的舊 HTML

訪客看到的:還是沒變!

先清 CDN 後清網站快取的結果

你更新網站內容

【源站快取還沒清】→ 網站仍輸出舊版 HTML 結構

【先清 CDN 快取】→ CDN 回源抓資料 → 抓到的是舊 HTML

【再清源站快取】→ 雖然產出新版本,但 CDN 已經快取了錯的內容

訪客看到的:依然是舊畫面!(因為 CDN 又快取了一次過期版本)

從上面的圖表,我們可以看到,兩種快取少清一個,訪客看到的依舊是舊的內容,若改成先清 CDN 在清網站快取的話,雖然兩種都有清到,但最終結果訪客看到的還是舊的,從這邊我們可以知道清除順序也會影響到最終結果。

正確的清除順序是:

步驟清除層級工具說明
第一步源站快取LiteSpeed Cache / WP Rocket 等重新輸出 HTML,讓內容更新
第二步CDN 快取Cloudflare Purge Everything讓外部訪客能拿到新版本
最後社群平台快取Facebook Debugger / LINE Tool讓分享縮圖和描述更新

網站快取與 CDN 快取都是為讓網站了加快速度,但如果不清楚誰快取了什麼,就會出現怎麼改都沒變的情況,特別是當每次改 OGP 設定、換縮圖、改網站名稱、換 SEO 外掛之後,都要記得兩種快取都要清除,當然最好也順手清下社群快取,這樣我們的縮圖、標題、網站小圖才會真正同步更新。記得這三層關鍵快取順序:

  1. 源站快取:先讓主機產出正確 HTML
  2. CDN 快取:再讓 Cloudflare 去抓新的版本
  3. 社群快取:最後強制 Facebook/LINE 重新讀取

小結-更改設定沒錯,但快取不清,等於白改!

本來只是想簡單寫一篇關於「清除快取對網站更新到底有多重要」的文章,順便順手補補快取的原理,結果沒想到這一挖,竟然像是打開了 Pandora 的盒子─,越問越多、越寫越多,資料與觀念像雪球一樣滾,最後滾成一整篇超完整的快取教學筆記,頭都快爆了。

我從來沒想到,以前前輩在小聚上隨口一句「更新完記得清快取」,背後竟然牽扯這麼多結構層級、來源判斷、清除時機、甚至快取衝突的細節,原本看似簡單的問題,卻幾度讓我卡住、鬼打牆。

這篇文章結合了我親身除錯的過程,還有作為一個對 WordPress 架構不算熟悉、偏向內容製作取向的使用者,在過程中碰到的各種疑問。這些都是我一步步透過詢問 ChatGPT、比對資料、實測後拼湊出來的邏輯,希望能幫助跟我一樣非工程背景、卻又想好好經營網站的管理者,能少繞一點遠路。

簡單記住一個原則就好「網站有更新,一定要先清源站快取」,再清 CDN 快取,這兩個快取都清了,絕大多數的畫面更新、縮圖、SEO 調整都會正確顯示,如果還是沒變?那再清除下社群快取,如果還是沒辦法解決,那有可能就不是快取的問題了,這又是一個要處理的問題,也就是我下一篇要討論的主題-網站是否能正確呼叫wp_head()。

✦ 喜歡這篇文章嗎?

《煙雲漫筆》的每月慢信會收錄這樣的片段,也會分享一些未公開的草稿與旅行筆記。
如果你也想一起閱讀,歡迎留下信箱。