Nginx缓存头信息设置（手把手教你优化网站加载速度）

在现代Web开发中，Nginx缓存设置是提升网站性能的关键一环。通过合理配置HTTP缓存头，可以让浏览器缓存静态资源（如图片、CSS、JS文件），从而减少重复请求，加快页面加载速度，减轻服务器压力。

Nginx缓存头信息设置（手把手教你优化网站加载速度） Nginx缓存设置 HTTP缓存头 浏览器缓存优化 静态资源缓存 第1张

什么是HTTP缓存头？

HTTP缓存头是服务器在响应客户端请求时，附加在HTTP响应头中的指令，用于告诉浏览器或其他中间代理如何缓存资源。常见的缓存头包括：

• Cache-Control：控制缓存行为（如 max-age、no-cache 等）
• Expires：指定资源过期的绝对时间
• ETag：资源的唯一标识，用于验证缓存是否仍有效

为什么需要配置Nginx缓存头？

默认情况下，Nginx不会自动为静态资源添加缓存头。这意味着每次用户访问你的网站，浏览器都会重新下载所有资源，即使这些资源没有变化。这不仅浪费带宽，还会导致页面加载变慢。通过配置浏览器缓存优化策略，你可以显著提升用户体验。

如何在Nginx中设置缓存头？

下面是一个简单而实用的配置示例。假设你希望对图片、CSS和JS文件设置长期缓存（例如30天）：

server {    listen 80;    server_name example.com;    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {        expires 30d;        add_header Cache-Control "public, immutable";    }}  

解释一下这段配置：

• location ~* \.(jpg|jpeg|...)：匹配所有以这些扩展名结尾的文件（不区分大小写）
• expires 30d;：设置Expires头为30天后，并自动设置Cache-Control的max-age
• add_header Cache-Control "public, immutable";：允许代理缓存，并标记资源为不可变（适用于带哈希文件名的资源）

进阶技巧：区分可变与不可变资源

对于经常变动的资源（如未加哈希的CSS/JS），建议使用较短的缓存时间或使用no-cache，让浏览器每次都验证资源是否更新。而对于带版本号或哈希值的静态资源（如app.a1b2c3.js），可以放心设置长期缓存，因为文件名变了就代表内容变了。

示例配置：

# 不可变资源（带哈希）location ~* \.[a-f0-9]{8}\.\.(css|js|png)$ {    expires 1y;    add_header Cache-Control "public, immutable";}# 可变资源location ~* \.(html|json)$ {    expires -1;    add_header Cache-Control "no-cache, no-store, must-revalidate";}  

验证缓存是否生效

配置完成后，重启Nginx：

sudo nginx -s reload

然后打开浏览器开发者工具（F12），切换到Network标签，刷新页面，点击任意静态资源，查看Response Headers中是否包含你设置的Cache-Control或Expires字段。

总结

通过合理配置静态资源缓存，你可以大幅提升网站性能和用户体验。记住：HTTP缓存头不是“开箱即用”的功能，需要你根据项目实际情况进行定制。希望这篇教程能帮助你轻松掌握Nginx缓存设置！

小贴士：缓存虽好，但记得在更新静态资源时使用版本号或哈希值，避免用户因缓存看不到最新内容哦！

来源：www.vpshk.cn