如何使用高效的缓存策略为静态资产提供服务

GTMetrix和Google PageSpeed Insights等网站提供有关如何提高网站性能的建议。 如果您正在阅读本文，您至少会意识到每个网站都有机会通过手动优化或使用 10Web Booster 等插件来提高性能。

在这两个工具中，您可能会看到建议使用有效的缓存策略来提供静态资产。 此建议是将文件存储在本地，以便更快地重复访问该站点。 改进此建议的步骤不会改进初始站点访问（还有其他改进）。 尽管如此，所有后续访问都将受益于利用浏览器缓存。

应该注意的是，使用高效缓存策略提供静态资产的建议也被称为利用浏览器缓存或 WordPress 中的浏览器缓存。

本文解释了如何使用高效的缓存策略为静态资产提供服务，以及高效的缓存策略如何提高您网站的性能。

使用 GTMetrix 时，结果页面上的建议将类似于下面的示例。 它将突出显示实施浏览器缓存可能带来的节省。

在 Google PageSpeed Insights 中，建议看起来很相似并提供了相似的信息。

这些建议是相似的，因为 GTMetrix 和 PageSpeed Insights 使用Lighthouse工具作为他们的网页分析框架。 Lighthouse是一个开源工具，旨在提高网站性能，可以以多种不同的格式运行。

让我们花点时间快速回顾一下，提醒自己网站的性能是如何通过一系列指标来衡量的，其中最重要的是核心网络生命力。

这是一个摘要：

• Largest Contentful Paint ( LCP ) – 衡量最大对象加载到页面视口中所需的时间。
• First Input Delay ( FID ) – 这衡量网站的响应能力。 它衡量用户点击网站或与网站互动与网站响应之间的时间。
• Cumulative Layout Shift ( CLS ) – 衡量页面布局意外移动的程度。

对 LCP 和 FID 产生积极影响的一种方法是使用高效的缓存策略为静态资产提供服务，这意味着让浏览器知道它可以在本地存储资源一段时间。

高效的缓存策略将意味着更快的加载时间，因为无论您的网速有多快，从本地缓存加载都将更快并节省时间。

有几个组件，所以让我们更详细地讨论它们。

如何使用高效的缓存策略为静态资产提供服务

要了解如何使用高效的缓存策略为静态资产提供服务，我们首先需要了解不同的方面，例如静态资产、缓存和缓存策略。 让我们在这里分解它们。

什么是静态资产？

静态资产是文件。 当我们在本文中提到静态资产时，我们指的是预计不会很快或经常更改的单个文件。

图像、javascript、CSS 文件和字体等文件都可以被视为静态资产。 对于 WordPress，这些 CSS、javascript 以及图像和字体文件通常是主题、插件或用户内容的一部分。

动态生成的文件和页面不被视为静态资产。 WordPress 中的一个例子是缓存插件生成的静态页面。 这将在下一节中详细说明。

什么是缓存？

缓存是将答案存储在缓存中的过程，以便下次提出相同问题时，可以更快地返回答案。

相关文章

如何安全有效地清除 WordPress 缓存？

通过我们的前 5 名选择找到最好的 WordPress 缓存插件

如果您以前使用过 WordPress 缓存插件，您可能对整页缓存很熟悉。 页面缓存不同于静态资产缓存。

页面缓存与静态资产缓存

本文着眼于专门的静态资产（文件）缓存。 这不应与全页缓存相混淆，全页缓存存储生成的页面供以后使用。

页面缓存和文件缓存都有助于提高站点的性能。 在讨论静态资产缓存时，我们指的是特定资产，例如 javascript、CSS 和图像文件。

页面缓存存储 WordPress 动态生成的页面的结果，并在特定时间内重新提供该版本。 页面缓存通常存储在服务器或边缘网络（如 CDN）上，而静态资产则存储在用户机器本地。

缓存关于我们如何使用有效的缓存策略为静态资产提供服务意味着告诉浏览器它可以在浏览器本地存储资源多长时间，然后才能重新下载它。

什么使静态资产可缓存？

根据 GTMetrix 的说法，如果资产满足以下要求，则它是可缓存的：

• 它是字体、CSS、javascript 或媒体文件。
• 它返回 200、203 或 206 HTTP 状态代码
• 它没有明确的无缓存策略

什么是缓存策略？

我们已经了解了什么是静态资产以及缓存资产的含义。

术语新鲜度和陈旧度可以在这里用来描述缓存文件的状态。 如果可以从缓存中提取文件，则可以将其称为fresh 。 当它过期时，它会被称为stale 。

政策将回答诸如文件被视为新鲜的时间以及如何检查文件是否新鲜等问题。 该政策规定我们只需要在特定时间后检查服务器，或者让我们知道在每次请求时检查服务器，但只有在文件发生变化时才重新下载文件。

在我们进一步进行之前，还有一些术语有助于理解。

缓存策略如何影响 UX 和 SEO？

用户体验 (UX) 和搜索引擎优化 (SEO) 紧密相关。 根据谷歌的说法，研究表明用户关心网站的响应速度，因此谷歌将响应速度更快的页面排名更高。

如果有效地缓存静态资产，由于加载这些资产所需的时间减少，页面将呈现得更快。 时间的减少导致核心网络生命力（例如 LCP 和 FID）的改进，并最终导致更高的搜索引擎排名。

您可以在此处阅读有关核心网络生命力如何影响页面排名的更多信息。

如何使用有效的缓存策略问题修复服务静态资产

手动修复

使用高效缓存策略提供静态资产不是 WordPress 特定的设置，您可以通过修改网络服务器配置文件或使用 10Web Booster 托管等插件来手动设置它，以确保您的站点配置了优化的缓存设置。

本节将介绍直接编辑 Web 服务器的配置文件以在服务器上启用缓存控制和过期 HTTP 标头，以便在它提供静态资产时在响应中应用 HTTP 标头。

当请求资源时，Web 服务器会在所谓的 HTTP 标头中响应资源和一些额外信息。 将 HTTP 标头视为有关连接的元数据。 在缓存的情况下，HTTP 标头Cache-Control和Expires控制我们如何缓存资产。

缓存控制标头包含有关是否和/或如何缓存静态资产的说明。 缓存控制有很多指令，所以让我们了解一些最流行的指令。

以下是缓存控制标头的一些示例。

示例：将资产缓存 7 天
Cache-Control: max-age=604800

示例：最多可在共享缓存中存储 7 天
Cache-Control: public, max-age=604800

示例：可以存储，但必须在每次请求时重新验证
Cache-Control: no-cache

示例：无法缓存
Cache-Control: no-store

cache-control header 较新并且有更多选项，但在不支持 cache-control 的情况下，expires HTTP header 完成相同的 header 任务并指示资产在需要重新验证之前有效多长时间。 （请注意，Cache-Control 标头中的 max-age 指令优先于 Expires）
Expires: Wed Feb 13 21:01:38 CST 2023

直接修改服务器配置

首先，让我们看看“艰难的方式”，以便我们了解当我们使用其他工具和服务时会发生什么，这些工具和服务使我们更容易。

阿帕奇

在 Apache HTTP 服务器中，可以将以下代码片段添加到站点定义或 .htaccess 文件中。

在解释这个片段时，它说扩展名与 .ico 或 .pdf 等匹配的任何资产都将为该资产设置 Cache-Control 标头。

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=3600, public"
</filesMatch>

对于 Apache，许多托管服务提供商将为您提供向 .htaccess 文件添加指令的选项。 请注意，虽然这是添加到服务器配置的一种简单方法，但已知使用 .htaccess 文件会在服务器级别产生负面性能影响。

Nginx

在 Nginx 中，可以将此片段添加到服务器块。

在解释这个片段时，它说任何扩展名与 .ico 或 .pdf 等匹配的资产都将同时设置过期和缓存控制标头。

location ~* \.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$ {
    expires 1h;
    add_header Cache-Control "public, no-transform";
}

对于 Apache 和 Nginx，我们展示了如何修改/添加标头。 我们展示了用于缓存的特定标头，但该方法可用于任何其他形式的缓存。

使用 WordPress 插件修复

如果以上感觉很多，那是因为它确实如此。 修改服务器配置并及时更新手动更改既费时又容易出错。

10Web Booster 免费计划可以配置 Apache 为静态资产添加标头，它还为缓存的网页添加标头。 如果您还没有使用 10Web 托管并且您的主机使用 Apache，这是开始实施高效缓存策略的好方法。

如果您需要更多选项或对 HTTP 标头的更多控制，您可以使用 10Web Booster Pro。 10Web Booster Pro 利用其 Cloudflare。 当您使用 Cloudflare 时，它​​会将缓存控制标头添加到您的静态资产和缓存页面。 这绕过了任何服务器配置或限制，因为您的访问者直接从 Cloudflare 获得文件。

使 10Web Booster 插件成为此处最佳选择的原因是它可以自动完成所有这些工作。 您不需要管理任何服务器配置或 .htaccess 文件。

或者，如果您使用 10Web Hosting，它会自动实现缓存，您无需担心为静态资产添加标头。

仍然无法解决问题？ 试试这两个技巧

如果您已实施上述步骤，并且您仍然看到具有高效缓存策略的服务静态资产仍显示在您的报告中，那么您可以尝试以下几种方法。

验证文件是否已缓存

如果 GTMetrix 和 PageSpeed 仍然报告您应该使用缓存策略提供静态资产，您可能需要验证您的实现是否确实进行了预期的更改。

在大多数浏览器中，有一种简单的方法可以验证文件是否来自缓存。

在 Chrome 中，在视图和开发人员下，选择开发人员工具：

在“网络”选项卡下，您将能够识别来自（磁盘缓存）或（内存缓存）的文件。 磁盘缓存和内存缓存的区别是内存在浏览器关闭时消失，而磁盘在浏览器关闭时仍然存在。

增加缓存时间

根据 Lighthouse 的统计数据，高效的缓存策略是缓存命中率与未命中率高的策略，这意味着大多数静态资产都设置了 max-age 或 expires。 对于正在生产或不经常更改的站点，建议最长使用期限为三个月甚至一年。

他们建议开始一个大约三个月（大约 7890000 秒）的策略，如果您已经设置了这个，那么如果您的网站是实时的，那么将 max-age 增加到一年或更长时间可能是值得的。

结论

能够使用高效的缓存策略为静态资产提供服务可以提高网站性能的速度。

本文介绍了什么是静态资产、什么是 HTTP 标头，并研究了如何启用和验证缓存标头是否就位。

我们研究了通过修改服务器配置手动启用标头的具体细节，以及我们如何使用 10Web Booster 等 WordPress 插件使其更容易，并利用 10Web 与 Cloudflare 的集成来访问设置缓存控制 HTTP 标头。

10Web Booster 不仅仅是一个缓存插件。 您可以在这篇10Web Booster 文章中阅读更多关于许多缓存和速度优化功能的信息。

常问问题