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.
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:
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：
- Gzip: whether to enable gzip module. On means on and off means off. The default is off
- gzip_ min_ Length: sets the minimum compressed file size. Files smaller than this setting will not be compressed
- 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
- gzip_ Types: the type of file to compress
After modification, don’t forget to reload the nginx configuration:
systemctl reload nginx
The first way is to directly view the network request, open the browser’s debugging tool and view it
NetworkRequest, if the request response header
gzip, which means gzip has been successfully opened:
The second way is to verify through the webmaster tool and open itWeb gzip compression detection, enter the website to query:
We take“Foundation”Take the chapter page as an example. This is a screenshot before starting 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:
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.
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.
- One takes you to build a blog with vuepress + GitHub pages
- An article teaches you to synchronize GitHub and gitee
- Can’t use GitHub actions yet? Look at this one
- How does gitee automatically deploy pages? Still use GitHub actions!
- A Linux command with sufficient front end
- A simple and sufficient explanation of nginx location configuration
- A detailed tutorial from buying a server to deploying blog code
- A detailed tutorial on domain name from purchase to filing to resolution
- How to set the last updated time of vuepress blog optimization
- Vuepress blog optimization adding data statistics function
- 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.