采用高效的缓存政策提供静态资源

HTTP 缓存可以缩短重复访问的网页加载时间。

当浏览器请求资源时，提供资源的服务器可以告知浏览器应该临时存储或缓存该资源多长时间。对于针对该资源的任何后续请求，浏览器将使用其本地副本，而不是从网络获取。

Lighthouse 缓存政策审核如何失败

Lighthouse 会标记所有未缓存的静态资源：

Lighthouse 通过高效的缓存政策审核提供静态资源的屏幕截图

如果满足以下所有条件，则 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 开发者工具中打开网络标签页：

[comment]: <>（以下列表是 web.dev 中的短代码，并没有从任何语言翻译成英语。） 1. 按 Control+Shift+J（在 Mac 上，按 Command+Option+J）以打开开发者工具。 2. 点击 Network 标签页。

Chrome 开发者工具中的 Size 列可帮助您验证资源是否已缓存：

“尺寸”列。

Chrome 从内存缓存中传送请求次数最多的资源，速度非常快，但在浏览器关闭时会被清除。

如需验证资源的 Cache-Control 标头是否已按预期设置，请检查其 HTTP 标头数据：

  1. 在“请求”表格的名称列下，点击请求的网址。
  2. 点击 Headers 标签页。
通过“Headers”（标头）标签检查 Cache-Control 标头
通过 Headers 标签页检查 Cache-Control 标头。

针对特定堆栈的指南

Drupal

在管理 > 配置 > 开发页面中，设置浏览器和代理缓存最长存在时间。请参阅 Drupal 性能资源。

Joomla

请参阅缓存。

WordPress

请参阅浏览器缓存。

资源