前言

每次访问网站都要重新下载图片、CSS、JS？太浪费了！配置Nginx静态资源缓存，让浏览器本地缓存这些文件，下次访问直接从本地读，速度快好几倍。

一、什么是浏览器缓存

浏览器访问网站后，把图片、CSS、JS等静态文件存在本地。下次再访问，直接从本地读，不用再从服务器下载。

好处：

• 加载更快
• 省带宽
• 减轻服务器压力

二、配置静态资源缓存

打开Nginx配置文件，在server段加：

location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
    expires 30d;
    add_header Cache-Control "public, no-transform";
}

参数解释

不同文件缓存时间

# 图片缓存30天
location ~* \.(png|jpg|jpeg|gif|ico|svg)$ {
    expires 30d;
}

# CSS/JS缓存7天
location ~* \.(css|js)$ {
    expires 7d;
}

# HTML不缓存（保证更新及时）
location ~* \.html$ {
    expires -1;
}

三、验证配置

nginx -t

重载Nginx：

nginx -s reload

四、验证是否生效

方法1：curl测试

curl -I https://www.0454.wang/static/logo.png

看到响应头有：

Cache-Control: max-age=2592000
Expires: ...

就是生效了。

方法2：浏览器F12

按F12 → Network → 点图片请求 → 看Response Headers：

Cache-Control: max-age=2592000

五、缓存更新策略

问题： 缓存了30天，但我更新了图片怎么办？

方法1：文件名加版本号

<img src="/logo.png?v=20240101">

浏览器看到文件名变了，就会重新下载。

方法2：文件名加hash

<img src="/logo.abc123.png">

构建工具自动加hash，内容变了hash就变。

六、常见坑

坑1：HTML也被缓存了

问题： 更新了网站内容，但用户看到的还是旧的。

解决： HTML不缓存

location ~* \.html$ {
    expires -1;
}

坑2：缓存时间太长

问题： 图片更新了，用户30天都看不到新的。

解决： 用版本号或hash。

坑3：CDN缓存了旧文件

问题： Nginx配置了，但CDN没刷新。

解决： 去CDN后台刷新缓存。

坑4：没加expires就没缓存

问题： 配置了但不生效。

检查： 看location有没有匹配到。

七、完整配置示例

server {
    listen 80;
    server_name www.0454.wang;
    root /var/www/html;

    # HTML不缓存
    location ~* \.html$ {
        expires -1;
    }

    # 图片缓存30天
    location ~* \.(png|jpg|jpeg|gif|ico|svg)$ {
        expires 30d;
        add_header Cache-Control "public";
    }

    # CSS/JS缓存7天
    location ~* \.(css|js)$ {
        expires 7d;
        add_header Cache-Control "public";
    }
}

八、缓存时间怎么设

九、怎么清除缓存

浏览器端

• 强制刷新：Ctrl + F5
• 清除浏览器缓存

服务器端

• 更新文件名版本号
• 重载Nginx

总结

记住：

1. 静态资源加缓存，提升速度
2. 图片缓存30天
3. CSS/JS缓存7天
4. HTML不缓存
5. 更新了就改文件名版本号
6. 用curl验证是否生效

最常用配置：

location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    expires 30d;
    add_header Cache-Control "public";
}

遇到问题加QQ23979811 协助处理

前言

网站打开慢？带宽不够？开启Nginx的Gzip压缩，能把文件体积压缩70%以上，加载速度立马提升好几倍。本文讲怎么配置。

一、什么是Gzip

Gzip是一种压缩算法，Nginx在发给浏览器之前先把文件压缩，浏览器收到后自动解压。

效果：

• HTML/CSS/JS文件压缩70%左右
• 减少带宽
• 加载更快

二、配置Gzip

打开Nginx配置文件：

vi /etc/nginx/nginx.conf

在http段里加：

gzip on;
gzip_min_length 1k;
gzip_comp_level 6;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;
gzip_vary on;
gzip_buffers 16 8k;
gzip_http_version 1.1;

参数解释

压缩级别说明

推荐用6，不要用9，太吃CPU。

三、验证配置

nginx -t

重载Nginx：

nginx -s reload

四、验证是否生效

方法1：curl测试

curl -I -H "Accept-Encoding: gzip" https://www.0454.wang/

看到响应头有：

Content-Encoding: gzip

就是生效了。

方法2：浏览器F12

按F12打开开发者工具 → Network → 点请求 → 看Response Headers：

Content-Encoding: gzip

五、哪些文件该压缩

该压缩的

• HTML文件
• CSS文件
• JS文件
• JSON数据
• SVG图片

不该压缩的

• 图片（jpg/png）：本身已经压缩过了
• 视频：太大，压缩没意义
• 压缩包（zip/rar）：已经压缩过了

六、常见坑

坑1：只在http段配了，但server段覆盖了

检查： 看server段有没有gzip off。

坑2：gzip_types没写全

问题： JS文件没压缩。

解决： 加上application/javascript。

坑3：压缩级别太高

问题： 用了9，CPU飙升。

解决： 改成6。

坑4：CDN缓存了旧文件

问题： 配置了gzip但CDN没生效。

解决： 刷新CDN缓存。

七、完整配置示例

http {
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 6;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;
    gzip_vary on;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;

    server {
        listen 80;
        server_name www.0454.wang;
        root /var/www/html;
        index index.html;
    }
}

八、对比效果

没开Gzip

HTML文件：100KB

开了Gzip

HTML文件：25KB

省了75%！

总结

记住：

1. 开启gzip on
2. 压缩级别用6
3. gzip_types要写全
4. 图片不要压缩
5. 用curl验证是否生效

最常用配置：

gzip on;
gzip_min_length 1k;
gzip_comp_level 6;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
gzip_vary on;

遇到问题加QQ23979811 协助处理

前言

网站打开慢？Nginx 开个 gzip 压缩，能把传输体积压缩 70% 以上，用户打开快很多，还省带宽。对 SEO 也有帮助。

什么是 gzip 压缩

gzip 是一种压缩算法。Nginx 把 HTML、CSS、JS 等文本文件压缩后再发给浏览器，浏览器收到后自动解压。

比如一个 100KB 的 CSS 文件，压缩后可能只有 20KB。

配置方法

在 Nginx 配置文件里加 gzip 相关配置。

基础配置

gzip on;
gzip_min_length 1k;
gzip_comp_level 6;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_vary on;

完整示例

server {
    listen       80;
    server_name  www.example.com;

    root  /var/www/html;
    index index.html;

    # gzip 压缩
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 6;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_vary on;
}

参数说明

测试是否生效

方法一：浏览器 F12

打开浏览器开发者工具 → Network → 点一个 CSS/JS 文件 → 看 Response Headers 里有没有：

Content-Encoding: gzip

有就说明生效了。

方法二：curl 命令

curl -I -H "Accept-Encoding: gzip" https://www.example.com/style.css

看返回头里有没有 Content-Encoding: gzip。

常见坑

坑1：图片也压缩

配置里把图片类型也加上了。

问题： 图片（jpg/png）本身已经是压缩过的格式，再 gzip 没意义，还浪费 CPU。

解决： 只压缩文本文件，图片不用压。

坑2：压缩级别太高

设成了 9，以为压缩越狠越好。

问题： 级别太高会占用更多 CPU，压缩时间长，反而拖慢响应。

解决： 用 6 就够了，性价比最高。

坑3：PHP 页面没压缩

HTML 压缩了，但 PHP 输出的页面没压缩。

原因： PHP 页面已经被 PHP-FPM 压缩过了，Nginx 不会再压。

解决： 不用管，PHP 那边自己处理就行。

坑4：CDN 后面 gzip 不生效

用了 CDN，回源开了 gzip，但用户那边没压。

原因： CDN 回源拿的是压缩后的文件，CDN 缓存了。

解决： 刷新 CDN 缓存，或者 CDN 那边也开 gzip。

总结

开 gzip 就这几行配置：

gzip on;
gzip_min_length 1k;
gzip_comp_level 6;
gzip_types text/plain text/css application/json application/javascript;
gzip_vary on;

记住： 文本文件压，图片别压；压缩级别用 6 就行。

遇到问题加QQ23979811 协助处理

前言

网站加载慢，很大原因是没开压缩。CSS、JS 文件动辄几百 KB，开了 gzip 之后能压缩到原来的 1/3，加载速度提升明显。本文就讲一下怎么在 Nginx 里配置 gzip 压缩。

为什么要开 gzip

举个例子：

• 一个 CSS 文件原始大小 100KB
• 开了 gzip 之后变成 20KB
• 传输体积减少 80%

浏览器收到压缩内容后自动解压，用户无感知。

基础配置

在 nginx.conf 的 http 块里加上：

http {
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;
    gzip_min_length 1k;
    gzip_comp_level 6;
    gzip_vary on;
}

配置项说明

gzip on：
开启 gzip 压缩。

gzip_types：
哪些类型的文件需要压缩。

• text/plain：文本
• text/css：CSS
• application/json：JSON
• application/javascript：JS
• image/svg+xml：SVG 图片

gzip_min_length：
小于 1KB 的文件不压缩（压缩本身也占 CPU，小文件不值得压）。

gzip_comp_level：
压缩级别，1 到 9，6 比较合适（越大压得越狠，但越占 CPU）。

gzip_vary on：
给响应头加 Vary: Accept-Encoding，告诉 CDN 和缓存，这个内容是压缩过的。

完整示例

http {
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;
    gzip_min_length 1k;
    gzip_comp_level 6;
    gzip_vary on;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
}

检查并重载

nginx -t
systemctl reload nginx

验证 gzip 是否生效

用 curl 测试

curl -H "Accept-Encoding: gzip" -I https://www.example.com

如果返回头里有：

Content-Encoding: gzip

说明 gzip 生效了。

用浏览器 F12 测试

打开浏览器 F12 → Network → 点一个 JS/CSS 文件 → Response Headers，看有没有 Content-Encoding: gzip。

注意事项

不要压缩图片

JPG、PNG 这些图片本身已经是压缩过的，再压 gzip 没什么效果，还浪费 CPU。所以 gzip_types 里不要加 image/jpeg、image/png 这些。

不要压缩太小的文件

太小的文件（比如小于 1KB）压缩完反而可能变大，所以用 gzip_min_length 过滤掉。

压缩级别不要太高

gzip_comp_level 设到 9 没意义，压不了多少，CPU 占用还高。6 就够了。

常见坑

坑1：开了 gzip 但没生效

配置写了，但浏览器看到的还是没压缩的。

排查：

1. 看文件大小是不是小于 gzip_min_length
2. 看 gzip_types 里有没有包含这种类型
3. 看浏览器请求头里有没有 Accept-Encoding: gzip

坑2：HTML 没压缩

只压缩了 CSS 和 JS，HTML 没压缩。

原因： gzip_types 里没写 text/html。

注意： text/html 是默认就压缩的，不用写在 gzip_types 里。

坑3：CDN 缓存了没压缩的版本

开了 gzip，但 CDN 上缓存的还是旧的没压缩的文件。

解决： 清一下 CDN 缓存，或者等 CDN 自动更新。

总结

gzip 配置很简单，就几行：

开了 gzip 网站加载速度立马快一截，零成本优化，一定要开。

遇到问题加QQ23979811 协助处理