在上一篇《縮圖打得開卻被說無效?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,需要掌握三點原則:
- Cloudflare 是中間快取層
- 更新網站後需手動清 CDN 快取
- 所有變化前提是 HTML 結構也同步更新
從上述我們可以看到,Cloudflare 是提升網站速度與安全性的重要工具,只是它的快取機制也讓「網站更新延遲顯示」成了常見問題,如果我們還沒準備好跟它相處,不妨先安裝快取清除外掛就好,等未來有需要時再加上它。
補充小技巧:避免太常手動清快取的方法
如果我們會常更新內容,可以這樣設定:
- 先保留 Cloudflare,但進入「開發者模式」(Developer Mode):適合正在大量修改網站時,暫停快取干擾。
- 善用 SEO 外掛的「自動清除快取」功能:比如 Rank Math、SEOPress 可以搭配 LiteSpeed Cache 自動清 HTML。
- 真的不想煩,就暫時停用 Cloudflare 的 Proxy(點橘雲變灰):這樣 DNS 繼續由 Cloudflare 管,但不走快取、也沒干擾你改網站。
- 改用 “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 外掛之後,都要記得兩種快取都要清除,當然最好也順手清下社群快取,這樣我們的縮圖、標題、網站小圖才會真正同步更新。記得這三層關鍵快取順序:
- 源站快取:先讓主機產出正確 HTML
- CDN 快取:再讓 Cloudflare 去抓新的版本
- 社群快取:最後強制 Facebook/LINE 重新讀取
小結-更改設定沒錯,但快取不清,等於白改!
本來只是想簡單寫一篇關於「清除快取對網站更新到底有多重要」的文章,順便順手補補快取的原理,結果沒想到這一挖,竟然像是打開了 Pandora 的盒子─,越問越多、越寫越多,資料與觀念像雪球一樣滾,最後滾成一整篇超完整的快取教學筆記,頭都快爆了。
我從來沒想到,以前前輩在小聚上隨口一句「更新完記得清快取」,背後竟然牽扯這麼多結構層級、來源判斷、清除時機、甚至快取衝突的細節,原本看似簡單的問題,卻幾度讓我卡住、鬼打牆。
這篇文章結合了我親身除錯的過程,還有作為一個對 WordPress 架構不算熟悉、偏向內容製作取向的使用者,在過程中碰到的各種疑問。這些都是我一步步透過詢問 ChatGPT、比對資料、實測後拼湊出來的邏輯,希望能幫助跟我一樣非工程背景、卻又想好好經營網站的管理者,能少繞一點遠路。
簡單記住一個原則就好「網站有更新,一定要先清源站快取」,再清 CDN 快取,這兩個快取都清了,絕大多數的畫面更新、縮圖、SEO 調整都會正確顯示,如果還是沒變?那再清除下社群快取,如果還是沒辦法解決,那有可能就不是快取的問題了,這又是一個要處理的問題,也就是我下一篇要討論的主題-網站是否能正確呼叫wp_head()。
✦ 喜歡這篇文章嗎?
《煙雲漫筆》的每月慢信會收錄這樣的片段,也會分享一些未公開的草稿與旅行筆記。
如果你也想一起閱讀,歡迎留下信箱。