共計 4136 個字符,預計需要花費 11 分鐘才能閱讀完成。
nginx 如何開啟 gzip 來壓縮網頁文件提高網站速度? 要知道網站的打開速度取決于瀏覽器打開下載的網頁文件大小。如果傳輸的頁面內容文件減少,那你網站的打開速度一定會加快。特別是手機端的用戶,打開網站速度受限于移動端網絡,所以壓縮網站頁面內容顯得至關重要。
gzip 是一種非常流行的數據壓縮方式。你可以在 nginx 配置中開啟 gzip 來壓縮網頁文件。然后,這些文件又由瀏覽器解壓縮,文件不會受任何。但是壓縮文件是會占用服務器資源,所以最好壓縮那些效果比較好的文件。比如文本文件壓縮效果非常好,通常會縮小兩倍多。而 JPG 或 PNG 這類文件,本身就已經進行格式壓縮,所以再做二次壓縮,效果并不是特別明顯。
本文主要講一下如何配置 nginx 來開啟 gzip 壓縮。
環境:
ubuntu 20.04 服務器
root 權限或具有 sudo 特權的非 root 用戶
一、創建測試文件
在這一步中,我們將在默認的 Nginx 目錄中創建幾個測試文件。稍后我們將使用這些文件來檢查 Nginx 的默認行為是否進行 gzip 壓縮,并測試配置更改是否具有預期的效果。
首先,創建幾個測試文件,這些文件主要用來查看我們的 gzip 壓縮效果。gzip 是不會分析文件內容的,它主要通過文件擴展名來判斷文件類型,如果還分析文件內容,那整個效率就會大大降低。所以我們可以創建一些圖像文件、html 文件和一些樣式文件。
sudo truncate -s 1k /var/www/html/test.html
sudo truncate -s 1k /var/www/html/test.jpg
sudo truncate -s 1k /var/www/html/test.css
sudo truncate -s 1k /var/www/html/test.js
下一步是檢查 Nginx 在使用我們剛創建的文件在全新安裝中壓縮請求的文件時的行為。
二、命令方式查看壓縮效果
使用 curl 命令方式,添加標頭 Accept-Encoding: gzip,來查看各文件的壓縮結果。
curl -H“Accept-Encoding: gzip”-I http://localhost/test.html
可以看到以下結果:
Output
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:04:25 GMT
Content-Type: text/html
Last-Modified: Tue, 09 Feb 2021 19:03:41 GMT
Connection: keep-alive
ETag: W/”6022dc8d-400″
Content-Encoding: gzip
在最后一行,出現 Content-Encoding: gzip 字樣。說明服務器正在用 gzip 壓縮來發送文件。默認情況下,nginx 僅壓縮 html 文件。所有在這個命令中可以看到文件做了壓縮處理。但其它的文件格式,并未做壓縮處理。
可以通過下面這條命令來驗證我們剛才的說法。
curl -H“Accept-Encoding: gzip”-I http://localhost/test.jpg
再看一下結果,和之前的有所不同:
Output
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:05:49 GMT
Content-Type: image/jpeg
Content-Length: 1024
Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT
Connection: keep-alive
ETag:“6022dc91-400”
Accept-Ranges: bytes
輸出結果中沒有出現 Content-Encoding: gzip,這意味著該文件并沒有做任何的壓縮。
你也可以使用這個方法來測試 css 等樣式文件。
curl -H“Accept-Encoding: gzip”-I http://localhost/test.css
結果一樣,沒有出現 Content-Encoding: gzip
Output
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:06:04 GMT
Content-Type: text/css
Content-Length: 1024
Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT
Connection: keep-alive
ETag:“6022dc91-400”
Accept-Ranges: bytes
三、配置 Nginx 開啟 gzip 功能
本節主要操作相關配置,讓 gzip 可以處理其它幾種文件格式的壓縮。
你可以使用 nano 或 vim 編輯 nginx 的配置文件。
sudo nano /etc/nginx/nginx.conf
找到 gzip 設置部分,如下所示:
/etc/nginx/nginx.conf
. . .
##
# `gzip` Settings
#
#
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_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
. . .
因為我們用的是 ubuntu 20.04。所以默認情況下,gzip 是開啟的。但有些設置無效,所以我們需要做一些修改:
通過取消注釋行前面的 #來啟用其他設置 (即,刪除# 符號)
添加 gzip_min_length 256; 參數,該參數是告訴 nginx,不要去壓縮小于 256 字節的文件,因為很小的文件沒有太必要。壓縮這類文件反而影響服務器效率。
在 gzip_types 參數中添加其他文件類型擴展名,這些文件類型可以是 Web 字體,圖片、XML、JSON 結構化數據或 SVG 圖片文件。
應用這些更改之后,設置部分應如下所示:
/etc/nginx/nginx.conf
. . .
##
# `gzip` Settings
#
#
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
text/css
text/javascript
text/plain
text/xml;
. . .
保存并關閉文件以退出。要啟用新配置,需要重新啟動 Nginx:
sudo systemctl restart nginx
四、確保所有的配置正確
重復之前的測試步驟,執行相應的命令請求:
curl -H“Accept-Encoding: gzip”-I http://localhost/test.html
因為 html 文件,之前已經默認開啟壓縮,所以這個命令執行結果保持不變:
Output
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:04:25 GMT
Content-Type: text/html
Last-Modified: Tue, 09 Feb 2021 19:03:41 GMT
Connection: keep-alive
ETag: W/”6022dc8d-400″
Content-Encoding: gzip
然后我們來測試一下之前未壓縮的 css 樣式表,看看結果會有什么變化:
curl -H“Accept-Encoding: gzip”-I http://localhost/test.css
可以看到 gzip 正在壓縮文件:
Output
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:21:54 GMT
Content-Type: text/css
Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT
Connection: keep-alive
Vary: Accept-Encoding
ETag: W/”6022dc91-400″
Content-Encoding: gzip
我們可以用相同的方式測試一下 jpg 文件:
curl -H“Accept-Encoding: gzip”-I http://localhost/test.jpg
沒有看到 gzip 壓縮:
Output
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:25:40 GMT
Content-Type: image/jpeg
Content-Length: 1024
Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT
Connection: keep-alive
ETag:“6022dc91-400”
Accept-Ranges: bytes
因為在之前的配置中,我們并沒有添加 image/jpeg。
在這種情況下,我們已經在 Nginx 中成功配置了 gzip。
結論:
可以看出,gzip 很容易配置,而且帶來的速度提升也非常明顯,搜索引擎也非常喜歡這類加載方式,如果想提高搜索引擎的排名,增加 gzip 是非常有必要的。