preface

In “A guide to build a blog with VuePress + Github Pages”, we built a blog with VuePress. In “a detailed tutorial from buying a server to deploying the blog code”, we deployed the code to the server. TypeScript Chinese documents. Today we will learn how to enable Gzip compression for the server.

Gzip compression

For Gzip compression, refer to MDN:

Gzip is a file format for file compression and decompression. Based on the Deflate algorithm, it compresses files into smaller pieces for faster web transfers. Web servers and modern browsers generally support Gzip, which means that the server can automatically use Gzip to compress the file before sending it, and the browser can decompress the file when it receives it.

For us, Gzip can not only speed up the opening of the site, but also save traffic to the site. For example, I buy a server based on the use of traffic, so Gzip is saving money for myself.

Nginx and Gzip

Nginx has the ngx_HTTP_gzip_module module built in, which intercepts requests and compresses files that need Gzip compression. Since it is an internal integration, we only need to modify the configuration of Nginx to enable it directly.

#Log in to the serverSSH -v [email protected]
#Go to the Nginx directory
cd /etc/nginx

#Modify the Nginx configuration
vim nginx.conf
Copy the code

Add Gzip compression configuration to 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_ciphersECDHE-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;
        }
  	Here is the new Gzip configuration
  	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;
}
Copy the code

Here is a brief description of the configuration items involved. For more details, see the official Nginx documentation:

  1. Gzip: whether to enable the Gzip module. On: Enable the Gzip module. Off: disable the Gzip module
  2. Gzip_min_length: sets the minimum file size for compression. Files smaller than this value will not be compressed
  3. Gzip_comp_level: Compression level, ranging from 1 to 9. The default is 1. A higher number provides better compression, but also consumes more CPU time
  4. Gzip_types: file types for compression

Don’t forget to reload the Nginx configuration once you’re done:

systemctl reload nginx
Copy the code

validation

If the content-Encoding field in the response header is gzip, it indicates that Gzip is enabled successfully:

The second way is through the webmaster tool verification, open the webpage GZIP compression detection, enter the website, query:

The effect

Take the “Basics” section page as an example. Here is a screenshot before Gzip compression is enabled:

We can see that the transfer size is 2.2m and takes 14.53 seconds.

Here is a screenshot of Gzip compression enabled:

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

series

Blog Building is the only practical tutorial series I’ve written so far, explaining how to use VuePress to build a blog and deploy it on GitHub, Gitee, personal servers, etc.

  1. Build a blog with VuePress + GitHub Pages
  2. This article will teach you how to synchronize GitHub and Gitee code
  3. Can’t use GitHub Actions yet? Look at this article
  4. How does Gitee automatically deploy Pages? GitHub Actions again!
  5. A Linux command with an adequate front end
  6. A simple enough Nginx Location configuration explained
  7. A detailed tutorial from buying a server to deploying blog code
  8. A domain name from the purchase to record to resolve the detailed tutorial
  9. VuePress’s last updated date is set
  10. VuePress blog optimized to add statistics features
  11. VuePress blog optimized for HTTPS enabled

Wechat: “MQyqingfeng”, add me Into Hu Yu’s only readership group.

If there is any mistake or not precise place, please be sure to give correction, thank you very much. If you like or are inspired by it, welcome star and encourage the author.