NGINX gzip compression fix

Posted on Edited on In Disqus:

问题描述

NGINX 新部署的web 加载静态资源image速度慢的出奇.... 600

问题解决

web多且>1M, 大图片未压缩，拖慢了web 在浏览器的加载速度

服务端处理

  • 压缩图片 使用optipng 和 jpegoptim 压缩 png 、 jpg 图片。
1
2
3
4
5
6
7
# jpg compression 
find ./ *.jpg -exec jpegoptim --size=500k {} \;


# png compression 
find ./ *.png -exec optipng {} \;

  • config nginx gzip compression 在nginx.conf 的 http 模块部分增加gzip compression 相关配置：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    http { 
       
       #gzip config
        gzip  on;
        gzip_disable "msie6";
        gzip_vary on;
        gzip_proxied any;
        gzip_comp_level 6;
        gzip_buffers 16 8k;
        gzip_http_version 1.1;
        gzip_min_length 256;
        gzip_types
        application/atom+xml
        application/geo+json
        application/javascript
        application/x-javascript
        application/json
        application/ld+json
        application/manifest+json
        application/rdf+xml
        application/rss+xml
        application/xhtml+xml
        application/xml
        font/eot
        font/otf
        font/ttf
        image/svg+xml image/x-icon image/bmp image/png image/gif image/jpeg image/jpg
        text/css
        text/javascript
        text/plain
        text/xml;

    }

其它（可选）

  • 升级 NGINX 到 1.22 or new , 增加http2 配置提高网站并行速率

test

1
curl -H "Accept-Encoding: gzip" -I http://localhost//images/blue_owl_Llanganuco_min.png 
1
2
3
4
5
6
7
8
9
HTTP/1.1 200 OK
Server: nginx/1.25.3
Date: Sun, 31 Dec 2023 12:00:15 GMT
Content-Type: image/png
Last-Modified: Sun, 31 Dec 2023 11:07:31 GMT
Connection: keep-alive
Vary: Accept-Encoding
ETag: W/"65914b73-4541e2"
Content-Encoding: gzip

参考