针对重复访问,HTTP 缓存可以缩短网页加载时间。
当浏览器请求资源时 提供资源的服务器可以向浏览器 应临时存储或缓存资源多长时间。 对于对该资源的任何后续请求 浏览器会使用其本地副本,而不是从网络获取。
Lighthouse 缓存政策审核如何失败
灯塔 标记所有未缓存的静态资源:
![Lighthouse 提供静态资源并执行高效的缓存政策审核的屏幕截图](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-long-cache-ttl/image/a-screenshot-the-lightho-d4eb993831c72.png?authuser=7&hl=ro)
Lighthouse 将资源视为可缓存 如果满足以下所有条件:
- 资源是字体、图片、媒体文件、脚本或样式表。
- 资源具有
200
、203
或206
HTTP 状态代码。 - 该资源没有明确的无缓存政策。
如果某个网页未通过审核, Lighthouse 在包含以下三列的表格中列出结果:
网址 | 可缓存资源的位置 |
缓存 TTL | 资源的当前缓存时长 |
传输大小 | 显示标记的资源被缓存后,用户可节省的预估数据量 |
如何使用 HTTP 缓存来缓存静态资源
将您的服务器配置为返回 Cache-Control
HTTP 响应标头:
Cache-Control: max-age=31536000
max-age
指令用于告知浏览器应将资源缓存多长时间(以秒为单位)。
以下示例将时长设置为 31536000
,对应于 1 年:
60 秒 × 60 分钟 × 24 小时 × 365 天 = 31536000 秒。
您应长时间缓存不可变的静态资源, 例如一年或更长时间
如果资源更改且新鲜度很重要,请使用 no-cache
。
但您仍想享受缓存的一些速度优势。
浏览器仍会缓存设置为 no-cache
的资源
但首先需要与服务器进行检查,以确保资源仍然是最新的。
较长的缓存时长并不总是更好。 归根结底 您可以自行决定资源的最佳缓存时长。
有许多指令可用于自定义浏览器缓存不同资源的方式。 如需详细了解如何缓存资源,请参阅 HTTP 缓存:第一道防线指南 和“配置 HTTP 缓存行为”Codelab。
如何在 Chrome 开发者工具中验证缓存的响应
要查看浏览器从缓存中获取了哪些资源 在 Chrome 开发者工具中打开 Network 标签页:
[注释]:<>(以下列表是来自 web.dev 的简码,但未从英语翻译成任何语言。)
1. 按 Control+Shift+J
(在 Mac 上,按 Command+Option+J
)打开开发者工具。
2. 点击网络标签页。
Chrome 开发者工具中的 Size 列可以帮助您验证资源是否已缓存:
![“尺寸”列。](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-long-cache-ttl/image/the-size-column-4c3e86c3d8b8f.png?authuser=7&hl=ro)
Chrome 从内存缓存提供请求最多的资源,速度非常快, 但会在浏览器关闭时清除。
如需验证资源的 Cache-Control
标头是否按预期设置,请执行以下操作:
检查其 HTTP 标头数据:
- 在“Request”表格的 Name 列下,点击相应请求的网址。
- 点击 Headers 标签页。
![通过“Headers”(标头)标签页检查 Cache-Control 标头](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-long-cache-ttl/image/inspecting-cache-control-881e2975bf9d3.png?authuser=7&hl=ro)
Cache-Control
标头。
针对特定堆栈的指南
Drupal
在管理 > 中设置浏览器和代理缓存的最长存在时间 配置 >开发页面。请参阅 Drupal 性能资源。
Joomla
请参阅缓存。
WordPress
请参阅浏览器缓存。