HTTP 快取可加快重複造訪時的網頁載入時間。
當瀏覽器要求資源時 有資源的伺服器可以告訴瀏覽器 資源暫時儲存或快取資源的時間長度。 針對該資源的任何後續要求 瀏覽器會使用本機副本,而非從網路取得。
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 開發人員工具中開啟「Network」分頁。
[註解]:<>(下列清單是 web.dev 提供的簡短碼,但並未從英文翻譯任何語言)。
1. 按下 Control+Shift+J
(Mac 上的 Command+Option+J
) 開啟開發人員工具。
2. 按一下「網路」分頁標籤。
Chrome 開發人員工具中的「大小」欄可協助您確認資源是否已快取:
Chrome 會從記憶體快取提供最常要求的資源 而會在瀏覽器關閉時清除
如要確認資源的 Cache-Control
標頭是否如預期設定,
檢查 HTTP 標頭資料:
- 在「要求」表格的「名稱」欄下方,按一下要求的網址。
- 按一下「標頭」分頁標籤。
堆疊專屬指南
Drupal
在「管理」>「瀏覽器和 Proxy 快取使用時間上限」設定 設定 >「開發」頁面。請參閱 Drupal 效能資源。
Joomla
請參閱快取。
WordPress
請參閱瀏覽器快取。