你点开自己网站，第二次、第三次访问还是卡顿？别急着骂服务器——大概率是缓存没设对。我上周帮一个做母婴电商的朋友调缓存，他首页首屏已经压到1秒内了，但用户加完购物车再返回首页，居然又卡了3秒。查完才发现：所有静态资源的缓存时间被他手动设成了0。
你的网站第二次访问还慢，问题出在哪？
很多人把精力全砸在“第一次打开快不快”上，却忘了用户80%的点击，其实是回访。
那个母婴电商朋友就是典型：CSS、JS、Logo图全都没缓存。用户每次回来，浏览器都当全新页面处理，重新下载、解析、执行一遍——等于把第一次的加载流程又走了一遍。
缓存不是越久越好，也不是越多越好。关键是分清：哪些东西几个月都不变（比如网站Logo、通用按钮样式、jQuery库），哪些东西分钟级就在变（比如库存数、促销倒计时）。
前者放心缓存一年；后者要么不缓存，要么只缓存几秒。
3个让缓存生效的配置技巧
1. 用Cache-Control控制缓存时长
HTTP响应头里的Cache-Control，是你最该盯住的开关。别再用Expires了，它依赖服务器时间，容易出错。
比如给Logo图加这行：
Cache-Control: public, max-age=31536000
意思是：“这个文件一年内不用重下”。适合字体、图标、基础CSS这类几乎不变的资源。
但注意：如果文件内容变了，而文件名没变，浏览器照旧用旧缓存。这时候就得靠下一个技巧补救。
2. 文件名带版本号或哈希值
改了style.css，但名字没动？那99%的用户根本看不到新样式——浏览器直接从本地缓存读旧文件。
解决办法很简单：把style.css改成style.v2.css，或者更稳妥的style.a1b2c3.css（构建工具自动生成哈希）。内容一变，文件名就变，浏览器自然当成新资源去拉。
我之前见过一个团队，上线新首页后用户集体反馈“布局错乱”，折腾两天才发现是CSS没更新。最后加了一行哈希配置，5分钟搞定。
3. 用ETag做精准校验
ETag相当于给每个文件打了个唯一指纹。浏览器第一次下载后存下这个指纹；下次请求时带上它，服务器比对一下：指纹没变，就返回304 Not Modified，浏览器直接用本地缓存。
这对头像、用户资料页这类“偶尔更新但大部分时间不变”的资源特别管用。比单纯靠时间判断的Last-Modified更准。
动态内容怎么缓存？试试“边缘缓存”
你说：“我们天天发新文章，缓存了不就显示旧内容？”
——那就别缓存整页，只缓存“不变的部分”。
比如新闻站的文章页：正文发布后基本不动，但评论、阅读数、相关推荐是实时的。你可以让CDN只缓存HTML主体15分钟，其余模块用JavaScript异步加载。
实际效果是：用户点进来秒开正文，评论框稍晚半秒弹出来。既保了速度，又没丢实时性。
我帮一个本地生活资讯站做过类似调整，他们首页HTML原来每次都要后端渲染，现在CDN节点直接吐缓存页，重复访问速度明显提升。
浏览器缓存 vs 服务器缓存，到底该用哪个？
一句话分清：
- 浏览器缓存 → 管图片、CSS、JS这些“扔给用户就不管了”的静态文件；
- 服务器缓存 → 管首页HTML、商品列表API这些“每次都要后端算一算”的动态内容。
前者靠HTTP头（比如Cache-Control）就能搞定；后者得在代码里动手，比如用Redis存好渲染好的首页HTML，过期时间设成和数据更新节奏一致——活动页每小时刷新一次数据，缓存就设60分钟。
有个做节日促销页的客户，高峰期QPS一上来就504。加了Redis缓存首页后，数据库压力大幅下降，页面响应也稳了。
缓存没生效？排查这3个地方
配置写了，但速度没起来？先看这三个地方：
1. 浏览器开发者工具里的缓存状态
Chrome DevTools → Network 面板 → 刷新页面 → 看“Size”列。
✅ 显示 from memory cache 或 from disk cache → 缓存成功
❌ 显示具体字节数（比如 24.5 KB）→ 没走缓存
常见原因：漏加Cache-Control，或者写成了no-cache/no-store。
2. 检查是不是有中间代理在覆盖你的设置
有些CDN、WAF或反向代理会悄悄把你设的Cache-Control: private改成public，导致用户登录态被错误缓存。
去你正在用的CDN后台翻一翻，找“缓存策略”或“强制缓存”开关，关掉它。或者加个Vary: Cookie头，告诉代理：“别混着缓存，带Cookie的请求单独存”。
3. 检查HTTPS配置是否完整
用了HTTPS但证书链不全？浏览器每次都要重新验证，缓存形同虚设。
确认你的证书由可信CA签发，且中间证书已正确部署。顺手开一下HTTP/2——它能让多个资源并行传输，和缓存搭配效果更好。
我见过有人用Let’s Encrypt免费证书但漏配中间链，结果缓存完全不生效。换了个完整证书包，问题当场消失。
今天就能执行的1个操作
打开你网站的首页，用Chrome开发者工具（F12）切到Network面板，刷新页面。
→ 找出所有静态资源（特别是logo.png、fonts.woff2、common.css这类）
→ 点开它们的响应头，看有没有Cache-Control，以及max-age是不是小于3600
如果有资源没设，或者max-age太小：
- 登录你正在用的服务器管理后台（比如宝塔、cPanel，或是Nginx/Apache配置文件）
- 给这些资源加上：
Cache-Control: public, max-age=31536000
- 同时把文件名改成带版本号的，比如
logo.png→logo_v2.png - 清空浏览器缓存（Ctrl+Shift+R 强刷），再访问一次
你会看到那些资源的Size栏变成 from disk cache，第二次加载几乎不耗时。
今晚花15分钟，明天回访用户就感受到差别。