運用有效的快取政策提供靜態資產

HTTP 快取可以縮短使用者回訪時的網頁載入時間。

當瀏覽器要求資源時，提供資源的伺服器可以告知瀏覽器應暫時儲存或快取資源的時間長度。針對該資源的任何後續要求，瀏覽器會使用其本機副本，而不會從網路取得。

Lighthouse 快取政策稽核失敗原因

Lighthouse 會標記所有未快取的靜態資源：

Lighthouse 提供靜態資產，進行有效的快取政策稽核的螢幕截圖

如果符合下列所有條件，Lighthouse 就會將資源視為可快取的資源：

  • 資源可以是字型、圖片、媒體檔案、指令碼或樣式表。
  • 資源有 200、203 或 206 HTTP 狀態碼。
  • 資源沒有明確的非快取政策。

當頁面未通過稽核時，Lighthouse 會在資料表中以三個資料欄列出結果：

網址 可快取資源的位置
快取存留時間 資源目前的快取持續時間
傳輸大小 如果遭標記的資源已快取，使用者將儲存的預估資料

如何使用 HTTP 快取功能快取靜態資源

設定伺服器以傳回 Cache-Control HTTP 回應標頭：

Cache-Control: max-age=31536000

max-age 指令會指示瀏覽器快取資源的時間長度 (以秒為單位)。這個範例將時間長度設為 31536000，對應的是 1 年：60 秒 × 60 分鐘 × 24 小時 × 365 天 = 31536000 秒。

您應快取不可變的靜態資產長時間，例如一年或更長時間。

如果資源會變動和更新間隔很重要，但您仍希望享有快取的速度優勢，請使用 no-cache。瀏覽器仍會快取設為 no-cache 的資源，但會先透過伺服器檢查，確認資源是否仍為最新狀態。

快取持續時間愈長不一定更好。最後，您可以自行決定資源適用的快取持續時間。

您可以透過許多指令來自訂瀏覽器快取不同資源的方式。如要進一步瞭解如何快取資源，請參閱「HTTP 快取：第一行防禦指南」和「設定 HTTP 快取行為程式碼研究室」。

如何在 Chrome 開發人員工具中驗證快取回應

如要查看瀏覽器從快取中取得的資源，請開啟 Chrome 開發人員工具中的「網路」分頁：

[comment]: <> (以下清單是 web.dev 上的簡碼，但並非從英文翻譯成英文)。1. 按下 Control+Shift+J (或在 Mac 上按下 Command+Option+J) 開啟開發人員工具。2. 按一下「網路」分頁標籤。

Chrome 開發人員工具中的「Size」欄可協助您驗證資源是否已快取：

「大小」欄。

Chrome 會從記憶體快取提供最常要求的資源，雖然速度非常快，但會在瀏覽器關閉後清除。

如要確認資源的 Cache-Control 標頭是否如預期設定，請檢查其 HTTP 標頭資料：

  1. 在「要求」表格的「名稱」欄下方，按一下要求網址。
  2. 按一下「標頭」分頁標籤。
透過「標頭」分頁檢查 Cache-Control 標頭
透過「Headers」分頁檢查 Cache-Control 標頭。

堆疊專屬指南

Drupal

在「Administration」 >「Configuration」 >「Development」頁面設定「Browser and Proxy cache max age」。請參閱「Drupal 效能資源」。

Joomla

請參閱「快取」。

WordPress

請參閱瀏覽器快取。

資源