Nginx静态资源缓存优化实战:一键配置Cache-Control实现网站极速加速

3

一、为什么静态资源缓存至关重要

网站性能直接影响用户体验与搜索引擎排名。Nginx作为高性能Web服务器,通过合理配置Cache-Control响应头,可让浏览器在本地缓存静态文件,大幅减少重复请求、降低服务器带宽消耗。本文提供一套可直接落地的max-age=31536000(即1年)缓存方案。

二、静态资源类型全清单

以下扩展名文件均属于可长期缓存的静态资源,不同类别之间用逗号分隔:

  • 图片:.jpg, .jpeg, .png, .gif, .svg, .webp, .avif, .ico, .bmp, .apng, .heic, .heif, .tiff, .tif

  • 字体:.woff2, .woff, .ttf, .otf, .eot

  • 样式:.css, .less, .scss, .sass, .styl

  • 脚本:.js, .mjs, .jsx, .ts, .tsx, .wasm

  • 视频:.mp4, .webm, .ogv, .mov, .mkv, .avi, .flv, .f4v, .m3u8, .ts

  • 音频:.mp3, .ogg, .oga, .wav, .aac, .flac, .m4a, .opus, .weba

  • 文档:.pdf, .txt, .epub, .csv

  • 数据配置:.json, .xml, .yaml, .yml, .toml, .ini, .map

  • 压缩包:.zip, .rar, .7z, .tar, .gz, .tgz, .bz2, .xz

  • 其他:.webmanifest

注意:.html, .htm, .php, .asp, .jsp 及动态接口(.json/.xml 动态输出)不应长期缓存,否则用户将无法及时看到内容更新。

三、核心配置方案:双location策略

针对JS/CSS文件既有带Hash版本(如app.a3f2b1c.js)又有不带Hash版本的情况,采用分离策略最为安全:

3.1 图片/媒体/字体/文档(可加immutable)

location ~* \.(jpg|jpeg|png|gif|svg|webp|avif|ico|bmp|swf|woff2|woff|ttf|otf|eot|mp4|webm|ogv|mp3|ogg|wav|aac|flac|opus|weba|pdf|zip|gz|bz2|xz|webmanifest|map|wasm)$ {
    expires 1y;
    add_header Cache-Control "public, max-age=31536000, immutable";
    access_log off;
    log_not_found off;
}

3.2 JS/CSS/MJS(不加immutable,整合防盗链)

location ~* \.(js|css|mjs)$ {
    expires 1y;
    add_header Cache-Control "public, max-age=31536000";
    access_log off;
    log_not_found off;
    
    valid_referers none blocked yourdomain.com www.yourdomain.com;
    if ($invalid_referer) {
        return 404;
    }
}

关键区别:带Hash的文件名配合immutable指令后,浏览器在缓存期内永不会重新验证;而不带Hash的JS/CSS若加immutable,更新后用户可能永远看不到新版本,因此仅保留max-age=31536000

四、多站点统一配置模板

以下配置适用于Z-Blog、WordPress及反向代理(Go后端)等各类站点。将原有分散的expires 30d段统一替换为上述双location方案即可。

4.1 PHP站点(如Z-Blog)配置位置

在主server块内、location /之前插入静态资源缓存段。需删除原配置中可能冲突的旧缓存段(如图片expires 30d、字体expires 30d、防盗链分离段等),避免Nginx location匹配冲突。

4.2 反向代理站点(如Go后端)配置位置

对于proxy_pass到127.0.0.1的站点,将静态资源location放在location /之前。Nginx会优先直接服务匹配到的静态文件,不再转发到后端端口,可显著降低后端压力。

4.3 referer防盗链域名填写规则

valid_referers后应填写该站所有有效域名,包括主站及跳转用的旧域名,例如:

  • www.aiqixie.com 主站:填写 www.aiqixie.com aiqixie.com

  • dh.ally.ren 主站:填写 dh.ally.ren dh.aiqixie.com

  • wangzhi.aiqixie.com 主站:填写 wangzhi.aiqixie.com www.wangzhi.best wangzhi.best wangzhi.ally.ren

五、配置验证方法

修改保存并重载Nginx后,通过curl命令检查响应头:

curl -I https://www.yourdomain.com/style.css
curl -I https://www.yourdomain.com/logo.png

预期应看到:

  • JS/CSS:Cache-Control: public, max-age=31536000

  • 图片等:Cache-Control: public, max-age=31536000, immutable

  • 同时存在:Expires: [当前时间+1年]

六、重要注意事项

  • 资源更新策略:不带Hash的CSS/JS更新时,可通过修改URL参数(如style.css?v=2)强制浏览器刷新。

  • 跨域字体:如字体文件被CDN或其他域名引用,需在字体location中增加add_header Access-Control-Allow-Origin *;

  • 日志关闭:静态资源建议access_log off,减少磁盘I/O开销。

  • 安全头保留:缓存配置不影响原有的X-XSS-Protection、X-Content-Type-Options等安全响应头。

七、总结

通过Nginx的Cache-Control: max-age=31536000配置,可将静态资源缓存周期从默认的30天提升至1年,配合immutable与防盗链策略,既能大幅削减服务器负载、提升页面加载速度,又能有效保护资源不被恶意盗用。对于拥有多个子站的服务器环境,采用统一的location模板进行标准化部署,是最稳妥的运维方案。

网友评论

访客信息

你已经3分钟没有访问该网站

这些可能是你需要的内容: