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

你想学习如何在WordPress中轻松修复浏览器缓存警告吗?

通过修复浏览器缓存警告,您将快速加速您的WordPress网站,并为您的网站访问者提供更好的体验。

在本文中,我们将向您展示如何轻松修复WordPress中的浏览器缓存警告。

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

什么是WordPress中的浏览器缓存

浏览器缓存是提高网站加载速度的一种方式。当网页加载时,所有文件将被单独加载。

这会在浏览器和您的之间创建多个请求WordPress托管服务器,这增加了网页加载时间。

启用浏览器缓存后,网页浏览器会在本地存储网页副本。这使得浏览器在用户访问你网站的第二个页面时,可以更快地加载常见文件,如样式表、徽标、图像等。

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

这降低了整体服务器负载,因为对实际服务器的请求会减少,因此您的网站性能也会提高。

你会在哪里看到WordPress的杠杆浏览器缓存警告

“利用浏览器缓存”警告意味着您没有启用浏览器缓存,或者您的缓存可能设置错误。

当你运行一个网站速度测试,您将获得一份报告,显示您可以修复哪些问题来加快WordPress的速度。

如果您的网站当前没有使用浏览器缓存,那么您将收到启用浏览器缓存的警告。

这是它在查看页面速度洞察工具的结果时的样子。

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

有时,您会收到一条警告,称您的高效缓存策略不起作用。

这两个警告都是指浏览器缓存设置错误。

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

利用浏览器缓存意味着激活和定制缓存规则来加速您的站点。

话虽如此,让我们看看如何使用两种不同的方法轻松修复WordPress中的浏览器缓存警告

方法一:使用WP Rocket WordPress插件修复利用浏览器缓存警告

WP Rocket是市场上最好的WordPress缓存插件。它对初学者非常友好,可以帮助您优化站点的速度,即使不知道复杂的缓存和速度术语。

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

开箱即用,所有推荐的缓存设置将真正加快您的WordPress网站。

要修复WP Rocket的杠杆浏览器缓存警告,你所要做的就是安装并激活插件。

就这样。

WP Rocket将自动启用浏览器缓存并修改您的.htaccess用正确的规则归档。

方法二:通过向WordPress添加代码修复利用浏览器缓存警告

第二种方法是向WordPress文件中添加代码。

这种方法对初学者不太友好,所以请只在你确切知道自己在做什么的情况下遵循它。对于大多数企业主,我们建议使用方法1。

话虽如此,让我们看看如何通过向WordPress添加代码来修复利用浏览器缓存的警告。

注意:在您自定义WordPress代码之前,我们建议您备份您的WordPress站点。有关更多详细信息,请参见上的我们的指南如何一键备份你的WordPress网站

确定您的网站运行的是Apache还是Nginx?

首先,你需要弄清楚你的网站是否在使用Apache或者Nginx服务器。

为此,请在新的选项卡或窗口中打开您的网站。然后,右键单击并选择“检查”选项。

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

接下来,单击页面顶部的“网络”选项卡。

您可能需要刷新页面以加载结果。

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

然后,在“名称”栏中单击您的域名。

它应该在页面的顶部。

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

然后,在“响应头”部分,您将看到一个名为“服务器”的项目,其中显示了服务器的类型。在这种情况下,站点运行在Apache服务器上。

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

在Apache中添加缓存控制和过期标头

要修复Apache服务器的杠杆浏览器缓存警告,您将向.htaccess文件。

要编辑此文件,您需要连接到WordPress托管使用FTP客户端或您主机的文件管理器工具的帐户。

连接后,您可以看到您的.htaccess文件放在网站的根文件夹中。

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

如果你找不到,那就别担心。有时这个文件会被隐藏。有关更多详细信息,请参见上的我们的指南如何配置WordPress网站中的htaccess文件

接下来,您需要添加缓存控制和/或过期标题来打开浏览器缓存。这将告诉网络浏览器在删除网站资源之前应该存储多长时间。

缓存控制头向web浏览器提供了关于应该如何进行缓存的具体细节。

expires头启用缓存,并告诉web浏览器在删除特定文件之前应该存储多长时间。

您可以将以下代码添加到.htaccess要添加过期邮件头的文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
## EXPIRES HEADER 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 image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 3 days"
</IfModule>
## EXPIRES HEADER CACHING ##

此代码根据文件类型设置不同的缓存到期日期。

之后,您可以添加以下代码来启用缓存控制:

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

此代码设置缓存过期的时间。在上面的示例中,缓存将在90,000秒后过期。

之后,网络浏览器将请求文件的新版本。

在Nginx中添加缓存控制和过期标头

如果您使用Nginx网络服务器来托管您的WordPress博客,然后您可以编辑服务器配置文件来修复浏览器缓存错误。

如何编辑和访问该文件取决于您的主机,因此如果您需要访问该文件的帮助,可以联系您的主机提供商。

然后,您需要添加以下代码来添加过期标题:

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

该代码将为不同的文件类型设置到期时间。请注意,图像缓存的时间比HTML、CSS、JS和其他文件类型长,因为图像通常保持不变。

之后,您可以添加以下代码来添加缓存控制头:

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

此代码设置缓存过期的时间。它告诉你的服务器上面的文件类型在14天内不会改变。

如果你想加快WordPress的速度,那么一定要查看我们的指南如何提高WordPress的速度和性能

我们希望这篇文章能帮助你学习如何在WordPress中轻松修复浏览器缓存警告。

本站所有文章均来自互联网。如若本站内容侵犯了您的合法权益,可联系我们进行处理。

发表评论

您的电子邮箱地址不会被公开。