如何轻松修复 WordPress 中的利用浏览器缓存警告

已发表: 2021-08-18

您可能会遇到用于衡量网站性能的不同在线工具。 他们每个人都在分析您网站的特定部分的运行速度。 在众多常见警告中，经常出现“利用浏览器缓存”错误。 这与缓存有关，作为一项功能，您可以临时利用客户端设备上的空间。 这会导致您的网站及其页面的整体加载速度更快。 换句话说，您可以轻松地在 WordPress 中修复杠杆浏览器缓存警告，以确保为您的访问者提供更好的用户体验。

在 WordPress 中修复利用浏览器缓存警告的可靠方法

有两种情况您会收到此警告。 首先，您的浏览器缓存未启用。 其次，浏览器缓存配置不正确。 然而，在许多在线性能工具中，这个错误现在报告为“使用有效的缓存策略服务静态资产” 。 但是，无论您收到什么警告，都意味着您的浏览器缓存规则没有到位。 如果您对自己解决问题没有信心，经验丰富的 WP 专家总是可以帮助您解决这些问题。 或者，如果您是，那么让我们来看看如何修复 WordPress 中的“利用浏览器缓存”警告。

表中的内容：

  • 什么是浏览器缓存？
    • W3 总缓存插件
    • CAOS 插件
    • WP火箭插件
  • 使用插件修复 Leverage Browser Caching 警告
  • 使用代码手动修复它

什么是浏览器缓存？

在我们继续解决方案之前，了解这种类型的浏览器缓存意味着什么是很有用的。 这是网站在本地存储其页面副本的一种方法。 它允许他们通过减少浏览器和服务器之间的请求数量来提高加载速度。 因此，在重新访问时，浏览器将更快地加载网站，而无需再次连接到服务器并请求额外的资源。

“使用有效的缓存策略提供静态资产”警告。
这是您通常会在在线性能工具上看到的警告。

最常见的缓存文件类型是：

  • 样式表
  • 图片
  • 标志
  • 和其他静态元素

由于自上次访问以来它们可能没有更改，因此您的网站将在访问者的浏览器中加载得更快。 问题是 -缓存的所有内容都需要设置过期期限。 以防万一同时发生了某些变化，因此访问者可以加载网站的更新版本。

修复利用插件的浏览器缓存警告

插件搜索缓存插件的结果。
您可以在 WordPress 中轻松找到数十个缓存插件。

W3 总缓存

W3 Total Cache 是最流行的缓存插件之一。 它具有您可以从此类插件中获得的所有功能。 总体而言，该插件通过改善您的网站性能直接改善了 SEO 和整个用户体验。 正确配置后，它可以使您的总体性能提高约 10 倍。 十多年来，许多 Web 开发人员、Web 主机和发布者都信任此插件。

CAOS 插件

可以在 WordPress 插件存储库中轻松找到完整的分析优化套件。 虽然它作为通用缓存解决方案并不出名，但这个插件解决了 Google Analytics 的问题。 有时，如果您使用的是 Google Analytics，它会扭曲 PageSpeed Insights 和类似工具的结果。 主要是因为谷歌设置了一个太短的缓存到期时间。 使用 CAOS 插件，您可以在本地托管您的主机 analytics.js/gtag.js 并自动保持最新状态。

WP火箭插件

此列表中最好的 WordPress 缓存插件之一绝对是 WP Rocket。 虽然其他插件可能很难配置，但 WP Rocket 非常简单。 它对初学者非常友好，允许您在没有任何先验知识的情况下优化所有内容。 基本上，您只需要安装、激活它，它就会立即使用推荐的 .htaccess 配置。 到目前为止，这是修复利用 WordPress 中的浏览器缓存警告并尽可能使您的网站对用户友好的最简单和最快的方法。

使用代码手动修复它

这种方法需要一定的经验，所以不推荐初学者。 在大多数情况下，插件会完成这项工作。 但是，如果出于任何原因不想使用插件，则可以通过手动添加代码来解决缓存问题。

在进行任何更改之前，第一步是备份您的网站。

接下来的步骤可能会有所不同，具体取决于您使用的服务器。

如果您使用的是 Apache 服务器

基本上，一切都从编辑 .htaccess 文件开始。 进入后，您必须为缓存控制和过期标头添加代码。 缓存控制是一组关于如何处理缓存的指令。 而过期标头决定浏览器中资源保存的期限。

  • 首先，为 cache-control 添加以下代码：

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=80000, public"
</filesMatch>

基本上，这可以缓存不同类型的文件。 并且，将它们设置为通常在“max-age”（以秒为单位）后过期。 之后，浏览器将再次更新整个缓存。

  • 接下来，您将添加定义过期标头的代码：

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpeg "access 2 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/png "access 3 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType image/gif "access 2 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/pdf "access 3 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 5 days"
</IfModule>

从本质上讲，这些行根据您的需要为不同的文件类型设置不同的到期日期。

如果您使用的是 Nginx 服务器

对于 Nginx，您必须更改服务器配置文件以修复浏览器缓存问题。 唯一需要注意的是，您可能无权访问您的服务器配置文件。 为此，您必须与您的托管服务提供商联系。

  • 但是，一旦您获得了安全访问权限，您就可以自由添加缓存控制标头：

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

就像在 Apache 中一样，这将设置整个缓存的过期时间。

  • 下一行将设置过期标头：

location ~* \.(jpg|jpeg|gif|png|svg)$ { expires 365d; }
location ~* \.(pdf|css|html|js|swf)$ { expires 4d; }

您可以在此处看到，图像的有效期较长，因为它们通常不会像其他文件那样经常更改。

文件格式的不同图标。
您可以为任何给定的文件类型设置到期日期。

虽然它们可能无法为您提供有关网站性能的正确图片，但在线性能工具可以为您指明正确的方向。 开始进行更改的最简单方法之一是修复 WordPress 中的“利用浏览器缓存”警告。 或者，就像今天一样，它通常被认为是“使用有效的缓存策略服务静态资产”。 这将使您的网站加载速度更快，并为新访客和回访者提供更好的用户体验。 无论您选择插件还是要手动添加代码，都无所谓。 一般来说，让您的网站表现得更好是很重要的。