歡迎你們前往騰訊雲+社區,獲取更多騰訊海量技術實踐乾貨哦~javascript
本文由 小鐵匠米蘭的v 發表於 雲+社區專欄
網站加載的速度取決於瀏覽器必須下載的全部文件的大小。減小要傳輸的文件的大小可使網站不只加載更快,並且對於那些寬帶是按量計費的人來講也更友好。css
gzip
是一種流行的數據壓縮程序。您可使用gzip
壓縮Nginx實時文件。這些文件在檢索時由支持它的瀏覽器解壓縮,好處是web服務器和瀏覽器之間傳輸的數據量更小,速度更快。html
gzip
不必定適用於全部文件的壓縮。例如,文本文件壓縮得很是好,一般會縮小兩倍以上。另外一方面,諸如JPEG或PNG文件之類的圖像已經按其性質進行壓縮,使用gzip
壓縮很難有好的壓縮效果或者甚至沒有效果。壓縮文件會佔用服務器資源,所以最好只壓縮那些壓縮效果好的文件。java
在本指南中,咱們將討論如何配置安裝在Ubuntu 16.04服務器上的Nginx,以利用gzip
壓縮,來減小發送給網站訪問者的文件的大小。nginx
要學習本教程,您須要:web
這一步中,咱們將在默認的Nginx目錄中建立幾個測試文件來進行測試gzip
的壓縮效果。數據庫
Nginx不會分析文件內容,他只分析文件後綴,因此,它只是查找文件擴展名以肯定其MIME類型,這樣nginx就會對不一樣的文件做出不一樣的壓縮處理。json
由於只是測試,因此測試文件的內容可有可無。經過適當的更改文件名,咱們能夠欺騙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
配置,請使用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/dev...
歡迎你們前往騰訊雲+社區或關注雲加社區微信公衆號(QcloudCommunity),第一時間獲取更多海量技術實踐乾貨哦~
海量技術實踐經驗,盡在雲加社區!