Vuepress blog Optimization: turn on gzip compression

Time:2022-5-13

preface

stay“A blog with vuepress + GitHub pages”In, we used vuepress to build a blog“A detailed tutorial from buying a server to deploying blog code”Deploy our code to the server to see the final effect:Typescript Chinese document。 Today, let’s learn how to turn on gzip compression on the server.

Gzip compression

For gzip compression, refer to MDNintroduce

Gzip is a file format used for file compression and decompression. It is based on deflate algorithm, which can compress files smaller, so as to realize faster network transmission. Web servers and modern browsers generally support gzip, which means that the server can automatically use gzip to compress files before sending files, and the browser can decompress files when receiving files.

For us, opening gzip can not only improve the opening speed of the website, but also save website traffic. For example, the server I bought is paid according to the traffic. Opening gzip is saving money for myself.

Nginx and gzip

Nginx has NGX built in_ http_ gzip_ Module module, which will intercept requests and compress files that need gzip compression. Because it is an internal integration, we can start it directly by modifying the configuration of nginx.

#Login server
ssh -v [email protected]

#Enter nginx directory
cd /etc/nginx

#Modify nginx configuration
vim nginx.conf

Add gzip compression related configurations to the 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;
        }
              #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;
}

Here is a brief introduction to the meaning of the configuration items involved. More specifically, you can check the information in the official document of nginxexplain

  1. Gzip: whether to enable gzip module. On means on and off means off. The default is off
  2. gzip_ min_ Length: sets the minimum compressed file size. Files smaller than this setting will not be compressed
  3. gzip_ comp_ Level: compression level, from 1 to 9. The default value is 1. The larger the number, the better the compression effect, but it will also occupy more CPU time. Here is a common compromise value
  4. gzip_ Types: the type of file to compress

After modification, don’t forget to reload the nginx configuration:

systemctl reload nginx

verification

The first way is to directly view the network request, open the browser’s debugging tool and view itNetworkRequest, if the request response headerContent-EncodingField isgzip, which means gzip has been successfully opened:

Vuepress blog Optimization: turn on gzip compression

The second way is to verify through the webmaster tool and open itWeb gzip compression detection, enter the website to query:

Vuepress blog Optimization: turn on gzip compression

effect

We take“Foundation”Take the chapter page as an example. This is a screenshot before starting gzip compression:

Vuepress blog Optimization: turn on gzip compression

We can see that the transmission size is 2.2m and the time is 14.53s.

This is the screenshot after gzip compression is enabled:

Vuepress blog Optimization: turn on gzip compression

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

Series articles

Blog building series is the only practical series of tutorials I have written so far. It explains how to use vuepress to build a blog and deploy it to GitHub, gitee, personal server and other platforms.

  1. One takes you to build a blog with vuepress + GitHub pages
  2. An article teaches you to synchronize GitHub and gitee
  3. Can’t use GitHub actions yet? Look at this one
  4. How does gitee automatically deploy pages? Still use GitHub actions!
  5. A Linux command with sufficient front end
  6. A simple and sufficient explanation of nginx location configuration
  7. A detailed tutorial from buying a server to deploying blog code
  8. A detailed tutorial on domain name from purchase to filing to resolution
  9. How to set the last updated time of vuepress blog optimization
  10. Vuepress blog optimization adding data statistics function
  11. Opening HTTPS for vuepress blog optimization

Wechat: “mqyqingfeng”, add me to Yu Yu’s only reader group.

If there is any mistake or lack of preciseness, please be sure to correct it. Thank you very much. If you like it or have some inspiration, welcome star, which is also an encouragement to the author.