如何解决WordPress站点Google PageSpeed Insights静态资源缓存策略告警

可以通过.htaccess手动匹配PageSpeed Insights提示的特定资源配置缓存策略，具体操作和排查方案如下：

先排查原有配置失效的原因 #

• 确认.htaccess规则是否被服务器加载：部分使用Nginx做反向代理的WordPress主机会默认忽略.htaccess里的缓存规则，或优先使用服务器层级的配置，需先确认Apache/Nginx是否允许站点根目录.htaccess覆盖过期头配置
• 确认规则优先级：如果之前加的缓存规则放在了.htaccess文件末尾，可能会被WordPress默认规则、插件生成的规则覆盖，需要把缓存规则放到# BEGIN WordPress标记之前
• 检查是否有CDN缓存规则覆盖：如果站点接入了CDN，CDN的默认缓存策略优先级高于源站配置，需要在CDN后台调整对应资源的缓存时间

针对特定资源配置缓存规则（.htaccess方案） #

可以通过文件后缀、或者文件路径精准匹配指定资源的过期时间，示例配置如下：

# 开启过期头模块
<IfModule mod_expires.c>
ExpiresActive On

# 按后缀批量配置缓存时间
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType font/woff2 "access plus 1 year"

# 针对PageSpeed提示的单个特定资源单独配置
# 示例：匹配/wp-content/plugins/xxx/js/alert.js文件，设置6个月缓存
<FilesMatch "^wp-content/plugins/xxx/js/alert\.js$">
ExpiresByType application/javascript "access plus 6 months"
Header set Cache-Control "public, max-age=15552000"
</FilesMatch>
</IfModule>

# 补充Cache-Control头，兼容更多场景
<IfModule mod_headers.c>
# 示例：匹配custom-static.css文件设置缓存
<FilesMatch "custom-static\.css$">
Header set Cache-Control "public, max-age=2592000, immutable"
</FilesMatch>
</IfModule>

将示例中的路径、文件名替换为PageSpeed Insights告警列出的具体资源即可，缓存时间可根据资源更新频率调整，建议静态资源至少设置1个月缓存时间

额外排查建议 #

• 配置完成后先清理站点缓存、浏览器缓存，再用PageSpeed Insights重新检测，避免读取旧的缓存头信息
• 如果使用Nginx服务器不支持.htaccess，可以在Nginx站点配置文件中添加对应资源的expires规则
• 第三方加载的外部资源（如第三方统计脚本、广告资源）不在本站控制范围内，这类资源的缓存告警无法通过本站配置解决，可以忽略或替换为本地化托管的版本

内容的提问来源于stack exchange，提问作者Els den Iep