Instant Fix WordPress 利用浏览器缓存（逐步）
已发表: 2021-07-07如果您想完全了解如何在 WordPress 中修复利用浏览器缓存，请坚持到最后，因为我们有很多东西要分享。
谁不喜欢超快的加载速度？
但不知何故，您发现“利用浏览器缓存”正在阻止您的网站快速加载。
然而，我们为此提供了解决方案。
这是大多数人在 Google PageSpeed Insights 中遇到的最常见错误。
如果您的目标是在 Google PageSpeed Insights 中获得 90 以上的分数，那么您需要解决这个问题。
您需要知道，页面速度对于在 Google SERP 上排名高以及提供良好的用户体验与以往一样重要。
这篇文章将告诉您 WordPress 利用浏览器缓存的方式，以及如何修复 WordPress 中利用浏览器缓存的问题。
如果您想完全了解如何在 WordPress 中修复利用浏览器缓存，请坚持到最后，因为我们有很多东西要分享。
谁不喜欢超快的加载速度？
但不知何故，您发现“利用浏览器缓存”正在阻止您的网站快速加载。
然而，我们为此提供了解决方案。
这是大多数人在 Google PageSpeed Insights 中遇到的最常见错误。
如果您的目标是在 Google PageSpeed Insights 中获得 90 以上的分数，那么您需要解决这个问题。
您需要知道，页面速度对于在 Google SERP 上排名高以及提供良好的用户体验与以往一样重要。
这篇文章将告诉您 WordPress 利用浏览器缓存的方式，以及如何修复 WordPress 中利用浏览器缓存的问题。
所以，让我们深入研究。
关于利用浏览器缓存 WordPress 的少量信息
简而言之，利用浏览器缓存通过减少 HTTP 请求和提高服务器响应时间来加速页面加载。
现在，我们所说的缓存是什么意思？
浏览器在本地存储网站上可用的可缓存资源的时间称为缓存。
其中包括什么？
这包括图像、CSS、JavaScript 等。
当任何人访问该网站时，已保存在您设备上的可缓存资源会被重新上传。
网站的加载速度因此明显提高。 这就是人们想要在 WordPress 中使用浏览器缓存的原因。
什么是显示实际数据和解决方案的真正平台？
您可以尝试 Think with Google 来检查您网站的状态，如果它加载速度很快或者需要几秒钟才能完全加载。
该工具将为您提供如何优化网站以快速加载网站的所有解决方案，并提供完整的报告。
您可以使用的另一个合法工具是 Google 的 PageSpeed Insights 来测试您网站的页面速度。
它将建议您开发强大的缓存策略来提高页面速度。
如何利用浏览器缓存
如果您拥有或经营一个网站，您应该被告知服务器缓存是指您的网站生成缓存网页的机制。
这是服务器端； 当用户通过浏览器访问网站时，会发生浏览器缓存。
这与前面的说法完全相反。
此外，当您使用浏览器缓存时，您是在告诉服务器资源应该在访问者的浏览器中存储多长时间。
为了利用浏览器缓存，您通常需要识别 HTTP 标头以指定您网站上各种文件类型的正确到期时间。
如果您想手动输入代码或使用 WordPress 插件，将取决于您的 Web 服务器是 Nginx 还是 Apache。
现在，让我们继续讨论在 WordPress 中利用浏览器缓存的方法，无论有没有插件。
如何在没有插件的情况下修复 WordPress 上的杠杆浏览器缓存？
很多人不喜欢用插件来解决这个问题。
您可以通过更改 Web 服务器上的设置来使用浏览器缓存。
然后，如果您这样做，您的 Web 服务器将告诉访问者的浏览器将这些资源保存到浏览器缓存中。
这些文件将由浏览器在本地存储一段时间，并用于后续页面访问。
指示 Web 服务器开始缓存访问者浏览器的过程因服务器而异。
Apache 和 Nginx 都是最流行的 Web 服务器。
让我们开始逐步修复在两台服务器上利用 WordPress 中的浏览器缓存。
- WordPress 利用浏览器缓存使用 (Apache)
许多共享托管服务使用 Apache，因此如果您的站点有一个 .htaccess 文件，您需要遵循 Apache 代码说明。
下面介绍如何使用自定义代码来利用 Apache 服务器上的浏览器缓存。
一旦您确认您的服务器在 Apache 上运行，您就可以继续下一步。
- 要访问您的服务器，请登录 CPanel 或使用 FTP 客户端。
- 立即找到您的.htaccess文件。
因为.htaccess 文件可能默认隐藏，您可能需要显示隐藏文件（dotfiles）。
您的 .htaccess 文件应如下图所示。
您需要了解，您可以直接在服务器上对其进行编辑，也可以将其导入并在文本编辑器中打开。
此外，您有很多选择来确定浏览器缓存规则，例如：
过期标头或缓存控制标头。
让我们看看两者。
- 缓存控制标头：
打开后，您需要将以下代码片段添加到您的 .htaccess 文件的顶部：
复制这段代码：
# BEGIN Cache-Control Headers <IfModule mod_expires.c> <IfModule mod_headers.c> <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> Header append Cache-Control "public" </filesMatch> <filesMatch "\.(css)$"> Header append Cache-Control "public" </filesMatch> <filesMatch "\.(js)$"> Header append Cache-Control "private" </filesMatch> <filesMatch "\.(x?html?|php)$"> Header append Cache-Control "private, must-revalidate" </filesMatch> </IfModule> </IfModule>- 过期标头：
这些 Expire 标头可以添加到 your.htaccess 文件的顶部，就像 Cache-Control 标头一样。
看代码格式：
## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 1 month" </IfModule> ## EXPIRES CACHING ##在服务器上设置这些标头后，您可以轻松地从 Chrome 的 DevTools 中查看这些标头。
只需转到网络选项卡，选择资产，然后查找您添加的标题表单，例如 Cache-Control、Expires 或两者。
- 禁用实体标签：
最后但并非最不重要的一点是，您必须使用以下代码来停用实体标签：
FileETag 无
当您禁用 ETags 时，浏览器可以使用您的缓存策略，而不是在每次页面加载时重新验证文件。
要使更改生效，请保存 .htaccess 文件并重新启动 Apache。
- WordPress 利用浏览器缓存使用 (Nginx)
Nginx 是一个免费的开源网络服务器，被超过 5 亿个网站使用。
与 Apache 一样，您有几个选项可以在网站的静态和动态组件上设置缓存到期时间。
- “缓存控制”标头（Nginx）
在您的服务器块内，通常位于
/etc/nginx/site-enabled/default,
添加以下片段。
location ~* \.(png|jpg|jpeg|gif)$ { expires 365d; add_header Cache-Control "public, no-transform"; } location ~* \.(js|css|pdf|html|swf)$ { expires 30d; add_header Cache-Control "public, no-transform"; }- “过期”标头（Nginx）
将以下代码插入您的服务器块，该块位于：
/etc/nginx/启用站点/默认/
location ~* \.(jpg|jpeg|gif|png)$ { expires 365d; } location ~* \.(pdf|css|html|js|swf)$ { expires 30d; }如何使用插件修复利用 WordPress 上的浏览器缓存？
如果您想绕过更复杂的编码步骤，您可以使用一些优秀的 WordPress 插件来利用浏览器缓存。
- WP 最快缓存：
WP Fastest Cache 是另一个具有简单自定义选项的 WordPress 缓存插件。
您可以在免费版中允许浏览器缓存。 如上图，进入设置页面，勾选浏览器缓存复选框。
- LiteSpeed 缓存：
LiteSpeed Cache 是一个缓存插件，只需打开它，您就可以利用浏览器缓存。
安装并启用插件后转到缓存设置。 转到浏览器选项卡并打开浏览器缓存功能。
您还可以指定到期日期。
但是，此设置将应用于您站点上的所有缓存文件。