利用 WordPress 中的浏览器缓存来优化页面加载时间

WordPress 网站用户总是在寻找开箱即用的东西，并且目标是达到 90+ Google PageSpeed Insights 分数基准是完全有可能的。 一般来说，有多种技术可以加速 WordPress 网站，但其中浏览器缓存是网站速度优化分析中最常见的问题。

要监控和测试网站的性能，您可以使用多种在线工具，例如 Google PageSpeed Insights、GTMetrix 和 Pingdom。 它们提供准确的结果并帮助您了解网站需要改进的地方。 在测试网站的性能时，您可能会收到“利用浏览器缓存”的警告通知。

今天，我们将讨论如何解决这个问题。 所以，我们不要浪费时间去深入研究。

什么是浏览器缓存及其工作原理？

每当有人访问您的网站时，浏览器都会发送请求以从服务器加载 HTML、脚本、图像、CSS 等资源。 然后服务器响应浏览器的请求。 根据请求的资产大小和服务器处理时间，响应可能需要一些时间才能响应。 它最终会导致服务器负载增加并减慢用户端的网站速度。

在这种情况下，浏览器缓存效果最好。 当访问者第一次访问网站时，它将静态内容存储在用户的浏览器上。 如果您的网站未正确配置浏览器缓存，并且您正在使用上述任何性能测试工具测试网站速度，该工具肯定会显示一条警告消息，以利用浏览器缓存。

根据 Google 的说法，服务器响应应在标头中包含以下两个标签：

Cache-Control定义浏览器和其他中间缓存如何缓存单个响应以及缓存多长时间。

ETag提供了一个由浏览器自动发送的重新验证令牌，用于检查资源自上次请求以来是否已更改。

什么是利用浏览器缓存？

简而言之，利用浏览器缓存有助于减少 HTTP 请求以更快地加载页面，并提高服务器响应时间。

让我们看一个活生生的例子。 我使用 Think with Google 测试了我的网站，结果如下。

让我们通过 Google PageSpeed Insights 工具对其进行测试。

好吧，你可以看到我的网站整体性能还是不错的。 但是，它还有改进的空间。 它表明我的内部 URL 可以被缓存。

修复“利用浏览器缓存”警告

要修复“利用浏览器缓存”警告，您必须执行以下两个步骤。

1. 更改请求标头以使用缓存
2. 优化缓存策略

1. 更改请求标头以使用缓存

提高网站速度和响应的一种方法是更改​​请求标头以使用缓存。 我们将向 WordPress .htaccess 文件添加几行代码。

希望您的网站获得 90 以上的 PageSpeed Insights 分数？

获取我们的免费电子书，了解如何使用浏览器缓存和其他技术来加快网站的加载速度。

我同意 Cloudways 服务条款和隐私政策

立即获取

谢谢

您的电子书已发送至您的收件箱。

注意： .htaccess 是网站的控制室。 如果配置不正确，当您访问该站点时，它可能会破坏整个站点！ 了解如何使用 .htaccess 文件保护您的 WordPress 。

要利用 WordPress 中的浏览器缓存，请访问 WordPress 安装的主目录，搜索 .htaccess 文件并使用任何代码编辑器将其打开。 只需将以下行粘贴到 WordPress .htaccess 文件的顶部即可。

 ## 缓存过期 ##

<IfModule mod_expires.c>

过期有效日期
ExpiresByType image/jpg “访问 1 年”
ExpiresByType image/jpeg“访问 1 年”
ExpiresByType image/gif“访问 1 年”
ExpiresByType image/png “访问 1 年”
ExpiresByType text/css "访问 1 个月"
ExpiresByType text/html "访问 1 个月"
ExpiresByType application/pdf“访问 1 个月”
ExpiresByType text/x-javascript“访问 1 个月”
ExpiresByType application/x-shockwave-flash“访问 1 个月”
ExpiresByType image/x-icon“访问 1 年”
过期默认“访问 1 个月”

</如果模块>

## 缓存过期 ##

2.优化缓存策略

加快网站响应时间的第二步是优化缓存策略。 上面的代码描述了文件类型及其过期时间。 您想要在用户的浏览器缓存中存储特定静态内容多少时间完全取决于您。 如果您的静态内容（例如图像）是长期的。 我建议你将它们设置为一年。 但您怀疑近期可能更改的内容，建议您将有效期设置为至少一个月。

缓存控制

如果上述方法在您的服务器上不起作用，我们还有另一种替代方法可以帮助您使用缓存控制来设置缓存到期时间。 您所要做的就是将以下行复制并粘贴到 .htaccess 文件的顶部。

 # 大多数静态资产需要 1 个月

<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
标头设置 Cache-Control“max-age=2592000, public”

</文件匹配>

和上一步一样，上面的代码描述了不同文件类型的过期和缓存策略。

注：2592000 秒 = 30 天。这是可以消除警告的最小值。如果到期时间小于此值，您可能仍会看到杠杆浏览器警告，建议增加到期时间。

正确设置 .htaccess 文件后，我们现在要对其进行测试。 那么，让我们测试一下！

并且“利用浏览器缓存”警告已得到修复。

WordPress 利用浏览器缓存进行 Google Analytics

如果您使用任何 WordPress 插件进行 Google Analytics，您仍然可能会收到利用浏览器缓存的警告，无论您是否正确设置了所有内容。

这是因为 Google Analytics 将默认过期时间设置为仅两个小时，以确保您尽快获得更新。

有两种方法可以修复 Google Analytics 的浏览器缓存警告。

1. 本地：您可以创建analytics.js和/或ga.js的本地副本（无论您正在处理什么文件，都会利用浏览器缓存）。 请注意，Google 不推荐此方法。
2. 插件：使用 Complete Analytics Optimization Suite (CAOS) WordPress 插件在本地托管 Google Analytics 文件，并使用wp_cron()保持更新。

仍然看到利用浏览器缓存警告吗？

正确设置所有内容后，您可能仍然会看到 Google 建议利用浏览器缓存，如下图所示。

如您所见，上述文件是第三方集成。 这些不存在于我们的服务器上。 除了删除它们之外，我们对它们无能为力。 所有第三方集成都可能在速度测试工具中导致此警告。

我是 Cloudways 客户，它对我有什么好处？

如果您是 Cloudways 优化的 WordPress 托管客户，那么您应该抛开在线速度测试工具中弹出的 WordPress 利用浏览器缓存警告的担忧。 因为Cloudways自己处理这个问题。 您只需导航到Server → Settings & Packages → Advanced ，向下滚动一点并查找NGINX – Static Cache Expiry即可更改过期时间。默认值为 43200 分钟，相当于 30 天。

利用 W3 Total Cache 的浏览器缓存

上述方法是手动删除利用浏览器缓存警告的方法。 如果您使用的是W3 Total Cache等缓存插件，则需要通过导航到“性能”→“常规设​​置”来启用浏览器缓存。

然后导航到浏览器缓存并标记下面的五个复选框。

向下滚动一点以设置 CSS 和 JSS 文件的到期时间。 默认值为 31536000，相当于 365 天。 您可以将其更改为您所需的时间范围。

向下滚动一点以设置 HTML 和 XML 的到期时间。

要更改媒体和其他文件的默认值，请向下滚动一点并设置到期时间。 默认值为 31536000，相当于 365 天。

最后的想法

利用浏览器缓存有助于提高 Web 性能测试分数。 请记住，这些设置仅用于在 WordPress 用户之间建立基本指南和理解。 除此之外，还有许多技术可以帮助个人立即建立更快的网站，其中最重要的是选择最快的 WordPress 托管。

如果您有任何疑问，请随时在下面的评论部分提问。 我很乐意回答。