如何在 WordPress 上使用高效缓存策略提供静态资源

用户友好网站的标志之一是它不会让访问者在加载时等待太久。 缓存静态资产是提高站点性能的关键步骤，但简单地设置它并继续前进并没有多大帮助。 如果没有有效的 WordPress 缓存策略，您可能难以提供快速加载时间。

幸运的是，学习如何在 WordPress 上利用浏览器缓存比您想象的要容易。 您可以手动配置浏览器缓存，内容管理系统 (CMS) 还使您能够使用为您完成此操作的工具。

在本文中，我们将解释浏览器缓存的工作原理并讨论它的好处。 我们还将向您展示如何检查您的站点是否启用了缓存，以及如何启用缓存。

什么是浏览器缓存？

浏览器缓存是一个在您的计算机上保存网站元素副本的过程。 当您访问网站时，您的浏览器会下载不同的内容，例如图像和文本。 您的浏览器不会在您每次访问该站点时都下载此内容，而是“缓存”或存储其中的一些内容以备日后需要。

下次您访问该站点时，您的浏览器将检查本地存储了哪些元素。 然后它将从缓存中加载这些元素，而不是从站点的服务器请求它们。 这可以使页面加载速度显着加快，具体取决于缓存中存储的资产数量。

如果您现在必须检查浏览器的缓存，您可能会在其中找到几百兆字节的文件。 如果您进入隐私设置，大多数现代浏览器都能让您看到缓存文件的概览。

关于缓存的事情是浏览器不能决定自己做。 要在 WordPress 中利用浏览器缓存，您需要配置您的网站或服务器来执行此操作。 这意味着您的站点控制浏览器缓存哪些资产以及缓存多长时间。

缓存静态资产有什么好处？

浏览器缓存的主要好处是它可以帮助访问者在返回您的站点时更快地加载页面。 我们谈论“静态资产”是因为不可能缓存网站上的每个元素。

动态资产是每次加载页面时都会发生变化的元素。 例如，如果您登录到一个实时显示帖子提要的应用程序，如 Twitter 或 Instagram，那么这些资产是动态的。

由于动态资产可能会经常更改，因此缓存它们可能没有任何用处。 毕竟，下次登录 Twitter 或 Instagram 时，您会看到全新的帖子。

缓存仅限于静态资产时可提供最佳结果。 学习如何在 WordPress 中使用有效的缓存策略来提供静态资产有几个好处：

• 减少带宽使用。 由于缓存资产是从本地存储加载的，因此在服务器和访问者设备之间传输的数据较少。 这有助于互联网计划有限的访问者节省数据使用量。
• 减少服务器上的负载。 当浏览器使用缓存资产时，服务器收到的对这些文件的请求较少。 这减少了服务器的工作量，并有助于防止服务器在高流量期间过载。
• 启用部分离线浏览。 在某些情况下，缓存静态资产可以使访问者即使在离线时也能访问网站的某些部分。 如果浏览器之前已经缓存了必要的文件，它可以在不需要活动的互联网连接的情况下显示内容。

缓存静态资产使您能够更好地利用服务器资源并改善访问者的体验。 所有这些都是通过指示您的服务器告诉浏览器缓存哪些资产来实现的。

如何检查您的站点是否启用了浏览器缓存

检查网站是否利用缓存的最简单方法是使用浏览器开发人员工具，例如您在 Firefox 和 Google Chrome 中找到的工具。 这种方法要求您查看一些代码，但您无需成为开发人员也能理解它。

要在 Google Chrome 中执行此操作，请访问您要检查的网站，右键单击页面上的任意位置，然后选择“检查”选项。 这将在浏览器中打开开发人员工具选项卡，它应该如下所示：

单击“网络”选项卡。 如果您看到一个空列表，则需要在打开开发人员工具选项卡的情况下重新加载页面。 网络选项卡将显示浏览器在访问页面时加载的所有请求和资产。

我们感兴趣的元素应该是列表中的第一个。 在我们的例子中，它是Jetpack.com，它包含页面的标题。 选择该文件，它将在右侧打开一个新选项卡，直接跳转到标题部分。

一些标头会告诉我们该站点是否使用缓存以及它是如何实现的。 这些都是：

• 缓存控制。 此标头指定缓存指令，如 max-age（资源被视为新鲜的最长时间）或 no-cache（强制缓存在释放缓存副本之前将请求提交给源服务器进行验证）。
• 到期。 此标头提供资源的到期日期和时间。 在此之后，资源被认为是陈旧的，浏览器将重新验证它。
• 标签。 此标头是特定版本资源的标识符。 当资源发生变化时，ETag 也会发生变化，从而允许浏览器确定缓存的资源是否仍然有效。
• 上一次更改。 此标头指示资源的最后修改日期。 浏览器可以使用此信息来验证其缓存版本是否仍然是最新的。

如果您可以在文件中找到这些标头，则该网站使用了缓存。 请记住，特定的缓存配置可能因站点而异。 有些站点可能会告诉浏览器将静态文件存储一天，而其他站点会告诉浏览器将文件存储几个月或更长时间。

如何通过插件利用浏览器缓存

在 WordPress 站点上利用浏览器缓存的最简单方法是使用插件。 您可以使用很多缓存插件。 一个不错的选择是 WP Super Cache。

在站点上安装并激活 WP Super Cache 后，您可以使用多种方法实施缓存。 最简单的方法是转到设置 → WP Super Cache并选择Caching旁边的Caching On选项。

该插件的默认设置为注销的访问者启用缓存，并为存储的资产设置 30 分钟的生命周期。 如果您想更改这些设置，则需要进入“高级”选项卡。

在这里，您可以决定为哪些访问者启用缓存、是否启用动态缓存、插件是否应在您更新页面时清除缓存等等。 该插件通过推荐最有效的选项来帮助您。

如果您没有牢牢掌握缓存，您可能希望坚持使用默认设置。 在不完全了解缓存设置工作原理的情况下配置缓存设置可能会导致您的网站出现问题。

如何在没有插件的情况下利用浏览器缓存

如果您不想使用插件，您可以在您的网站上手动启用浏览器缓存。 此过程可能涉及在服务器或站点级别处理代码，具体取决于您选择的实施方法。

1. 在 NGINX 中添加“Cache-Control”和“Expires”标头

要在 NGINX 中添加“Cache-Control”和“Expires”标头，您需要修改服务器配置文件。 该文件通常称为nginx.conf，位于nginx主目录中。

连接到站点服务器的最简单方法是使用文件传输协议 (FTP) 客户端。 然后，您需要找到nginx.conf文件，该文件应位于

/etc/nginx/nginx.conf或/etc/nginx/sites-available/default 。  

使用文本编辑器打开文件并在nginx.conf中查找服务器代码块。 在这里，我们将添加以下新代码块，它指定服务器应告诉浏览器缓存哪些文件以及该缓存在过期前应持续多长时间：

 location ~* \.(jpg|jpeg|png|gif)$ {    expires 30d;    add_header Cache-Control "public, no-transform"; }

此代码包括“Cache-Control”和“Expires”标头。 您可以修改过期时间范围和浏览器应缓存的文件类型。

如果您无法决定要缓存哪些类型的文件，请查看您的 WordPress 媒体文件夹中的内容。 应缓存访问者经常访问的任何静态文件。 至于到期标题，对于大多数网站来说，30 天通常是一个很好的时间范围。

添加代码后，将更改保存到文件并退出编辑器。 您需要重新启动 NGINX 才能应用更改。

2. 在 Apache 中添加“Cache-Control”和“Expires”标头

在 Apache 中使用“Cache-Control”和“Expires”标头需要您启用它们相应的模块。 您可以通过打开终端并运行以下命令来启用这些模块：

 sudo a2enmod expires sudo a2enmod headers sudo systemctl restart apache2

最后的命令将在两个模块都处于活动状态的情况下重新启动 Apache。 接下来，您需要修改 Apache 配置文件，该文件通常称为httpd.conf或apache2.conf 。

您可以在/etc/httpd/conf/httpd.conf 、 /etc/apache2/apache2.conf或

/etc/apache2/sites-available/000-default.conf ，具体取决于服务器配置。

然后，在 Apache 配置文件中查找<Directory>块并在其中添加以下代码：

 <IfModule mod_expires.c>    ExpiresActive On    ExpiresDefault "access plus 1 month"    ExpiresByType image/jpg "access plus 1 month"    ExpiresByType image/jpeg "access plus 1 month"    ExpiresByType image/gif "access plus 1 month"    ExpiresByType image/png "access plus 1 month" </IfModule> <IfModule mod_headers.c>    <FilesMatch "\.(jpg|jpeg|png|gif)$">        Header set Cache-Control "public, no-transform"    </FilesMatch> </IfModule>

该代码的第一部分管理缓存文件的过期设置。 第二部分指示浏览器应缓存哪些文件类型。 与 NGINX 一样，您可以根据您希望浏览器存储的文件修改这些设置。

完成后，将更改保存到 Apache 配置文件并关闭它。 您需要重新启动 Apache 以使更改生效。

3. 使用内容分发网络 (CDN)

内容分发网络 (CDN) 是一个服务器网络，可用于在关键区域存储网站的缓存副本。 CDN 往往是付费服务，它们通过从地理位置最接近访问者的服务器提供站点的缓存副本来提供帮助。

这种方法减轻了您自己服务器上的负载。 此外，CDN 往往针对顶级性能进行优化，并且通常分布在全球各地，因此它们可以从最佳位置为每位访问者提供网站服务。

Jetpack CDN 是一个与 WordPress 无缝集成的选项，易于使用且高效。

最重要的是，它是一个免费的CDN，可以存储您网站上的图像和其他类型的静态资产。 安装并激活它后，您可以通过进入 WordPress 仪表板中的Jetpack → 设置来启用 CDN。

然后，找到性能和速度设置并切换启用站点加速器选项。

4. 在本地托管第三方脚本和资产（只要可能）

第三方脚本是来自外部站点的代码、跟踪像素、字体和其他需要加载才能工作的资产等元素。 您从第三方来源加载的脚本和资产越多，该过程所需的时间就越长，这可能会降低您的网站速度。

理想情况下，您应该设法消除您不使用的任何第三方脚本和资产。 或者，您可以在本地服务器上托管代码和资产以减少加载时间。

您可以使用 PageSpeed Insights 识别第三方脚本以及未使用的 JavaScript。 该工具突出了改进站点性能的机会，包括可以从您的页面中删除的未使用代码和第三方脚本的列表。

您可以安全地删除您网站上任何未使用的第三方脚本。 对于重要的脚本，您可能需要考虑在本地托管它们的选项。

最后一步：安装免费插件以改进 Core Web Vitals

学习如何在 WordPress 中利用浏览器缓存是提高站点性能的关键步骤。 幸运的是，这并不是改善用户体验的唯一方法。

Google 使用一组称为 Core Web Vitals 的指标来衡量网站用户体验的质量。 关键绩效指标包括：

• Largest Contentful Paint (LCP)。 该指标衡量在页面上加载最大资产所需的时间。 通常，它可以很好地指示页面的整体加载时间。
• 第一输入延迟 (FID)。 加载页面和它变得交互之间存在延迟。 您可能认为页面已完成加载，但如果它不能让您与表单或链接等元素进行交互，则它可能具有较高的 FID。
• 累积布局偏移 (CLS) 。 在加载页面时，其布局可能会发生变化，从而在浏览器中四处移动元素。 移动的元素越多，CLS 分数就越高。 理想情况下，这应该为零。

有很多方法可以改善 WordPress 中的 Core Web Vitals。 最简单的方法是使用一个插件来优化这些指标背后的所有变量。

Jetpack Boost 可以帮助您实施多种策略来改进 Core Web Vitals。 您可以优化 CSS 交付、推迟非必要的 JavaScript 并启用延迟加载。

通常，您需要使用多个插件来实现这些配置或手动执行。 安装并激活 Jetpack Boost 后，您只需导航至Jetpack → Boost并切换相应选项即可启用每项设置。

有关 WordPress 浏览器缓存的常见问题

虽然我们已经介绍了 WordPress 中浏览器缓存的基本知识，但您可能对该过程仍有一些疑问。 让我们来看看一些最常见的。

浏览器缓存安全吗？

浏览器缓存非常安全。 您访问的大多数网站可能使用某种类型的缓存策略来提高访问者的性能。 作为访问者，您甚至不会注意到它，除非您深入研究网站的标题，或者您需要清除缓存。

浏览器缓存可能不安全的唯一方法是通过错误的实现。 如果配置不当，浏览器将无法以正确的方式存储资产，或者页面可能无法加载（尽管这种情况很少见）。

浏览器缓存与服务器缓存：它们有何不同？

浏览器和服务器缓存的工作方式非常相似。 唯一的区别是一种方法在本地存储文件，而另一种方法在服务器端存储文件。

服务器缓存的最佳示例是 CDN。 使用 CDN，您可以将站点的缓存副本存储在第三方服务器（或它们的集群）上。 当访问者尝试访问该网站时，CDN 会拦截该连接并提供该网站的存储副本。

在那种情况下，访问者仍然可以通过浏览器缓存静态内容。 最终用户的体验不应该有任何改变，除了 CDN 通常比传统服务器提供更好的加载时间。

我还能做些什么来提高网站的性能？

您可以做很多事情来提高站点的性能（除了利用浏览器缓存之外）。 您可以进行的其他一些更改包括消除渲染阻塞资源、缩小 CSS、使用 CDN、减少 HTTP 请求以及减少 TTFB 和服务器响应时间。

在网站性能方面，有些更改比其他更改更有效。 加载时间的改进会对用户体验产生重大影响，从而为您的业务带来更高的转化率。

开始在您的 WordPress 网站上提供静态资产

在 WordPress 中利用浏览器缓存是缩短加载时间的最有效方法之一。 一个有效的策略将关注静态文件并将它们配置为定期重新加载。 这样，访问者就不会受困于过时的元素。

在 WordPress 中实现浏览器缓存的最简单方法是使用 WP Super Cache 之类的插件。 此插件使您能够使用一组默认配置来利用浏览器缓存或手动控制每个设置。 另外，它是免费使用的。

此外，当您安装 Jetpack Boost 时，您可以进一步提高站点的性能。 查看插件以了解更多信息！