CDN缓存命中率提升技巧，CMS静态资源优化

CDN缓存命中率低通常不是CDN本身的问题，而是缓存规则、资源URL和CMS输出方式没有对齐。
本文面向零基础站长和运维，讲清如何把CMS静态资源交给CDN长期缓存，并通过缓存规则和URL版本化把命中率稳定提上去。

先确认哪些资源该被CDN缓存

动手改配置前，先打开浏览器开发者工具，切到 Network 面板，刷新首页并勾选 Disable cache。
按 Size 排序，重点看图片、CSS、JS、字体文件的响应头。

如果 X-Cache 或 X-Cache-Status 显示 MISS，说明该请求回源了。
常见原因是文件没有带版本号、CDN缓存规则只匹配了部分后缀，或者CMS把静态资源走了动态PHP路径。

适合长期缓存的资源包括：

• 图片：.jpg、.png、.webp、.gif、.svg
• 样式和脚本：.css、.js
• 字体：.woff、.woff2、.ttf
• 媒体：.mp4、.mp3

HTML 页面本身不建议长期缓存，否则CMS更新后用户看不到新内容。

在CDN侧配置可命中的缓存规则

以常见CDN控制台为例，进入域名管理，找到缓存配置或缓存规则。
核心思路是：静态资源按后缀设置长缓存，动态接口和HTML设置不缓存或短缓存。

推荐规则示例：

.jpg,.jpeg,.png,.gif,.webp,.svg,.css,.js,.woff,.woff2,.ttf,.mp4,.mp3  缓存 30 天
.html,.htm  缓存 10 分钟或遵循源站
/api/*,/admin/*  不缓存

如果CDN支持自定义缓存键，把查询字符串中的版本参数纳入缓存键，例如 ?
v=20250101。
这样CMS更新资源后，URL变化会生成新缓存，旧缓存自然淘汰。

注意：缓存时间不要设成永久，建议30天左右。
图片和字体可以更长，CSS和JS建议配合版本号，避免用户拿到旧样式。

让CMS输出带版本号的静态资源路径

很多CMS默认输出 /static/css/style.css，没有版本参数，CDN只能按固定URL缓存。
一旦文件内容更新，用户和CDN都可能继续用旧缓存。

以常见CMS模板为例，把静态资源引用改成带版本号的形式：

如果CMS支持模板变量，可以用发布时间或文件修改时间生成版本号。
例如在模板中调用 {$config.version} 或 {date('Ymd')}。
这样每次发布新版本，URL自动变化，CDN会重新回源拉取。

对于WordPress，可以在主题的 functions.php 中用 filemtime() 给资源加版本：

wp_enqueue_style('theme-style', get_stylesheet_uri(), array(), filemtime(get_template_directory() . '/style.css'));

把CMS附件和静态目录分离到独立域名

如果CMS的图片和附件和网站主域名共用，CDN缓存规则容易和动态请求混在一起。
更稳妥的做法是给静态资源单独一个子域名，例如 static.example.com，并在CDN上为这个子域名单独配置缓存策略。

操作步骤：

1. 在DNS添加 static 子域名，CNAME指向CDN提供的加速域名。
2. 在CDN控制台添加该子域名，源站指向服务器IP或CMS附件目录。
3. 在CMS后台把附件URL前缀改成 https://static.example.com。
4. 确认Nginx或Apache能正确响应静态文件请求。

Nginx参考配置：

server {
    listen 80;
    server_name static.example.com;
    root /www/wwwroot/cms/uploads;
    location ~* \.(jpg|jpeg|png|gif|webp|css|js|woff2?|ttf|mp4)$ {
        expires 30d;
        add_header Cache-Control "public, max-age=2592000";
    }
}

改完后重启Nginx：nginx -t && systemctl reload nginx。

验证命中率和回源流量变化

配置完成后不要只看感觉，要用数据验证。

在浏览器开发者工具中刷新页面，查看静态资源的响应头。
理想情况下应看到：

• X-Cache: HIT 或 X-Cache-Status: HIT
• Cache-Control: public, max-age=2592000
• Age 大于0，说明命中了CDN缓存

在CDN控制台的流量分析或命中率报表中，观察静态资源命中率是否上升。
通常图片和字体命中率会最先改善，CSS和JS需要等版本号生效后逐步提升。

如果命中率仍然偏低，检查三个点：

• 资源URL是否每次请求都带随机参数，例如 ?t=时间戳，这会导致缓存键不断变化。
• CDN缓存规则是否漏掉了某些后缀，例如 .webp 或 .woff2。
• 源站是否返回了 Cache-Control: no-cache 或 private，覆盖了CDN设置。

容易踩坑的细节

不要对HTML页面设置长缓存，否则CMS发布新文章后用户可能看不到。

不要忽略移动端和PC端模板差异，如果两套模板引用同一资源但版本号不同，命中率会被拉低。

修改缓存规则后，建议先刷新CDN缓存，再刷新浏览器强制加载，避免旧缓存干扰验证。

如果使用宝塔面板，可以在网站设置中找到配置文件，直接编辑Nginx配置；
CDN侧规则仍在CDN控制台设置，两者要配合使用。

常见疑问

CDN缓存命中率提升后，CMS后台更新内容会受影响吗？

只要HTML不设置长缓存，CMS后台和前台文章页仍会回源获取最新内容。
静态资源更新后通过版本号触发新缓存即可。

为什么图片命中率很高，CSS和JS命中率却很低？

常见原因是CSS和JS没有带版本号，或者URL中带了随机查询参数。
给资源加固定版本号并去掉随机参数后，命中率会明显改善。

缓存时间设置多久比较合适？

图片、字体、视频可以设置30天或更长；
CSS和JS建议配合版本号设置30天；
HTML建议10分钟或遵循源站。
具体以CDN控制台实际可选项为准。

如果命中率还是上不去，优先检查CDN缓存键是否包含了每次变化的参数，以及源站响应头是否覆盖了CDN缓存策略。