如何在 WordPress 中利用浏览器缓存（带视频）

最后更新 - 2021 年 7 月 8 日

如果您拥有或运营一个 WordPress 网站，您将希望不断改进它的外观和工作方式。 但是，您使用的插件、页面构建器和内容元素越多，您的网站就会越慢。

无论您的网站看起来多么好或它的工作多么重要，一个加载缓慢的网站对访问者来说都是一个很大的障碍。

这就是为什么管理 WordPress 网站需要您使用可以找到的任何网站性能指标。 值得采取的一项重要措施是利用浏览器缓存。

在本文中，您将了解它的含义以及如何在 WordPress 中利用浏览器缓存。

什么是浏览器缓存？

每当用户访问您的网站时，都需要将图像、JavaScript、CSS 等资源从服务器上传到他们的计算机。 这意味着用户需要在后续页面和站点访问之间重复加载相同的资源。

输入：缓存。

缓存表示浏览器在本地存储网站上可用的可缓存资源的时间段。 当用户请求网页时，信息会立即从他们的计算机中获取。

这样，您可以利用 WordPress 中的浏览器缓存来提供更快的网站性能。

您可以使用Google PageSpeed Insights和GTmetrix等工具来测试您的网站是否已经利用浏览器缓存。

只需将您网站的 URL 粘贴到提供的字段中，然后单击“分析”。 该工具将为您的网站提供一个分数，在 PageSpeed 的情况下为 0 到 100，在 GTmetrix 的情况下为字母等级。

该工具还将为您提供改进网站性能的建议。 一个常见的建议是选择在 WordPress 中利用浏览器缓存。 如果您收到此建议，这里有两种方法。

手动利用 WordPress 中的浏览器缓存

您可以通过在 .htaccess 文件中添加一些代码来手动利用 WordPress 中的浏览器缓存。 实际上，您需要为三种不同的目的添加三段代码：

1. 添加过期标头
2. 添加缓存控制标头
3. 关闭 ETag

要添加此代码，您需要访问您的网站文件，您可以通过登录到您的主机帐户或 cPanel 来完成。 您需要导航到网站设置中的文件管理器和“打开隐藏文件”选项。

然后，您将在 public_html 文件夹中找到 .htaccess 文件。 右键单击该文件并对其进行编辑以添加下面提供的代码。

1.添加浏览器缓存代码

复制下面的代码并将其粘贴到 .htaccess 文件内容的末尾。 不要对文件进行任何其他更改。

 #Customize expires cache start - 根据需要调整周期
<IfModule mod_expires.c>
FileETag MTime 大小
AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
过期活动在
ExpiresByType text/html "访问 600 秒"
ExpiresByType application/xhtml+xml "访问 600 秒"
ExpiresByType text/css "访问 1 个月"
ExpiresByType 文本/javascript“访问 1 个月”
ExpiresByType text/x-javascript "访问 1 个月"
ExpiresByType 应用程序/javascript“访问 1 个月”
ExpiresByType application/x-javascript "访问 1 个月"
ExpiresByType application/x-shockwave-flash "访问 1 个月"
ExpiresByType 申请/pdf “访问 1 个月”
ExpiresByType image/x-icon "访问 1 年"
ExpiresByType image/jpg "访问 1 年"
ExpiresByType image/jpeg "访问 1 年"
ExpiresByType image/png "访问 1 年"
ExpiresByType image/gif "访问 1 年"
ExpiresDefault "访问 1 个月"

</IfModule>
#Expires 缓存结束

上面的代码告诉浏览器提供页面的缓存版本，而不是下载新版本。

这些设置还包括以下刷新/过期时间：

• HTML 600 秒
• 一个月 CSS 和 JavaScript
• 一年的图像

这些有效期确保访问者不必经常下载某些资源。 但是，您可以根据需要轻松编辑到期时间。

2.添加缓存控制标头（Apache）

我们需要添加缓存控制标头来指定浏览器缓存策略，这些策略与资源的缓存方式、缓存位置以及过期前的最长期限有关。 但是，我们已经在上面指定了过期时间，所以我们不需要在这里重复它们。

复制并粘贴以下代码：

 # BEGIN 缓存控制头

<IfModule mod_expires.c>
<IfModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
标头附加缓存控制“公共”
</filesMatch>
<filesMatch "\.(css)$">
标头附加缓存控制“公共”
</filesMatch>
<filesMatch "\.(js)$">
标头附加缓存控制“私有”
</filesMatch>
<filesMatch "\.(x?html?|php)$">
标头附加缓存控制“私有，必须重新验证”
</filesMatch>
</IfModule>
</IfModule>

3.关闭Etags

我们将关闭电子标签以强制浏览器依赖缓存控制和过期标头而不是验证文件。 这是代码：

 <IfModule mod_headers.c>
标头未设置 ETag
</IfModule>
FileETag 无

NGINX 服务器的浏览器缓存

如果您的网站使用 NGINX，您将无法找到 .htaccess 文件。 在这种情况下，前往 /etc/nginx/sites-enabled/default 并粘贴以下代码：

 服务器 {
听 80；
server_name 本地主机；
地点 / {
根 /usr/share/nginx/html;
索引 index.html 索引.htm；
}
位置 ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
365d 到期；
}
位置 ~* \.(pdf)$ {
30天到期；
}
}
添加缓存控制标头 (NGINX)
位置 ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
90d 到期；
add_header Cache-Control "public, no-transform";
}

编辑 NGINX 后，保存文件以利用 NGINX 服务器上的浏览器缓存。

使用插件在 WordPress 中利用浏览器缓存

编辑 .htaccess 文件确实有很大的风险，因为一个错误可能会破坏您的整个网站。 因此，如果您不想承担不必要的风险，您可以使用W3 Total Cache和WP Fastest Cache等插件。

以下是使用 W3 Total Cache 插件来利用浏览器缓存的方法，这是最适合这项工作的插件之一。

安装插件后，前往其设置页面。 在这里，确保启用了浏览器缓存。 接下来，从侧边栏中转到浏览器缓存设置。 并确保启用过期标头、缓存控制标头和设置电子标签选项。

如果您进行了任何更改，请保存设置。

这样，您就成功地利用了 WordPress 网站上的浏览器缓存。 您可以再次使用 Insights 或 GTmetrix 工具确保它已启用。

如果您更喜欢视频版本，请查看以下视频：

进一步阅读：

• 2021 年最佳免费 WordPress 数据库优化插件
• 如何在 WordPress 网站上启用 GZIP 压缩？