使用者第二次載入您的網站時,會使用 HTTP 快取,因此請確認 但事實上
此貼文是「愛你的快取」影片,合稱為 Extended 部分的內容 2020 年 Chrome 開發人員高峰會內容。請務必觀看下列影片:
使用者第二次載入您的網站時,瀏覽器會使用內部的資源 HTTP 快取將能加快載入速度不過,針對伺服器內部的快取標準 它可追溯至 1999 年,但定義相當廣泛 不論檔案是否可從網路再次擷取 (例如 CSS 或圖片) 事實上,從快取載入到快取資料 其實有點不明確
在這篇文章中,我會介紹一個合理的現代快取預設值, 實際上「完全沒有快取」這是預設設定 當然,這不只是「把它關掉」以外,快繼續往下閱讀吧!
目標
網站首次載入時,您有兩個目標:
- 請確保使用者取得的是最新版本 所做的修改應該很快就會生效
- #1 在盡量不從網路擷取時進行
原則上,我們只需要傳送最小幅度的修改給客戶。 再次載入您的網站時調整網站架構,確保 任何變更都有效分散 (稍後會更難有效分配) 影片)。
話雖如此,您在考慮使用快取時 您決定讓使用者的瀏覽器 HTTP 快取 長期保留在您的網站上 這樣就完全不需要網路請求了或是 建構了一個服務工作處理程序,將服務網站完全離線, 請檢查是否符合最新資訊這是非常重要的選項,而且是有效且 ,但網路不一定需要 在極度快取時使用,或甚至完全只使用網路。
背景
身為網頁程式開發人員,我們都很習慣擁有「快取過時」的概念。 但我們都知道,市面上有許多工具來解決這類問題,那就是 重新整理」,或是開啟無痕式視窗,或同時使用瀏覽器的 可用於清除網站資料的開發人員工具
網路上的一般使用者沒有如此奢華,雖然我們 有一些核心目標 是確保使用者在第 2 步 以及確保不會出現錯誤時間 因而停滯不前(如果想聽聽看我們的建議?請觀看這部影片 幾乎導致 web.dev/live 網站卡住了!)
在背景略做調整,這是「快取過時」的常見原因其實是
1999 年的快取預設值需要使用 Last-Modified
標頭:
![這張圖表顯示使用者瀏覽器快取不同素材資源的時間長度](https://web.developers.google.cn/static/articles/love-your-cache/image/diagram-showing-long-dif-a47f17d0a910d.png?authuser=19&hl=zh-tw)
您載入的每個檔案都會在目前生命週期內保留 10%,
您的瀏覽器就能看到該資訊舉例來說,如果 index.html
是在一個月前建立,
快取會保留大約三天的時間
回顧這一天是出於意志願景的計畫,但考量到 這項預設行為代表現今網站 則是指使用者擁有專為不同版本設計的檔案 擷取到你的網站 (例如週二發布的 JS 和週五的 CSS 版本),因為這些檔案沒有同時更新。
光線充足的路徑
目前系統完全不需快取任何快取資料, CDN 可讓您將內容關閉 讓使用者享有低延遲和高可用性每次使用者載入您的網站時,就會前往網路 確認資料是否為最新版本這個要求的延遲時間較短 提供的解決方案。
您可以設定網站主機使用這個標頭回應網路要求:
Cache-Control: max-age=0,must-revalidate,public
基本上:檔案隨時都有效,你必須完成驗證 才能再次使用 (反之 「建議」)。
以傳輸的位元組數來看,這項驗證程序相對便宜 大型圖片檔尚未變更,您的瀏覽器會收到小尺寸的 304 錯誤 但由於使用者仍須前往網路尋找,因此會產生延遲的費用 。這是這個方法的主要缺點。成效非常好 最快連線速度的使用者,選用 CDN 但很多人使用行動裝置速度較慢的人 連線或使用不善的基礎架構
無論如何,這種新型做法 是熱門 CDN 預設 CDN 但幾乎在所有 CDN 都能設定如果是 Firebase 託管,您可以在 這個標題 專區 的依附元件清單:
"headers": [
// Be sure to put this last, to not override other headers
{
"source": "**",
"headers": [ {
"key": "Cache-Control",
"value": "max-age=0,must-revalidate,public"
}
}
]
因此,雖然我仍建議將這個選項設為合理預設值,但它只是這個預設位置! 請繼續閱讀,瞭解如何升級預設設定。
加上指紋的網址
在素材資源、圖片等項目的名稱中加入檔案內容的雜湊值
可確保這些檔案隨時具有專屬性
內容—這會產生名為 sitecode.af12de.js
的檔案。時間
您的伺服器會回應這些檔案
使用者的瀏覽器
標題:
Cache-Control: max-age=31536000,immutable
這個值為年 (以秒為單位)。根據規格 等於「永久」
重要的是,請勿手動產生這些雜湊,因為這需要太多人工作業!個人中心 可以利用 Webpack、Rollup 等工具協助測試。請務必 進一步瞭解工具報表。
請記住,不僅 JavaScript 以外,還能受益於加上數位指紋採集的網址。 圖示、CSS 以及其他不可變動的資料檔案 。(請務必觀看上方影片,進一步瞭解程式碼 分割,這樣每當網站變更時,就可以減少傳送的程式碼)。
無論網站採用快取的方式為何,這類指紋 是任何您建立網站不可或缺的好幫手大部分網站 不會每次發布版本變更
當然,我們無法以下列方式重新命名「友善」且面向使用者的網頁:重新命名
將 index.html
檔案寫入 index.abcd12.html
,這是不可行的
每次載入您的網站時,使用者都會前往新網址!這些「友善」網址
無法以這種方式重新命名和快取,這會導致我前往可能的中段
中間地面
在快取方面,中間有明顯的空間。我 呈現了兩個極端選項快取「永不」或「永遠」快取。另一個重點是 您會需要一段時間快取的多個檔案,例如 「友善」我剛才提到的網址
如果你想要快取這些「友善」的快取檔案網址和 HTML 程式碼 考量項目包含哪些依附元件、如何快取這些,以及如何 快取網址可能對您造成影響。假設 HTML 網頁 包含類似下方的圖片:
<img src="/images/foo.jpeg" loading="lazy" />
如果你透過刪除或變更延遲載入的方式更新或變更網站
圖片顯示,使用者查看 HTML 快取版本時,可能會顯示不正確或
缺少圖片 — 因為這些檔案仍會快取原始的 /images/foo.jpeg
回訪您的網站
如果您謹慎了,這可能不會影響您。不過基本上 別忘了,使用者快取您的網站時, 不再只是 伺服器相反地,這個物件可能存在於使用者快取的「片段」中 。
一般而言,大多數與快取相關的指南都會討論 設定—您對 1 小時、數小時等時間執行快取。如要設定 快取種類時,請使用這種標頭 (快取 3600 秒或 小時):
Cache-Control: max-age=3600,immutable,public
最後一點。如果您製作的內容通常只有 例如新聞報導之類的 快取,建議您使用上方合理的預設值。我們經常 過度強調快取的價值,而非使用者希望隨時看到最新 ,例如新聞報導的重要更新 活動。
非 HTML 選項
除了 HTML 之外,還有一些其他方式可用於處理中間地的檔案 包括:
一般來說,請找出不影響他人的素材資源
- 舉例來說,請避免使用 CSS,因為這會影響 HTML 算繪
在即時文章中使用的大型圖片
- 使用者或許不再瀏覽任何一篇文章 請避免快取相片或主頁橫幅 廢棄物儲藏
代表本身有效期的資產
- 天氣的 JSON 資料可能每小時發布一次,因此 您可以在一小時內快取先前的結果,這項結果不會在視窗中改變
- 開放原始碼專案的建構作業可能受到頻率限制,因此請快取 狀態可能會變更
摘要
當使用者第二次載入您的網站,您就已經進行了 並更願意回來觀看更多產品或服務。在此 原因不僅限於縮短載入時間 各式各樣的選項 可確保瀏覽器正常運作 還必須提供快速且最新的體驗
快取不是網路上的新概念,但可能需要 預設—考慮使用一種並強力啟用,以獲得更好的快取策略 適時提供所需協助感謝您閱讀本信!
另請參閱
如需 HTTP 快取的一般指南,請前往 使用 HTTP 快取防止不必要的網路要求。