如何在WordPress中轻松修复浏览器缓存的警告
更新时间：2024年8月1日 | 审核人：Syed Balkhi
如果没有利用浏览器缓存，那么你的网站速度可能没有达到最佳。我们在所有网站上启用了浏览器缓存，以优化WordPress的性能。浏览器缓存会将某些文件存储在访问者的浏览器中，这样在后续访问时就不需要再次下载这些文件，从而提高页面加载速度。如果你没有使用此功能，那么在运行速度测试时，你可能会看到“利用浏览器缓存”的警告。
什么是WordPress中的浏览器缓存？
浏览器缓存是一种提高WordPress网站加载速度的方法。通常，当网页加载时，所有文件都会分别加载，这会在浏览器和WordPress托管服务器之间产生多个请求，从而增加网页加载时间。当启用浏览器缓存时，浏览器会本地存储网页副本，这样当用户再次访问你的网站时，浏览器可以更快地加载常见文件，如样式表、标识和图片。
这样可以减少整体服务器负载，因为实际服务器的请求数量减少，从而提高性能优化和用户体验。
何时会看到“利用浏览器缓存”的警告？
“利用浏览器缓存”的警告表示你还没有启用浏览器缓存，或者缓存设置错误。当你使用GTmetrix或Google PageSpeed Insights等工具运行网站速度测试时，会生成一份报告，显示可以修复的项目，以加速WordPress。如果你的网站目前没有使用浏览器缓存，那么你会收到启用浏览器缓存的警告。
以下是页面速度洞察工具结果中的警告样本。
有时你会收到“某某缓存策略无效”的警告。这两个警告都表示浏览器缓存设置有问题。
如果看到“利用浏览器缓存”的警告，就需要激活并自定义缓存规则来加速你的网站。
方法一：使用WP Rocket修复“利用浏览器缓存”警告
WP Rocket是市场上最好的WordPress缓存插件。它对初学者友好，不需要了解复杂的缓存和速度术语就能帮助你优化网站速度。
要使用WP Rocket修复“利用浏览器缓存”的警告，只需安装并激活插件即可。之后，WP Rocket会自动启用浏览器缓存，并修改.htaccess文件以包含正确的规则。
方法二：使用代码修复“利用浏览器缓存”警告
第二种方法是向WordPress文件添加代码。如果你以前没有这样做过，请查看我们的初学者指南。本方法对初学者不太友好，所以请确保你知道自己在做什么。对于大多数业务所有者，我们推荐使用方法一。
确定你的网站使用Apache还是Nginx
首先，确定你的网站是使用Apache还是Nginx服务器。打开你的网站，右键点击并选择“检查”。接着点击页面顶部的“网络”选项卡，刷新页面以加载结果。然后在“名称”列中点击你的域名，在“响应头”部分，可以看到“server”项显示服务器类型。
在Apache中添加Cache-Control和Expires头
若在Apache服务器上修复“利用浏览器缓存”警告，需要向.htaccess文件添加代码。连接到WordPress托管账户，找到.htaccess文件，并添加以下代码以启用缓存头：
## EXPIRES HEADER CACHING ##
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"
## EXPIRES HEADER CACHING ##之后可以添加以下代码启用缓存控制：
Header set Cache-Control "max-age=96000, public"
在Nginx中添加Cache-Control和Expires头
如果使用Nginx服务器，可以编辑服务器配置文件，添加以下代码启用Expires头：
location ~* .(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* .(pdf|css|html|js|swf)$ {
expires 3d;
}然后可以添加以下代码启用缓存控制头：
location ~* .(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 14d;
add_header Cache-Control "public, no-transform";
}总结
希望这篇文章帮助你学习如何在WordPress中轻松修复“利用浏览器缓存”的警告。你还可以查看我们关于如何提升WordPress速度和性能的指南。
