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

HTTP 快取可加快重複造訪時的網頁載入時間。

當瀏覽器要求資源時 有資源的伺服器可以告訴瀏覽器 資源暫時儲存或快取資源的時間長度。 針對該資源的任何後續要求 瀏覽器會使用本機副本,而非從網路取得。

Lighthouse 快取政策稽核失敗方式

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

Lighthouse 提供靜態資產,並採用有效率的快取政策稽核功能的螢幕截圖

Lighthouse 認為資源可快取 滿足下列所有條件:

  • 資源為字型、圖片、媒體檔案、指令碼或樣式表。
  • 資源出現 200203206 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 開發人員工具中開啟「Network」分頁。

[註解]:<>(下列清單是 web.dev 提供的簡短碼,但並未從英文翻譯任何語言)。 1. 按下 Control+Shift+J (Mac 上的 Command+Option+J) 開啟開發人員工具。 2. 按一下「網路」分頁標籤。

Chrome 開發人員工具中的「大小」欄可協助您確認資源是否已快取:

「大小」欄。

Chrome 會從記憶體快取提供最常要求的資源 而會在瀏覽器關閉時清除

如要確認資源的 Cache-Control 標頭是否如預期設定, 檢查 HTTP 標頭資料:

  1. 在「要求」表格的「名稱」欄下方,按一下要求的網址。
  2. 按一下「標頭」分頁標籤。
,瞭解如何調查及移除這項存取權。
透過「標頭」分頁檢查 Cache-Control 標頭
透過「Headers」分頁檢查 Cache-Control 標頭。

堆疊專屬指南

Drupal

在「管理」>「瀏覽器和 Proxy 快取使用時間上限」設定 設定 >「開發」頁面。請參閱 Drupal 效能資源

Joomla

請參閱快取

WordPress

請參閱瀏覽器快取

資源