搞懂浏览器缓存：让网站速度翻倍的站长实操指南
你有没有遇过这种情况？第一次打开一个网站卡得你想退出，第二次点进去居然秒开？绝大多数情况，都是缓存的功劳。
很多新手做站，天天蹲在站长工具刷排名，调外链，就是不肯花半小时理一理缓存规则。太冤了！
说实话，浏览器缓存本质就是，浏览器提前把你网站的静态资源存在用户本地，下次打开直接用，不用再千里迢迢从你服务器拉一遍。
省了带宽，省了加载时间，双赢的事儿，为什么不做？
对做SEO的来说，缓存直接影响谷歌最看重的页面体验指标：LCP最大内容绘制、TTFB首字节时间，这两个不过关，排名根本上不去。我之前接的一个电商站客户，光产品图就有上百张，没配置缓存，每个用户每次打开都要拉七八兆的资源，服务器月月超流量，谷歌性能分才38，你说冤不冤？
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/7c467774-c483-4486-b8d9-f1c6a459cc9b.jpg
浏览器缓存有无资源加载速度对比图
浏览器缓存到底分哪几种？别搞混逻辑
很多人一听到缓存就觉得晕，其实核心就两类，运行逻辑完全不一样，搞懂顺序就不会错。
第一类是强缓存。
够直接吧？完全不跟你服务器打招呼，浏览器直接用本地存的资源，连请求都不发。这种效率是最高的。
那什么时候给强缓存？那些大半年甚至更久都不会变的资源啊，比如你网站的logo、通用的样式表、第三方引入的JS库，这些东西你半年都改不了一次，直接给强缓存，过期时间设一年都没问题，怎么爽怎么来。
控制强缓存的核心就是响应头里的Cache-Control: max-age=31536000，31536000秒就是一年，懂了吧？
有人会问，那我后来改了资源，用户一直用旧的怎么办？笨啊，打包的时候给文件名加个内容哈希不就完了？改了内容，文件名就变成app.832def.js，浏览器自然会拉新的，旧的就让它过期删掉，一点冲突都没有。
第二类就是协商缓存。
强缓存是有过期时间的，过期了之后，就会触发协商缓存。这个流程是，浏览器拿着本地存的文件标识，跑去问你的服务器：我这个旧文件，你那边改了没有？
服务器说没改，就回个304状态码，浏览器继续用本地的，连文件内容都不用重新传，省了大把时间。服务器说改了，就给你发新的资源，浏览器存下来下次用。
协商缓存常见的有两种实现，一种是Last-Modified + If-Modified-Since，靠修改时间比对；一种是ETag + If-None-Match，靠文件内容的唯一标识比对。说实话ETag更准一点，避免了修改时间不准导致的误判，有条件就开。
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/a6783abb-cc60-4053-9f66-4f86c65dd9de.jpg
浏览器缓存强缓存协商缓存执行流程图
不过话说回来，很多新手栽就栽在顺序搞反，要么就是全给协商缓存，每次打开都要请求服务器，跟没开缓存一样；要么就是给入口HTML开了一年强缓存，改了网站内容，用户大半个月都看不到更新，找你投诉你都不知道为什么。
实操配置：这么调缓存，性能分直接涨50分
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/e4a2a7d7-2565-4649-9ab7-b1e233dfee17.jpg
实操配置：这么调缓存，性能分直接涨50分
我做了快十年站，踩过的缓存坑比你吃过的外卖还多，给你整理出来直接用，不用自己试错。
第一条，不同资源分不同规则，绝对别一刀切。
记住这个死规则：永远不要给你的入口HTML文档开长时效强缓存。HTML是你网站的门面，你改个标题改个排版，HTML就变了，给它开一年缓存，用户永远看不到新内容。一般HTML给max-age=0，或者no-cache，让它每次都走协商缓存，就没问题。
那静态资源呢？图片、字体、CSS、JS，只要你做了内容哈希打包，直接给一年强缓存，没毛病，这些东西文件名变了才会拉新，根本不会出问题。
那些用户经常上传的内容，比如头像、商品图，也可以给缓存，大半年过期就行，真要更新用户自己会换文件名，不影响。
第二条，CDN缓存要和浏览器缓存规则对齐。
现在谁做站不用CDN？CDN相当于你的二级缓存，浏览器没命中，CDN命中了，也比回源拉快好几倍。别你浏览器给静态资源设了一年缓存，CDN给设成一天过期，那等于白给，还是天天回源，白浪费钱。
第三条，避开这几个常见的坑，都是我踩过的。
第一个坑，把no-cache和no-store搞混。很多人以为no-cache是不缓存，大错特错！no-cache是“用缓存之前必须跟服务器验证”，本质就是走协商缓存，不是不用缓存。真要完全不缓存才是用no-store，别搞混了，白瞎了缓存。
第二个坑，更新资源后用户看不到新内容。我刚做站那会，改了全站样式，结果用户打开还是旧的，我找了三天bug，才想起是我给CSS开了一年强缓存，又没加哈希，那时候不懂，只能让用户自己清缓存，太丢人了。现在打包工具都支持内容哈希，开了就完事儿，根本不会有这个问题。
第三个坑，觉得304状态码不好。很多人追求全200，觉得304是失败，完全错了。304响应体几乎是空的，体积才几百字节，比给你传整个几MB的文件快多了，对服务器压力也小，放心用就对了。
我上次给那个电商客户调完缓存，PageSpeed性能分直接从38涨到91，半个月后核心关键词排名涨了14位，转化率涨了快8个点，就是这么立竿见影。
你现在就可以打开Chrome开发者工具，看看自己网站的静态资源响应头，要是Cache-Control还是乱的，赶紧去改。这点功夫，比你发十条外链有用多了。 内容真实不做作，没有多余套路，都是实实在在的经验之谈。 看完楼主的分享感觉很有收获，感谢这么用心的整理，学到很多新知识。 逻辑严谨，条理分明，一看就是经过认真思考和整理的内容。 这个问题困扰我很久了，看了你的帖子终于有思路了，非常感谢。 很多细节都考虑到了，看得出来是真正懂行的人在认真分享。 感谢楼主带来这么好的内容，在论坛里能学到东西真的很开心。 已经推荐给朋友来看了，好东西就应该一起分享一起学习。 楼主态度很认真，回复也很耐心，这样的楼主值得大家支持。
页:
[1]