歡迎大家前往騰訊雲+社區,獲取更多騰訊海量技術實踐干貨哦~
簡介
網站加載的速度取決於瀏覽器必須下載的所有文件的大小。減少要傳輸的文件的大小可以使網站不僅加載更快,而且對於那些寬帶是按量計費的人來說也更友好。
gzip
是一種流行的數據壓縮程序。您可以使用gzip
壓縮Nginx實時文件。這些文件在檢索時由支持它的瀏覽器解壓縮,好處是web服務器和瀏覽器之間傳輸的數據量更小,速度更快。
gzip
不一定適用於所有文件的壓縮。例如,文本文件壓縮得非常好,通常會縮小兩倍以上。另一方面,諸如JPEG或PNG文件之類的圖像已經按其性質進行壓縮,使用gzip
壓縮很難有好的壓縮效果或者甚至沒有效果。壓縮文件會占用服務器資源,因此最好只壓縮那些壓縮效果好的文件。
在本指南中,我們將討論如何配置安裝在Ubuntu 16.04服務器上的Nginx,以利用gzip
壓縮,來減少發送給網站訪問者的文件的大小。
必備條件
要學習本教程,您需要:
- 一個已安裝Nginx的Ubuntu 16.04服務器,沒有服務器的同學可以在這個頁面購買。 關於Nginx搭建,可以參考騰訊雲開發者實驗室的這個教程:https://cloud.tencent.com/developer/labs/lab/10003
第一步、創建測試文件
這一步中,我們將在默認的Nginx目錄中創建幾個測試文件來進行測試gzip
的壓縮效果。
Nginx不會分析文件內容,他只分析文件后綴,所以,它只是查找文件擴展名以確定其MIME類型,這樣nginx就會對不同的文件作出不同的壓縮處理。
因為只是測試,所以測試文件的內容無關緊要。通過適當的更改文件名,我們可以欺騙Nginx,讓Nginx認為這個文件是圖像或者是js腳本。
在我們的配置中,Nginx不會壓縮非常小的文件,因此我們將創建大小恰好為1KB的測試文件。這將讓我們驗證Nginx是否使用壓縮,壓縮一種類型的文件而不是其他類型的文件。
使用創建truncate
在默認Nginx目錄中命名的1 KB文件test.html
。擴展名表示它是一個HTML頁面。
sudo truncate -s 1k /var/www/html/test.html
讓我們以相同的方式創建一些測試文件:一個jpg
圖像文件,一個css
樣式表和一個js
JavaScript文件。
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
下一步是檢查NGIX如何對剛剛創建的文件進行壓縮。
第二步、檢查默認行為
讓我們檢查名為test.html
的HTML文件是否被壓縮。該命令從我們的Nginx服務器請求一個文件,並指定使用HTTP頭(Accept-Encoding: gzip
)來查找gzip
壓縮的內容。
curl -H "Accept-Encoding: gzip" -I http://localhost/test.html
作為響應,您應該看到幾個HTTP響應標頭:
Nginx響應頭
HTTP/1.1 200 OK
Server: nginx/1.4.6 (Ubuntu)
Date: Tue, 19 Jan 2016 20:04:12 GMT
Content-Type: text/html
Last-Modified: Tue, 04 Mar 2014 11:46:45 GMT
Connection: keep-alive
Content-Encoding: gzip
在最后一行中,您可以看到Content-Encoding: gzip
。這告訴我們gzip
壓縮已用於發送此文件。這是因為在Ubuntu 16.04上,Nginx的 gzip
在安裝后使用默認設置自動啟用了壓縮。
但是,默認情況下,Nginx僅壓縮HTML文件。新安裝中的每個其他文件都將以未壓縮的形式提供。要驗證這一點,您可以請求以test.jpg
相同方式命名的測試圖像。
curl -H "Accept-Encoding: gzip" -I http://localhost/test.jpg
結果應該與以前略有不同:
Nginx響應頭
HTTP/1.1 200 OK
Server: nginx/1.4.6 (Ubuntu)
Date: Tue, 19 Jan 2016 20:10:34 GMT
Content-Type: image/jpeg
Content-Length: 0
Last-Modified: Tue, 19 Jan 2016 20:06:22 GMT
Connection: keep-alive
ETag: "569e973e-0"
Accept-Ranges: bytes
Content-Encoding: gzip
沒有輸出,這意味着文件是在沒有壓縮的情況下提供。
您可以使用測試CSS樣式表重復測試。
curl -H "Accept-Encoding: gzip" -I http://localhost/test.css
再一次,輸出中沒有提到壓縮。
CSS文件的Nginx響應頭
HTTP/1.1 200 OK
Server: nginx/1.4.6 (Ubuntu)
Date: Tue, 19 Jan 2016 20:20:33 GMT
Content-Type: text/css
Content-Length: 0
Last-Modified: Tue, 19 Jan 2016 20:20:33 GMT
Connection: keep-alive
ETag: "569e9a91-0"
Accept-Ranges: bytes
下一步是將Nginx配置支持其他類型文件的壓縮。
第三步、配置Nginx的gzip設置
要更改Nginx的 gzip
配置,請使用nano
或者其他您喜歡的編輯器,來打開的Nginx主要配置文件。
sudo nano /etc/nginx/nginx.conf
找到gzip
設置部分,如下所示:
. . .
##
# `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;
. . .
您可以看到默認情況下,指令gzip
啟用了壓縮gzip on
,但使用#
注釋符號注釋了幾個其他設置。我們將對此部分進行一些更改:
- 通過取消注釋所有注釋行來啟用其他設置(就是刪除
#
) - 添加
gzip_min_length 256;
指令,告訴Nginx不要壓縮小於256字節的文件。這是非常小的文件,可以不用壓縮 gzip_types
是表示壓縮的文件類型,還可以添加web字體格式、ioc圖標和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 text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;
. . .
保存並關閉文件以退出。
要啟用新配置,請重新加載Nginx。
sudo systemctl reload nginx
下一步是檢查配置的更改是否按預期工作。
第四步、驗證新配置
我們可以像在第2步中那樣測試它,方法是使用curl
每個測試文件並檢查Content-Encoding: gzip
是否有輸出。
curl -H "Accept-Encoding: gzip" -I http://localhost/test.html
curl -H "Accept-Encoding: gzip" -I http://localhost/test.jpg
curl -H "Accept-Encoding: gzip" -I http://localhost/test.css
curl -H "Accept-Encoding: gzip" -I http://localhost/test.js
現在,只有test.jpg
圖像文件才能保持未壓縮狀態。在所有其他示例中,您應該能夠Content-Encoding: gzip
在輸出中找到標頭。
如果是這種情況,您已gzip
成功在Nginx中配置了壓縮!
結論
更改Nginx配置來使用gzip
壓縮,是很容易的一件事,而且能帶來不錯的提,。不僅帶寬有限的訪問者會更快地收到該網站,而且Google也會對網站加載速度感到滿意。作為現代網絡和使用的重要組成部分,網站的加載速度越來越受到關注,這gzip
是改進它的一大步。
參考文獻:《How To Add the gzip Module to Nginx on Ubuntu 16.04》
問答
相關閱讀
此文已由作者授權騰訊雲+社區發布,原文鏈接:https://cloud.tencent.com/developer/article/1158755?fromSource=waitui
歡迎大家前往騰訊雲+社區或關注雲加社區微信公眾號(QcloudCommunity),第一時間獲取更多海量技術實踐干貨哦~
海量技術實踐經驗,盡在雲加社區!