VuePress blog optimization turns on Gzip compression

foreword

In "A Guide to Build a Blog with VuePress + Github Pages" , we used VuePress to build a blog, in "A Detailed Tutorial from Buying a Server to Deploying Blog Code" , we deployed the code to On the server, check the final effect: TypeScript Chinese document . Today we will learn how to enable Gzip compression on the server.

Gzip compression

Regarding Gzip compression, quoting MDN introduces :

Gzip is a file format used for file compression and decompression. It's based on the Deflate algorithm, which compresses files to smaller sizes for faster network transfers. Web servers and modern browsers generally support Gzip, which means that the server can automatically compress the file with Gzip before sending it, and the browser can decompress the file itself when it is received.

For us, turning on Gzip can not only improve the opening speed of the website, but also save website traffic. For example, the server I purchased is paid according to the traffic used, and turning on Gzip is saving money for myself.

Nginx and Gzip

Nginx has a built-in ngx_http_gzip_module module, which intercepts requests and compresses files that need to be Gzip compressed. Because it is an internal integration, we can open it directly by modifying the configuration of Nginx.

# 登陆服务器
ssh -v [e-mail]

# 进入 Nginx 目录
cd /etc/nginx

# 修改 Nginx 配置
vim nginx.conf

Add Gzip compression related configuration in server:

server {
        listen 443 ssl;
        server_name ts.yayujs.com;
        ssl_certificate cert/6982037_ts.yayujs.com.pem;
        ssl_certificate_key cert/6982037_ts.yayujs.com.key;
        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
        ssl_prefer_server_ciphers on;
        location ^~ /learn-typescript/ {
                alias /home/www/website/ts/;
        }
        location / {
                alias /home/www/website/ts/;
                index index.html;
        }
              # 这里是新增的 gzip 配置
              gzip on;
              gzip_min_length 1k;
              gzip_comp_level 6;
              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 text/css text/javascript text/plain text/xml;
}

Here is a brief introduction to the meaning of the configuration items involved. For more details, you can check the explanation in the official Nginx documentation:

1. gzip : whether to open the gzip module on means open off means close, the default is off
2. gzip_min_length: Set the minimum file size for compression, files smaller than this setting value will not be compressed
3. gzip_comp_level: Compression level, from 1 to 9, the default is 1. The larger the number, the better the compression effect, but it will take up more CPU time. Here is a common compromise value.
4. gzip_types: file types to be compressed

After modification, don't forget to reload Nginx configuration once:

systemctl reload nginx

verify

The first way is to directly view the network request, open the debugging tool of the browser, and view the Network request. If the Content-Encoding field of the gzip , it means that Gzip is successfully enabled:

The second way is to verify through the webmaster tool, open the webpage GZIP compression test , enter the website, and query:

Effect

Let's take the "Basic" chapter page as an example, this is a screenshot before Gzip compression is enabled:

We can see that the transfer size is 2.2M and it takes 14.53s.

Here's a screenshot with Gzip enabled:

We can see that the transfer size is 526 K, and the time is 1.27s. We can see that the resource size and loading speed have been greatly improved.

series of articles

The blog building series is the only series of practical tutorials I have written so far, explaining how to use VuePress to build a blog and deploy it to GitHub, Gitee, personal servers and other platforms.

1. An article that takes you to build a blog with VuePress + GitHub Pages
2. An article teaches you how to synchronize GitHub and Gitee code
3. will not use GitHub Actions yet? Check out this
4. How does Gitee automatically deploy Pages? Or use GitHub Actions!
5. A front-end Linux command
6. A simple and sufficient Nginx Location configuration explanation
7. A detailed tutorial from purchasing a server to deploying blog code
8. A detailed tutorial of domain name from purchase to filing to resolution
9. VuePress blog optimization last updated How to set the last update
10. add data statistics blog optimization of VuePress
11. VuePress blog optimization to open HTTPS

WeChat: "mqyqingfeng", add me to the only readership of Xianyu.

If there are any mistakes or inaccuracies, please be sure to correct me, thank you very much. If you like or have inspiration, welcome to star, which is also an encouragement to the author.