如何在 2021 年修复 WordPress 中的杠杆浏览器缓存
已发表: 2020-08-02如何修复 WordPress 中的杠杆浏览器缓存
目录
介绍
您的网站加载缓慢吗？ 您是否正在寻找有效的解决方案来解决 WordPress 中的杠杆浏览器缓存警告？ 页面速度是用户体验的一个重要方面。 在这篇文章中，我将分享有关如何在 WordPress 中修复杠杆浏览器缓存的基本要点。 因此，如果您也面临这个问题，那么必须阅读完整的帖子以便更好地理解。
在用户的浏览器中加载请求的页面所花费的时间极大地影响了用户本人留在您的网站上的事实，例如完成销售。 页面加载时间取决于几个因素：浏览器缓存就是其中之一。
我们将首先探讨杠杆浏览器缓存是什么以及它如何帮助您加快网站速度。 因此，我们将了解如何评估 WordPress 站点是否需要浏览器缓存。 最后，我们将研究几种解决 WordPress 中利用浏览器缓存警告的方法，无论是否使用插件。
什么是杠杆浏览器缓存？
缓存是临时存储空间。 当访问者请求您网站上的页面时，服务器会从数据库中收集必要的信息，将其组织成 HTML 文档，并将其提供给浏览器。 浏览器分析此文档并下载所有相关资源以查看该页面。
缓存是将页面的一部分有效负载存储在缓存中的过程，以加快未来页面的加载速度。 缓存可以存在于访问者的服务器或设备上。
在服务器缓存中，您可以存储所请求页面的数据库查询和静态 HTML 响应。
利用浏览器缓存是访问者设备上的临时存储利用过程，用于在指定时间段内存储样式表、脚本和图像等资源。
对页面的后续访问会导致浏览器在每次用户请求该页面时重复下载相同的资源。 由于这些静态资源构成了 WordPress 站点的大量有效负载，因此浏览器缓存可以减少页面加载时间。
是否需要浏览器缓存？
网站检查您的有效负载资源大小的分布通常会显示您的资源有多大以及浏览器必须发送多少请求才能在显示您的页面之前下载它们。 如果您注意到网页的很大一部分是由静态文件组成的，您应该考虑缓存您的浏览器以提高页面的速度。
确定是否需要浏览器缓存的更自然的方法是使用页面速度测试工具，例如 GTmetrix。 只需输入您网站的 URL 即可开始详细测试。 测试结果将向您展示如何加速您的网站。 如您所见，结果部分中的一个常见警告是利用浏览器缓存。
或者，您可以使用 Think with Google，这是一种页面速度测试工具，可在移动设备上评估您的网站。 该工具的一个重要建议是利用浏览器缓存为您的网站。
PageSpeed Insights，另一个用于测试您网站页面速度的 Google 工具，可能会建议您创建有效的缓存策略以提高页面速度。 浏览器缓存是有效缓存策略的重要组成部分。
在没有插件的情况下解决 WordPress 中的杠杆浏览器缓存警告
如果您不想使用插件，可以更改 Web 服务器设置以修复利用浏览器缓存。 在这种情况下，网络服务器将指示访问者的浏览器将特定资源保存在浏览器缓存中。 浏览器会将这些文件存储在本地一段时间，并在后续访问页面时使用。
设置网络服务器以指示访问者的浏览器开始缓存因服务器而异。 在这篇文章中，我们将向您展示如何在两个最流行的 Web 服务器上启用浏览器缓存：Apache 和 Nginx。
您可以按照以下步骤更正利用浏览器缓存：
- 添加过期标头：这些标头告诉浏览器何时从服务器请求新版本的资源。
- 更改缓存检查标头：您可以使用这些标头设置缓存条件。
- 实体标签标头（ETags）的设置：可以识别服务器上的资源与本地文件相比是否发生了变化。
更正 Apache 中的杠杆浏览器缓存
1.创建或编辑.htaccess文件
在 Apache 服务器上，您可以在 .htaccess 文件中设置所有必要的参数。 此文件允许您手动配置 Apache 设置。 它是一个简单的文本文件，用于存储 Apache 参数并为其所在目录设置权限和配置。
阅读更多：页面搜索引擎优化清单：10 个可操作的优化技巧以提高排名
如果您将.htaccess文件放在网站的前导目录中，则其规则将应用于您网站的所有页面。 您还可以将另一个.htaccess文件放在您的一个子目录中，以仅为该位置设置特定权限。 请注意，较低级别的.htaccess文件会覆盖根目录中 .htaccess 文件的设置。
如果您对服务器具有终端访问权限，则可以远程登录以在适当的位置创建一个.htaccess文件（对于站点级浏览器缓存规则，这应该是根文件夹）。
或者，如果您使用的是 cPanel 文件管理器，请移至所需位置，然后创建一个.htaccess文件。
如果您已经有一个.htaccess文件，您可以简单地添加新的浏览器缓存规则。
2.添加过期标头
.htaccess文件中的第一个设置是启用 expires headers 功能。 将以下行添加到文件中：
过期活动在
之后，您可以使用如下所示的语法为不同的文本文件设置句点：
ExpiresByType 文本/CSS “访问 1 个月”
ExpiresByType 文本/HTML “访问 1 个月”
要为图像设置过期时间，请使用图像而不是文本斜线和图像扩展名。
ExpiresByType 图像/jpeg “访问 1 个月”
ExpiresByType 图片/svg “访问 1 个月”
要设置申请截止日期，请使用应用程序并指定文件扩展名。
ExpiresByType 申请 / pdf “访问 1 个月”
对于任何特定设置未涵盖的所有其他文件，请使用定义 ExpiresDefault：
过期默认“访问 1 个月”。
3.定义缓存策略
接下来，您需要使用缓存检查设置定义缓存条件。
缓存策略包含三个主要部分：
- 如何缓存资源
- 缓存的位置
- 资源过期前的时间
公共缓存向浏览器指示资源可以在任何地方缓存。 相反，私有缓存只允许在客户端设备上存储。
例如，登录用户的个人资料页面应该只缓存在客户端设备上。
相反，博客的主页也可以缓存在 CDN 上。 您可以通过添加以下规则来设置公共缓存策略：
<IfModule mod_headers.c>
公共缓存控制标头集
</如果模块>
您还可以通过将以下过滤器添加到标头模块来为不同类型的文件指定不同的标准：
<ifModule mod_headers.c>
<文件匹配“\. (ico | jpeg | jpg | png) $”>
公共缓存控制标头集
</文件匹配>
<文件匹配“\. (php) $”>
私有缓存控制标头集
</文件匹配>
</如果模块>
上面的代码指定浏览器可以在任何地方存储图像文件，但 PHP 文件必须存储在客户端设备上。
您还可以将过期配置添加到每个文件匹配规则。 到期时间必须以秒为单位定义。 通过将其设置为零，浏览器必须在每次加载页面时请求该文件：
标头集过期 0
4.禁用Apache中的实体标签
最后，有必要使用以下代码禁用实体标签：
FileETag 无
禁用 ETag 要求浏览器依赖缓存条件，并避免每次加载页面时重新验证文件。
保存.htaccess文件并重新启动 Apache 以使更改生效。
解决 Nginx 中的 Leverage Browser Caching
在 Nginx 中，可以在 /etc/nginx/site-enabled/default 位置找到 nginx.conf 配置文件。
您可以使用以下代码将 Expires 标头添加到特定文件类型：
位置〜* \。 (ico | jpeg | jpg | png) $ {
30天到期；
}
您还可以将 Cache-Control 标头添加到同一代码块中：
位置〜* \。 (ico | jpeg | jpg | png) $ {
30天到期；
add_header 缓存控制“公共”；
}
保存配置文件并重启 Nginx 以使更改生效。
使用插件解决 Leverage Browser Cache
如果您使用 WordPress 的缓存插件，它可能已经支持浏览器缓存。
现在让我们看看如何使用一些最著名的缓存插件来解决利用浏览器缓存的问题。
1.WP火箭
WP Rocket 是最快和最受推荐的 WordPress 插件之一，只需单击几下即可管理所有速度优化。 WP Rocket 不仅可以让您解决利用浏览器缓存的问题，还可以让您使用各种技术优化您的网站，例如：
- 静态文件压缩 (GZip) – 减少总数据大小（阅读有关如何在 WordPress 中启用 GZip 压缩的完整帖子）
- 启用文件缓存（包括缓存预加载） - 减轻服务器压力（并恢复每个页面的预扫描副本）
- 谷歌字体优化——确保更大量的字体被快速加载，
- 延迟加载——只有当用户向下滚动到需要图像的页面部分时才会对图像收费
- 缩小和组合——减少文本资源的大小和组合，以更快地将它们交付给最终用户
- 推迟 JS 的加载——让页面快速出现，而不是等待所有资源下载。
- 集成并启用 CDN 网络- 以便更快地交付较重的图像
- DNS 预取– 减少解析第三方内容来源所需的时间
对于不直接参与优化网站的任何人来说，所有这些似乎都难以理解。 但是，实际上，如果您想加速 WordPress，这些都是您需要采取的措施。
我们强烈建议阅读我们的 WP Rocket 评论，
2.LiteSpeed缓存
LiteSpeed Cache 是一个缓存插件，让您只需启用该功能即可解决杠杆浏览器缓存问题。 安装并激活插件并转到缓存设置。 切换到浏览器选项卡并允许浏览器的缓存选项。
也可以设置到期时间。 但是请注意，此设置适用于网站上的所有缓存文件。
3. WP最快的缓存
WP Fastest Cache 是另一个具有简单自定义选项的 WordPress 缓存插件。 免费版本允许您启用浏览器缓存。 转到设置页面并选择浏览器缓存复选框。
4. W3总缓存
W3 Total Cache 是另一个广泛使用的浏览器缓存插件。 它允许您自定义各种缓存选项。 安装后，转到设置页面上的缓存浏览器部分。
此插件允许您为许多类别的文件设置权限，例如图像、脚本和样式表。 对于每个组，您可以设置 Expires 标头、Expires 生命周期和 ETag。
经常问的问题
什么是浏览器中的缓存？
当访问者请求您网站上的页面时，服务器会从数据库中收集必要的信息，将其组织成 HTML 文档，并将其提供给浏览器。 这样当您稍后访问该网站时，该网站将立即加载。 网站信息存储在您的硬盘中，即缓存
什么是杠杆浏览器缓存？
利用浏览器缓存是访问者设备上的临时存储利用过程，用于在指定时间段内存储样式表、脚本和图像等资源。
是否需要浏览器缓存？
由于网页的重要部分由静态文件组成，因此您应该考虑缓存浏览器以提高页面速度。
如何解决浏览器缓存问题？
使用 .htaccess
1. 转到 .htaccess 文件
2.在文件末尾添加如下代码
过期活动在
ExpiresByType 文本/CSS “访问 1 个月”
ExpiresByType 文本/HTML “访问 1 个月”
过期默认“访问 1 个月”。
4.保存.htaccess文件并刷新站点
结论
在这篇文章中，我们探讨了页面速度的重要性以及为什么要修复 WordPress 中的杠杆浏览器缓存。 我们已经看到速度测试工具可以指示您的 WordPress 网站是否需要浏览器缓存。 接下来，我们讨论了如何在不使用插件的情况下配置各种 Web 服务器以启用浏览器缓存。 最后，我们查看了三个流行的插件，它们允许您修复 WordPress 中的杠杆浏览器缓存。