2026 年 6 月我们接手一个站，首页加载 4.2 秒，查下来是缓存配反了：HTML 缓存一年，JS 和 CSS 缓存五分钟。用户每次访问都在重新下载样式和脚本，而首页本身永远是他一年前看到的版本。
三层缓存各管什么
浏览器缓存管单个用户，决定他第二次访问要不要重新下载。
CDN 缓存管一个区域的所有用户，决定请求要不要回到源站。
服务端缓存管数据，决定每次请求要不要查数据库、拼页面。
三层都配好，一个老用户访问首页可以只发一次 HTML 请求，其余全命中。
浏览器缓存怎么配
带内容哈希的静态资源，缓存一年，加 immutable。文件名变了 URL 就变了，不用担心更新问题。
HTML 不缓存或者只缓存几分钟。它是入口，缓存久了用户看不到新内容。
字体和图片可以长缓存，但要确认 URL 带版本或者哈希。
CDN 缓存怎么配
关键是缓存键。默认按 URL 缓存，如果 URL 里带了没意义的参数，缓存会被打散。
动态页面要么不缓存，要么用短时间加回源校验。我们一般给 HTML 设 5 分钟，给接口设不缓存。
还有一点，回源要带压缩。很多站 CDN 到源站这段没开 gzip，白白多传几倍数据。
服务端缓存怎么配
页面级缓存最有效，整页存起来，命中直接返回。
对象缓存其次，把数据库查询结果存内存。
数据变了要能主动清缓存，否则内容更新了用户还看到旧的。我们通常用版本号做键，发布时改版本号，旧缓存自然失效。
最常见的三种配错
第一种，就是开头说的两层配反。判断方法很简单，看响应头的 Cache-Control，HTML 和静态资源必须不一样。
第二种，静态资源文件名没哈希却设了长缓存。发版之后用户还跑旧代码，出了问题很难查。
第三种，CDN 缓存了带用户信息的页面。这个更危险，A 用户可能看到 B 用户的数据。
怎么验证配对了
用 curl 看响应头，重点看 cache-control、etag、age、x-cache 四个字段。
age 大于 0 说明命中了 CDN，x-cache 显示 HIT 或 MISS。连续请求同一个静态资源两次，第二次应该全是 HIT。
再打开 DevTools 的 Network 面板，看 Size 列有没有 from cache。这一步最直观。
一个态度
缓存是性价比最高的性能优化。改配置不写代码，效果立竿见影。
但它也是最容易出事故的地方。每次改缓存策略，尤其是 HTML 和带用户信息的页面，一定要先在测试环境验证，别直接调到生产。
元析智能
为软件公司做 SEO 和 GEO 优化