使用瀏覽器緩存介紹

文章轉自:PageSpeed Insights

當PageSpeed Insights檢測到您的服務器響應不包含明確的緩存標頭或某些資源被指定只緩存一小段時間時,就會觸發此規則。

概覽

如果用戶會多次訪問您的網站,那麼靜態資源的瀏覽器緩存可以節省用戶的時間。緩存標頭應當應用到所有可緩存的靜態資源中,而不僅僅是應用到一小部分靜態資源(例如,圖片)中。可緩存的資源包括JS和CSS文件、圖像文件及其他二進制對象文件(媒體文件和PDF文件等)。通常情況下,HTML不是靜態資源,默認情況下不應被視爲可緩存資源。您應考慮哪些緩存政策適用於您網站的HTML。

建議

爲您的服務器啓用瀏覽器緩存。靜態資源應該至少有一週的緩存有效期。廣告或小部件這類的第三方資源也應該至少有一天的緩存有效期。對於所有可緩存資源,我們建議您進行以下設置:

將Expires設爲將來日期,至少爲一週,最多爲一年(我們傾向於設置Expires,而不設置Cache-Control: max-age,因爲前者受支持的範圍更爲廣泛)。請勿將其設爲超過一年的將來日期,因爲這樣就違反了RFC準則。
如果您知道資源將具體在何時發生變化,則可以設置較短的過期日期。然而,如果您認爲資源“可能將要發生變化”,但又不知道具體時間,則應設置較長的過期日期,並使用網址指紋(如下所述)。
Expires和Cache-Control: max-age標頭

這些標頭用於指定相應時間段,瀏覽器可在指定的這段時間內使用已緩存的資源,而無需查看網絡服務器是否提供了新版資源。這些緩存標頭功能強大,沒有任何應用條件限制。在設置這些標頭並下載資源後,瀏覽器不會爲資源發出任何GET請求,除非過期日期到期或達到時間最大值,亦或是用戶清除了緩存。

Last-Modifed和ETag標頭

這些標頭可用於指定瀏覽器應如何確定用於緩存的文件是否相同。在Last-Modified標頭中指定的是日期,而在ETag標頭中指定的則可以是唯一標識資源的任意值(通常爲文件版本或內容哈希值)。Last-Modified是功能“較弱”的緩存標頭,因爲瀏覽器會使用試探法來確定是否需要從緩存中抓取內容。

藉助這些標頭,瀏覽器可以通過在用戶明確重新加載頁面時發出條件式GET請求,有效地更新其已緩存資源。除非您在服務器端更改資源,否則條件式GET請求不會返回完整的響應,因此相較於完整GET請求,此類請求的延遲較小。

我應使用哪個緩存標頭?

對於所有可緩存資源,指定一個Expires或Cache-Control max-age以及一個Last-Modified或ETag至關重要。您沒必要同時指定Expires和Cache-Control: max-age;或同時指定Last-Modified和ETag。
使用網址指紋

對於偶爾發生變化的資源,我們可以讓瀏覽器緩存相應的資源,直到該資源在服務器上出現變化,而服務器則在此時通知瀏覽器有新版本可用。我們可以通過爲每個版本的資源指定一個唯一網址來實現這一目的。例如,假定我們有一個名爲“my_stylesheet.css”的資源。我們可以將文件重命名爲“my_stylesheet_fingerprint.css”。當資源發生變化時,其指紋就會發生變化,對應的網址也會隨之更改。網址一經更改,系統就會強制瀏覽器重新抓取資源。通過指紋,我們甚至可以爲變化更爲頻繁的資源設置將來的過期日期。

指紋識別的常用方法是使用對文件內容的哈希值進行編碼的128位十六進制數。

另一個策略是直接爲新版應用創建新版目錄,然後爲版本目錄中的各個版本放置所有資源。這樣做的缺點是,如果各個版本中的資源未發生變化,則其網址將仍會更改以強制重新下載。使用內容哈希值不會遇到該問題,但這種方法稍微複雜一些。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章