使用瀏覽器快取功能

當 PageSpeed Insights 偵測到來自您伺服器的回應不含特定快取標頭,或是資源指定為僅供短時間快取,就會觸發這個規則。

總覽

如果使用者不是第一次造訪您的網站,瀏覽器快取的靜態資源將可為他們節省時間。快取標頭應套用至所有可快取的靜態資源,而非只套用至小型子集 (如圖片)。可快取的資源包括:JS 和 CSS 檔案、圖片檔案及其他二進位物件檔案 (媒體檔案、PDF 等)。一般而言,由於 HTML 不是靜態頁面,所以預設不應視為可快取。您必須思考怎樣的快取政策適合您網站的 HTML。

建議

您可以為伺服器啟用瀏覽器快取功能。靜態資源應至少有一週的快取存留時間,廣告和小工具這類第三方資源則應至少有一天的快取存留時間。無論可快取的資源為何,我們都建議您採用以下設定:

  • Expires 設為至少 1 週,最好可設為長達 1 年 (我們建議使用 Expires 而非 Cache-Control: max-age,因為前者的支援範圍更廣)。請勿設為超過未來 1 年,以免違反 RFC 規定。
  • 如果您明確知道資源即將變更,則可設定較短的有效期限。不過,如果您只知道「可能很快就會變更」,但不知道確切的時間,那麼建議您設定較長的有效期限並使用網址指紋比對 (請見下文)。

Expires 和 Cache-Control: max-age 標頭

這兩個標頭可指定一個時間範圍,允許瀏覽器在此期間直接使用快取資源,無需向網路伺服器確認是否有新版本。兩者都是可無條件套用的「強大快取標頭」。一旦設置這兩個標頭並完成資源下載,瀏覽器就不會對資源發送任何 GET 要求,除非到期日或最長使用期限屆滿,或是使用者清除快取。

Last-Modifed 和 ETag 標頭

這兩個標頭可指示瀏覽器如何判定檔案異同,據此來提供快取檔案。Last-Modified 標頭中指定的值為日期,ETag 標頭中指定的值則可以是用來識別資源的任何非重複值 (一般為檔案版本或內容雜湊)。Last-Modified 是一種「虛弱」的快取標頭,專供瀏覽器嘗試判定是否要從快取擷取項目。

當使用者確定重新載入網頁時,這兩者均可讓瀏覽器發送條件式 GET 要求,藉此有效率地更新快取資源。除非伺服器上的資源變更,不然條件式 GET 不會傳回完整回應,所以相比於完整的 GET,前者的延遲時間更短。

我該使用何種快取標頭?

您必須為所有可快取的資源指定 ExpiresCache-Control max-age 的其中一個標頭,以及 Last-ModifiedETag 的其中一個標頭。然而,同時指定 ExpiresCache-Control: max-age,或是同時指定 Last-ModifiedETag,都是多餘的行為。

使用網址指紋比對

對於不定期變更的資源,我們可以設定瀏覽器在伺服器上的資源變更時才予以快取,屆時伺服器會告訴瀏覽器有新版本。如要這麼做,請為每個資源版本提供一個專屬網址。舉例來說,假設有一個名為「my_stylesheet.css」的資源,我們可以將其重新命名為「my_stylesheet_fingerprint.css」。資源的變更會牽動指紋和網址一起改變,而一旦網址變更,瀏覽器就會自動重新擷取資源。利用網址指紋比對,我們可以將到期日設到很久以後,即使資源更新頻率比較短也無妨。

常見的指紋比對方法,是比對檔案內容雜湊編碼的 128 位元 16 進位數字。

另一種方法則是為每個新的應用程式版本建立新的釋出目錄,把所有資產分別歸入各版目錄中。這種做法的缺點是,即使某個資產在各版間並未變更,該資產的網址仍會隨版本而異,強制瀏覽器重新下載。使用內容雜湊雖然沒有這個問題,但會稍微複雜一點。