跳至主要內容
    SEO Academyby 盧卡山人

    Cache-Control

    Cache-Control 是 HTTP header 用來控制快取行為。正確快取可改善速度與降低 TTFB，錯誤快取會造成內容不更新。

    定義

    Cache-Control 是 HTTP 回應 header，用來告訴瀏覽器與 CDN 如何快取資源（例如 max-age、s-maxage、stale-while-revalidate）。對 SEO 與效能而言，良好快取能改善速度與可用性；但錯誤的快取會導致內容更新延遲與使用者看到舊資料。

    為什麼重要

    • 大幅改善 TTFB 和 LCP — 快取命中時幾乎零延遲，用戶幾毫秒內看到內容
    • 降低伺服器負載 — 快取吸收大量請求，減少源站壓力
    • 改善 Core Web Vitals — Google 會評估頁面載入速度，快取直接影響分數
    • 降低頻寬成本 — 快取資源不需重複傳輸，節省 CDN 費用
    • 提升爬蟲效率 — Googlebot 抓取時如果快取命中，源站負擔更低
    • 支援離線體驗 — 搭配 Service Worker 可實現完整離線快取
    • 容錯能力 — stale-while-revalidate 讓源站故障時仍能提供舊內容

    怎麼做（實作重點）

    • 靜態資源用 immutable + max-age=31536000（1年）搭配 fingerprint 檔名
    • HTML 用短 TTL（max-age=0 或 60s）+ stale-while-revalidate 保持新鮮
    • API 回應根據資料特性設定：不變的用長快取，即時的用 no-store
    • 使用 s-maxage 控制 CDN 快取，與瀏覽器快取分開設定
    • 加 Vary: Accept-Encoding 確保壓縮版本正確快取
    • 用 ETag 或 Last-Modified 支援條件請求（304 Not Modified）
    • 測試：用 DevTools 檢查 Response Headers 和快取命中狀態

    範例

    http
    # 靜態資源（有 fingerprint 的 JS/CSS/圖片）
Cache-Control: public, max-age=31536000, immutable
# immutable 告訴瀏覽器不需要重新驗證，永久快取

# HTML 文件（需要保持最新）
Cache-Control: public, max-age=0, must-revalidate
# 或用 SWR 策略：先回傳快取，背景更新
Cache-Control: public, max-age=60, stale-while-revalidate=86400

# API 回應（根據資料特性）
# 不變的資料（如城市列表）
Cache-Control: public, max-age=86400, s-maxage=604800
# 即時資料（如庫存）
Cache-Control: no-store

# CDN 專用（讓 CDN 快取更久）
Cache-Control: public, max-age=60, s-maxage=31536000
    text
    # public/_headers

# 預設：所有頁面
/*
  Cache-Control: public, max-age=0, must-revalidate

# 有 fingerprint 的靜態資源
/assets/*
  Cache-Control: public, max-age=31536000, immutable

# 圖片（可長效快取）
/*.webp
  Cache-Control: public, max-age=2592000
/*.avif
  Cache-Control: public, max-age=2592000

# API 回應（禁止快取敏感資料）
/api/user/*
  Cache-Control: private, no-store

    常見問題

    關於這個詞彙的常見問答。

    回到詞彙表