HTTP 快取標頭設定盤點：靜態資源過期時間與驗證機制

作者：平白設計編輯部｜發布與最後查證：2026-09-28｜適用：台灣（中華民國）｜技術資訊，不保證搜尋排名

九月開學季後網站流量結構改變，靜態資源快取策略需重新檢視。圖片、CSS 與 JS 若未正確設定 Cache-Control，訪客每次瀏覽都會重新下載，增加伺服器負擔。本文盤點常見標頭錯誤與分類處理方式，協助你依資源類型制定快取策略並驗證。僅為技術檢查，不保證載入速度或 Core Web Vitals 分數。

文章重點

• 開學季流量結構改變，需重新檢視靜態資源快取策略。
• HTML 設長效快取易導致改版未生效，應改用 no-cache。
• CSS 與 JS 加雜湊檔名搭配一年 max-age 可減少重複下載。
• 透過瀏覽器 Network 面板或 curl 指令抽樣驗證標頭。

開學季後的流量變化與快取檢視

九月開學季結束，許多教育或內容型網站的流量來源會從行動端轉向桌機，或出現新的造訪高峰。這種結構性改變意味著靜態資源的下載模式也會跟著變動。若快取策略仍沿用暑假前的設定，可能無法有效應對新流量特徵。

此時最該做的不是盲目調整參數，而是先盤點現有標頭。確認哪些資源被頻繁請求卻沒有快取，哪些又被過度快取導致更新延遲。這一步能避免後續調整時誤傷正常運作的頁面。

盤點範圍建議涵蓋所有公開存取的靜態檔案，包含 HTML、CSS、JS、圖片與字型。你可以搭配 改版後 favicon 路徑怎麼抽樣 的方法，將小圖示也納入檢查清單。

常見的 HTTP 快取標頭設定錯誤

最典型的錯誤是把 HTML 文件也加上長時間的 max-age。一旦瀏覽器快取了舊版 HTML，即使你已更新內容，訪客看到的仍是過期畫面。這類問題在改版後特別容易引發客訴。

另一種極端是完全沒給圖片或 CSS 任何快取指令，導致每次瀏覽都重新下載。這不僅拖慢頁面呈現，也讓伺服器承受不必要的連線壓力。尤其在高流量時段，影響會被放大。

還有些站點雖然設了標頭，但忽略了 CDN 層級的覆蓋行為。例如源站給了短效快取，Cloudflare 卻用預設規則拉長了時間。建議同時檢查 改版後 og:locale 怎麼抽樣，確認社群分享快取是否同步更新。

curl -sI https://example.com/style.a1b2c3.css | grep -i cache-control
curl -sI https://example.com/index.html | grep -i etag
curl -sI https://example.com/logo.png | grep -i max-age

依資源類型制定快取策略

HTML 文件建議使用 Cache-Control: no-cache 搭配 ETag。no-cache 不代表不快取，而是每次使用前必須向伺服器驗證是否有新版本。這樣既能利用本地快取，又不會錯過更新。

CSS 與 JavaScript 最佳做法是在檔名加入內容雜湊值，例如 style.a1b2c3.css，再設定 max-age=31536000。只要檔案內容不變，瀏覽器就能直接讀取本地副本；一有變動，檔名不同自然會重新下載。

圖片與字型的策略則視更新頻率而定。品牌 Logo 或背景圖通常很少異動，可以給半年到一年的快取期；活動Banner 或新聞配圖壽命較短，建議設定幾天到幾週即可，避免過期內容殘留。

使用開發者工具與 curl 驗證標頭

最直覺的檢查方式是打開瀏覽器的開發者工具，切換到 Network 面板，勾選 Disable cache 後重新整理頁面。點擊任一資源，查看 Response Headers 中的 Cache-Control 與 ETag 欄位是否符合預期。

若需要批次抽樣或自動化檢查，curl 指令會更方便。你可以指定只抓取標頭而不下載本體，快速確認遠端伺服器的回應。這對於排查 CDN 與源站設定差異特別實用。

除了靜態資源，也別忘了檢查動態產出的檔案。例如你可以參考 改版後 web manifest 怎麼抽樣 的流程，確認 PWA 相關設定檔的快取行為是否正確。

CDN 覆蓋源站標頭的注意事項

當你使用 Cloudflare 或其他 CDN 服務時，要注意邊緣節點可能會覆寫源站的 Cache-Control 標頭。例如 Cloudflare 預設會快取某些副檔名的靜態資源，即使你的源站沒有明確指示。

這種覆蓋行為有時是好事，但若與你的策略衝突就會造成問題。建議在 CDN 後台建立 Page Rules 或 Cache Rules，針對特定路徑明確指定快取行為，而非依賴預設值。

最後提醒，本文僅為標頭設定的技術盤點，不保證調整後載入速度提升或 Core Web Vitals 分數改善。實際效能還受伺服器回應時間、資源大小與網路環境等多重因素影響。

常見問題

no-cache 和 no-store 有什麼差別？

no-cache 允許瀏覽器儲存副本，但每次使用前必須向伺服器驗證；no-store 則是完全禁止儲存，適合敏感資料。一般網頁用 no-cache 即可。

ETag 和 Last-Modified 要選哪一個？

兩者都是驗證機制。ETag 基於內容雜湊，精確度較高；Last-Modified 基於時間戳記。現代伺服器通常兩者皆提供，瀏覽器會優先使用 ETag。

改了標頭但瀏覽器還是讀舊檔怎麼辦？

可能是舊的 max-age 尚未到期。可強制清除瀏覽器快取測試，或透過變更檔名（如加版本號）讓瀏覽器視為新資源重新下載。

CDN 的快取和瀏覽器快取會互相干擾嗎？

不會干擾，但會疊加。瀏覽器看的是最終回應的標頭，而這個標頭可能已被 CDN 修改。因此需確認 CDN 輸出是否符合你的原始策略。

重點摘要

1. 開學季後應重新盤點靜態資源的快取標頭設定。
2. HTML 用 no-cache 搭配 ETag 確保內容即時更新。
3. CSS 與 JS 加雜湊檔名後可放心設定一年快取期。
4. 務必檢查 CDN 是否覆寫了源站的 Cache-Control。

延伸閱讀

• 改版後 favicon 路徑怎麼抽樣
• 改版後 og:locale 怎麼抽樣
• 改版後 web manifest 怎麼抽樣