如何使用 Nginx 快取靜態資源以加速網站

Web2026-09-21TryQuickToolBox

為何靜態資源快取如此重要

每當使用者造訪你的網站，瀏覽器就會請求數十個靜態資源：CSS 檔案、JavaScript、圖片、字型等等。若沒有適當的快取，每個請求都會打到你的伺服器，增加載入時間與頻寬用量。Nginx 是一款高效能網頁伺服器，可以透過告訴瀏覽器將這些資源快取在本機，以及在伺服器端進行快取，大幅改善這個問題。

在本指南中，你將學會如何設定 Nginx 有效快取靜態資源，降低延遲與伺服器負載。

了解瀏覽器快取與伺服器端快取的差異

這裡涉及兩種主要的快取類型：

瀏覽器快取：瀏覽器根據 Cache-Control 和 Expires 等 HTTP 標頭將資源儲存在本機。後續造訪時會從磁碟載入資源，避免網路請求。
伺服器端快取：Nginx 將回應儲存在記憶體或磁碟中，並針對重複請求直接提供，減少後端負載。

兩者對效能都至關重要。我們將涵蓋這兩者。

步驟 1：使用 Expires 標頭設定瀏覽器快取

啟用瀏覽器快取最簡單的方式，就是在 Nginx 設定中加入 expires 指令。這會設定 Expires 和 Cache-Control 標頭。

開啟你網站的設定檔（例如 /etc/nginx/sites-available/example.com），並為靜態資源加入一個 location 區塊：

location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg|woff|woff2|ttf|eot)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

這會告訴瀏覽器將這些檔案快取一年。immutable 指令表示該檔案永遠不會變更，因此瀏覽器在重新載入時甚至不會重新驗證。

最佳實務：使用帶版本編號的檔名（例如 style.abc123.css），這樣你就能更新資源而不會破壞快取。當檔案變更時，檔名也會改變，瀏覽器就會抓取新版本。

步驟 2：使用 Proxy Cache 啟用伺服器端快取

如果你在 Nginx 後方執行應用程式伺服器（例如 Node.js、Python 或 PHP），你可以在 Nginx 中快取靜態回應以減少後端請求。

首先，在 nginx.conf 的 http 區塊中定義快取路徑：

proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=static_cache:10m max_size=1g inactive=60m use_temp_path=off;

接著，在你的 server 區塊中使用它：

location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg)$ {
    proxy_cache static_cache;
    proxy_cache_valid 200 302 1y;
    proxy_cache_valid 404 1m;
    proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504;
    proxy_cache_lock on;
    add_header X-Cache-Status $upstream_cache_status;
    proxy_pass http://backend;
}

這會將成功的回應快取一年，並在後端故障時提供過期的內容。X-Cache-Status 標頭有助於你除錯（HIT、MISS 等）。

步驟 3：使用壓縮與 HTTP/2 進行最佳化

快取能減少請求，但你可以透過啟用 gzip 壓縮與 HTTP/2 進一步加速傳輸。

在 nginx.conf 中啟用 gzip：

gzip on;
gzip_types text/css application/javascript image/svg+xml;
gzip_min_length 1000;

HTTP/2 會多工處理請求，只要在 listen 指令中加入 http2 即可啟用：

listen 443 ssl http2;

注意：HTTP/2 需要 HTTPS。如果你還沒設定 TLS，請參閱我們的指南 HTTPS 與 TLS 如何運作。

比較：Cache-Control 指令

指令	含義	建議用於
`public`	回應可被任何快取儲存	靜態資源
`private`	回應僅供單一使用者	使用者專屬資料
`no-cache`	必須向伺服器重新驗證	HTML 頁面
`no-store`	永不快取	敏感資料
`immutable`	內容不會變更	帶版本編號的資源

步驟 4：測試與驗證

套用變更後，重新載入 Nginx：sudo nginx -s reload。接著用 curl 測試：

curl -I https://example.com/style.css

查看 Cache-Control 和 Expires 標頭。你也可以使用瀏覽器 DevTools（Network 分頁）來查看資源是否從快取提供（狀態 200 或 304）。

至於伺服器端快取，請監控 X-Cache-Status 標頭。

常見陷阱與最佳實務

不要快取 HTML：HTML 應該是動態的，或設定較短的快取時間以反映更新。
使用版本編號：在檔名後附加雜湊值，以便在內容變更時破壞快取。
設定適當的 max-age：對於帶版本編號的資源，一年是安全的。
監控快取大小：伺服器端快取可能會增長；請設定 max_size 和 inactive。
考慮使用 CDN：對於全球受眾，CDN 可以將資源快取在更接近使用者的位置。

常見問題

我要如何知道我的資源是否被快取了？

使用 curl -I 或瀏覽器 DevTools 檢查回應標頭。查看 Cache-Control: public, max-age=31536000 和 Expires 標頭。在 DevTools 中，Size 欄位會對已快取的資源顯示「(from disk cache)」。

`expires` 和 `Cache-Control` 有什麼不同？

expires 設定的是絕對日期，而 Cache-Control 使用的是相對秒數。在現代瀏覽器中，Cache-Control 的優先順序較高。Nginx 的 expires 指令會同時設定兩者以確保相容性。

我可以快取動態內容嗎？

可以，但要謹慎。使用 proxy_cache 並搭配較短的 TTL，並考慮以 cookie 或標頭為基礎的快取鍵。對於使用者專屬的內容，請使用 private 或避免快取。

使用 TryQuickToolBox 加速你的工作流程

在最佳化網站效能的同時，你可能需要壓縮圖片或 PDF。試試我們的圖片壓縮工具，在不損失品質的情況下縮小圖片大小，為你的 Nginx 快取策略加分。