WordPress站点Cache-Control配置无效，请求解决缓存优化与响应慢问题

我在共享主机上运行WordPress站点，站点健康检测提示检测到页面缓存但服务器响应时间仍缓慢。目前用Autoptimize处理CSS/JS缓存、WP Super Cache做页面缓存，但两者都未配置cache-control头。手动修改.htaccess添加缓存规则后完全无效，DevTools中看不到正确的缓存响应头，当前响应头显示过期日期错误且带有no-cache标识。

核心需求：为图片、字体等不常修改的静态资源配置有效的cache-control/Expires指令，提升站点性能。

已尝试的无效配置 #

第一次尝试（基于秒数的Expires配置） #

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css A2419200
    ExpiresByType text/x-component A2419200
    ExpiresByType application/x-javascript A2419200
    ExpiresByType application/javascript A2419200
    ExpiresByType text/javascript A2419200
    ExpiresByType text/x-js A2419200
    ExpiresByType text/html A3600
    ExpiresByType text/richtext A3600
    ExpiresByType image/svg+xml A3600
    ExpiresByType text/plain A3600
    ExpiresByType text/xsd A3600
    ExpiresByType text/xsl A3600
    ExpiresByType text/xml A3600
    ExpiresByType video/asf A2419200
    ExpiresByType video/avi A2419200
    ExpiresByType image/bmp A2419200
    ExpiresByType application/java A2419200
    ExpiresByType video/divx A2419200
    ExpiresByType application/msword A2419200
    ExpiresByType application/vnd.ms-fontobject A2419200
    ExpiresByType application/x-msdownload A2419200
    ExpiresByType image/gif A2419200
    ExpiresByType application/x-gzip A2419200
    ExpiresByType image/x-icon A2419200
    ExpiresByType image/jpeg A2419200
    ExpiresByType application/json A2419200
    ExpiresByType application/vnd.ms-access A2419200
    ExpiresByType audio/midi A2419200
    ExpiresByType video/quicktime A2419200
    ExpiresByType audio/mpeg A2419200
    ExpiresByType video/mp4 A2419200
    ExpiresByType video/mpeg A2419200
    ExpiresByType application/vnd.ms-project A2419200
    ExpiresByType application/x-font-otf A2419200
    ExpiresByType application/vnd.ms-opentype A2419200
    ExpiresByType application/vnd.oasis.opendocument.database A2419200
    ExpiresByType application/vnd.oasis.opendocument.chart A2419200
    ExpiresByType application/vnd.oasis.opendocument.formula A2419200
    ExpiresByType application/vnd.oasis.opendocument.graphics A2419200
    ExpiresByType application/vnd.oasis.opendocument.presentation A2419200
    ExpiresByType application/vnd.oasis.opendocument.spreadsheet A2419200
    ExpiresByType application/vnd.oasis.opendocument.text A2419200
    ExpiresByType audio/ogg A2419200
    ExpiresByType application/pdf A2419200
    ExpiresByType image/png A2419200
    ExpiresByType application/vnd.ms-powerpoint A2419200
    ExpiresByType audio/x-realaudio A2419200
    ExpiresByType image/svg+xml A2419200
    ExpiresByType application/x-shockwave-flash A2419200
    ExpiresByType application/x-tar A2419200
    ExpiresByType image/tiff A2419200
    ExpiresByType application/x-font-ttf A2419200
    ExpiresByType application/vnd.ms-opentype A2419200
    ExpiresByType audio/wav A2419200
    ExpiresByType audio/wma A2419200
    ExpiresByType application/vnd.ms-write A2419200
    ExpiresByType application/font-woff A2419200
    ExpiresByType application/font-woff2 A2419200
    ExpiresByType application/vnd.ms-excel A2419200
    ExpiresByType application/zip A2419200
</IfModule>

第二次尝试（结合Expires和Cache-Control） #

# BROWSER CACHING USING EXPIRES HEADERS
<IfModule mod_expires.c>
    ExpiresActive On
  
    # Images
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/webp "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType image/x-icon "access plus 1 year"
  
    # Video
    ExpiresByType video/mp4 "access plus 1 year"
    ExpiresByType video/mpeg "access plus 1 year"

    # CSS, JavaScript
    ExpiresByType text/css "access plus 1 week"
    ExpiresByType text/javascript "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"

    # Others
    ExpiresByType application/pdf "access plus 1 month"
    ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>

# BROWSER CACHING USING CACHE-CONTROL HEADERS
<ifModule mod_headers.c> 
    # One year for image and video files
    <filesMatch ".(flv|gif|ico|jpg|jpeg|mp4|mpeg|png|svg|swf|webp)$">
        Header set Cache-Control "max-age=31536000, public"
    </filesMatch>

    # One month for JavaScript and PDF files
    <filesMatch ".(js|pdf)$">
        Header set Cache-Control "max-age=2592000, public"
    </filesMatch>

    # One week for CSS files
    <filesMatch ".(css)$">
        Header set Cache-Control "max-age=604800, public"
    </filesMatch>
</ifModule>

当前响应头异常情况：

修复方案 #

1. 确认服务器模块是否开启 #

共享主机中，mod_expires和mod_headers模块可能未默认开启：

• 登录cPanel，找到“Apache Modules”或“优化设置”选项，勾选mod_expires和mod_headers保存。
• 如果找不到相关选项，直接联系主机商确认模块状态。

2. 修正.htaccess缓存规则 #

将以下代码放在.htaccess文件的最顶部（在# BEGIN WordPress之前），避免被WordPress默认规则覆盖：

# 静态资源缓存配置
<IfModule mod_headers.c>
    # 图片、视频、字体 - 缓存1年
    <filesMatch "\.(jpg|jpeg|png|gif|webp|svg|ico|mp4|mpeg|webm|woff|woff2|ttf|otf|eot)$">
        Header set Cache-Control "max-age=31536000, public, immutable"
    </filesMatch>

    # CSS、JS - 缓存1个月
    <filesMatch "\.(css|js)$">
        Header set Cache-Control "max-age=2592000, public"
    </filesMatch>

    # PDF、文档 - 缓存1个月
    <filesMatch "\.(pdf|doc|docx|xls|xlsx)$">
        Header set Cache-Control "max-age=2592000, public"
    </filesMatch>
</IfModule>

# 备用Expires配置（如果mod_headers不生效）
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 month"
    # 图片、字体、视频
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/webp "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType image/x-icon "access plus 1 year"
    ExpiresByType video/mp4 "access plus 1 year"
    ExpiresByType application/font-woff2 "access plus 1 year"
    ExpiresByType application/font-woff "access plus 1 year"
    ExpiresByType font/ttf "access plus 1 year"
</IfModule>

3. 排查插件冲突 #

• WP Super Cache：进入插件设置，确保“禁止缓存页面”选项未勾选，在“高级”标签中确认“缓存静态文件”已开启。
• Autoptimize：在“静态资源”设置中，勾选“添加缓存头到静态资源”，确保CSS/JS文件生成时带有正确的缓存标识。
• 临时禁用所有缓存插件，测试响应头是否恢复正常，逐步排查哪个插件在输出no-cache头。

4. 测试验证 #

修改.htaccess后，清空浏览器缓存和WP Super Cache缓存，用Chrome DevTools的Network面板刷新页面：

• 查看静态资源的响应头，确认Cache-Control显示max-age=31536000（对应1年），且无no-cache标识。
• 检查Expires头是否为当前时间+缓存周期。

内容的提问来源于stack exchange，提问作者imthemoisturizer